SizeGrid attributes

The image component of Laya provides a very useful attribute, sizeGrid, which can be set to stretch the repeated parts of the image to achieve the purpose of turning small images into large ones and reduce the memory occupied by image resources. As shown in Figure 1.1, the top and bottom images use the same local image resource. The larger image is set with the sizeGrid attribute, turning the smaller image into the larger one.

The specific setting method of sizeGrid is shown in Figure 1.2. Input four values of upper, lower, left and right respectively in the setting box to determine the position of red line. Laya engine will automatically stretch the part surrounded by red line in four directions, namely, the four angles remain unchanged and the middle part is stretched outward.

Second, Image source code analysis

  1. Directly from Laya engine source code, open the Image component code, search for sizeGrid. The sizeGrid is set to sizeGrid of the _bitmap attribute of the Image component. Let’s see what _bitmap is.

  1. Retrieve the _bitmap attribute of Image and, looking at the comment, display the object used to draw the Image, which appears to be an instance of the drawing process in place of Image. So when you set the skin of the image, it should be done by _bitmap, searching the setter for the skin.

  1. As can be seen from Figure 2.3, when setting picture skin, if the skin address is valid, the source attribute will be set.

  1. Jump to the AutoBitmap code, the class to which the _bitmap attribute of the Image belongs, retrieve the source, as shown in Figure 3.1, and call the _setChanged method when setting the source. The _setChanged method sets a timer that fires the changeSource method before the next draw.

  1. Look at the changeSource code and call the draw9Grid method when sizeGrid is set.

  1. Jump to the draw9Grid method and you can see that a command to draw a grid image is saved.

  1. If you look at the _saveToCmd method, you can see that the draw grid commands are saved to the _CMDS array, and the commands in _cmDS are called as they are drawn, as shown in Figure 3.5.

Four, draw nine grid specific operation

See what the draw grid picture command does when run: Figure 4.1 is the method called when the draw grid command is executed. You can see that the image is divided into nine parts to draw according to the sizeGrid parameter. The underlying drawing principle is not studied.