Hello, I have a question about UI - image draw as
I don’t understand the box, which is the attribute of image drawas, just by the description in the document.
I want to know the difference between the box and the image options and why there are 3x3 boxes in the box.
please help me
You will find this feature referred to as 9-slice here and there.
- here is what happens when we try to make a border with the
Imagesetting:
Note how the edges and corners get distorted - they get squished!
- when
Boxis used, you get to reserve a percentage of the image (from each side) that will not be affected by stretching / squishing:
The edges are preserved. That .25 margin = 25% of the image in pixels. This image is 540px wide, meaning that 135px (from the left & right edges) will not be be affected by the image resizing. If the image becomes too small (2 x 135px in this case), you will observe distortion again.
why there are 3x3 boxes in the box
The dotted lines indicate the margins mentioned above. If you add a margin from each side, you’ll end up with a grid like in the image. Those margins divide the image into 3x3 regions: hence 9-slice.
2 Likes