Achieve similar Cocos2dx game engine in the nine grid components, to solve the complex UI border adaptive problem

1. Introduction

Nine squares, as the name implies, is to split the picture into 9 pieces, to ensure that the four corners are fixed, the other 5 pieces of free stretching; The idea was first introduced to Scale9Sprite in the Cocos2dx game engine. Cocos2d-x: Scale9Sprite Class Reference cocos2D-X: Scale9Sprite Class Reference

In the front end field, we often encounter beautiful and complex UI frames made by artists, but they cannot automatically adapt the width and height according to the content. If we directly set the width and height of the picture, it will lead to problems such as stretching deformation and blur. The original design of the nine grid is to solve this problem, but unfortunately, I have not seen in the front end of the plug-in or components to achieve this function, so I wrote a component to solve this problem in the future project

This component is currently developed based on VUE and therefore only applies to VUE projects

2. Effect display

2.1 UI pictures provided by artists

2.2 Nine-grid resources after processing

We can see that after processing of resources, will become very small (digression, which is one of the concept of scratchable latex, most CoCos2dx engine used in the mobile game development, so the size of resources as well as the problems to consider, so scratchable latex concept, can be said to be very good), but some of the key lines, we still retain the, This way, after using the grid, we can still restore the UI that the artist made, while preserving the details

2.3 Effect

As you can see, the basic adaption has been done perfectly, with the effect of moving in and out, and the border ADAPTS automatically when the content changes

2. API

2.1 Basic Usage

Using the MD-Sprite9 component, wrap the content and pass in the image address IMG, Origin, and center width and height box. These three attributes are required

<md-sprite9
    :img="'./box_1.png'"
    :hover-img="'./box_2.png'"
    :origin="[26, 21]"
    :box="[15]"
>{{testTxt}}</md-sprite9>
Copy the code

2.2 Migration effect

Note that the size, origin and center width and height of the changed image should be the same as the original image, otherwise there will be a cutting error

<md-sprite9
    :img="'./box_1.png'"
    :hover-img="'./box_2.png'"
    :origin="[26, 21]"
    :box="[15]"
>{{testTxt}}</md-sprite9>
Copy the code

2.3 Transition Effect

Using the transition property, the mouse moves in and out of the system until hover-img is passed

<md-sprite9
    :img="'./box_1.png'"
    :hover-img="'./box_2.png'"
    :origin="[26, 21]"
    :box="[15]"
    transition="background-image .5s linear"
>{{testTxt}}</md-sprite9>
Copy the code

2.4 Edging arrangement

Facing property is used to control the content from the left side of the frame. It is usually used to solve the problem that the width and height of the four corners of the nine-grid image are too large (for example, the third nine-grid image in the previous effect display), which causes the content distance from the frame to be too large. In general, it can not be used

<md-sprite9
    :img="'./box2.png'"
    :origin="[29,45]"
    :box="[2, 6]"
    class="box3"
    facing
>
    <span class="test">{{testTxt2}} </span>
</md-sprite9>
Copy the code

3. Attributes