Freedom + Tile Hybrid Layout
Let the tile layout and free layout be mixed. The effect is that the canvas has components in both tile and free layout states at the same time, and can be switched at any time. Next we analyze the technical points of implementing this solution.
The difference between tiles and free layout
There are many differences in interaction between tile layout and free layout, such as:
- Tile layouts cannot overlap, and free layouts can overlap.
- Tile layout can be attracted upwards, free layout will not be attracted.
- Tile layout does not have the concept of automatic adsorption, but free layout can support alignment, adsorption and other functions.
These interaction-time differences are easily compensated for by separate processing at runtime. What really needs to be designed from the top is the difference in units .
Since the position of free layout is fixed, the position is generally described in pixels; because the width and height of tile layout are based on proportion, the {w:1, h:2} position is often described by relative numbers without units, and then scaled according to the current window size during rendering.
But in the case of mixing tiles and freeware, the layout choice of a component between tiles and freeware can be determined by the parent container, or by itself, which raises a challenge:
The status of a component may be switched to tile or free at any time . It is theoretically possible to mix two units at the same time, but the calculation cost is relatively high, so it is best to use one unit for storage and calculation, then adapt both tile and The free unit is the pixel .
Implementing tile layout with pixels
Because it is very easy to use pixel calculations in free layout, we only talk about how to use pixel calculations in tile layout.
In pixel mode, the position and size of all tile components are pixels:
{
"layoutMode": "grid",
"x": 100,
"y": 100,
"width": 150,
"height": 150
}As shown above, the difference between tile mode components and free layout components is only…