github-code/lvgl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(style): add skew style (#4886)

Browse Source 
Signed-off-by: pengyiqiang <pengyiqiang@xiaomi.com>
Co-authored-by: pengyiqiang <pengyiqiang@xiaomi.com>
This commit is contained in:
_VIFEXTech
2023-12-12 16:18:01 +08:00
committed by GitHub
parent f1e021e7b3
commit 4be4cb6eee
12 changed files with 163 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/overview/style-props.md
View File

@@ -165,6 +165,24 @@ Set the pivot point's Y coordinate for transformations. Relative to the object's
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
</ul>
### transform_skew_x
Skew an object horizontally. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
</ul>
### transform_skew_y
Skew an object vertically. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
</ul>
## Padding
Properties to describe spacing between the parent's sides and the children and among the children. Very similar to the padding properties in HTML.
@@ -226,7 +244,7 @@ Sets the padding between the columns. Used by the layouts.
Properties to describe spacing around an object. Very similar to the margin properties in HTML.
### margin_top
Sets the margin on the top. The object will keep this space from its siblings in layouts.
Sets the margin on the top. The object will keep this space from its siblings in layouts.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -442,7 +460,7 @@ Sets whether the border should be drawn before or after the children are drawn.
Properties to describe the outline. It's like a border but drawn outside of the rectangles.
### outline_width
Set the width of the outline in pixels.
Set the width of the outline in pixels.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -490,7 +508,7 @@ Set the width of the shadow in pixels. The value should be >= 0.
</ul>
### shadow_offset_x
Set an offset on the shadow in pixels in X direction.
Set an offset on the shadow in pixels in X direction.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -499,7 +517,7 @@ Set an offset on the shadow in pixels in X direction.
</ul>
### shadow_offset_y
Set an offset on the shadow in pixels in Y direction.
Set an offset on the shadow in pixels in Y direction.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -595,7 +613,7 @@ Set the gap between dashes in pixel. Note that dash works only on horizontal and
</ul>
### line_rounded
Make the end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending
Make the end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -634,7 +652,7 @@ Set the width (thickness) of the arcs in pixel.
</ul>
### arc_rounded
Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular line ending
Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular line ending
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -691,7 +709,7 @@ Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully
</ul>
### text_font
Set the font of the text (a pointer `lv_font_t *`).
Set the font of the text (a pointer `lv_font_t *`).
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_FONT_DEFAULT`</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>