9-patch Settings

1) The dashboard component uses a border set by a custom image, which can be filled with the "Point Nine Image Filling Settings" function.

2) In order to solve the problem that the border image of the dashboard component is stretched and deformed, the new version 10.0.18 has added the function of "Point Nine Image Filling Settings".

When the point nine image is filled, the pixels at the four corners of the image remain unchanged, and the remaining positions are stretched to ensure that most borders are not deformed under different resolution effects.

Note: When using the new adaptive plugin, this function is not supported.

1.Feature of entrance

1）After you select the component, drop down and select Custom Image on the border of background style panel, and click the Select Image button to upload a custom image. Then you can click the Point Nine Map Filling Settings button to enter the setting interface.

2.Cutting rules

The "Point Nine Image" filling setting interface has 4 freely draggable lines, which divide the whole picture into 9 grids.

1）When the middle grid displays the border at the front, it will be hollowed out, and only the surrounding 8 grids will be displayed. We can determine the display range of the border by adjusting the size of the middle grid.

2）If you want to change the size of the middle grid, you need to manually drag 4 lines, as shown below：

 Note: When dragging the line, any one of the four lines cannot be at the extreme edge position, otherwise will show error. 

1.Prepare template

Create a new dashboard, select the absolute layout for the body, add a pie chart into the body, and then set some data. 

2.Custom Image Border

Select the pie chart and use the image "border.png" to customize the border. as shown below：

3.Cut the picture

The preview effect is as follows：

1.Border material compression

When the image used by the border is much larger than the component size, the point nine image filling will compress the pixels at the four corners and zoom to fit the current component size while keeping the ratio of the four corners unchanged. So the border is different from the image. as shown below：

2.Cannot Find Widget Type

When you are dragging the split line, as long as any line is at the extreme edge position, the front end cannot be previewed normally, and will show the error: TypeError: Cannot read property 'top' of undefined