<Geometrical figure>-View-Basic Functions-Dynamic Engine-Development Guide-HUAWEI Themes

Function

In some scenarios that require large memory capacities, the <Geometrical figure> tag can be used to reduce memory usage. Currently, geometric figure tags <Rectangle>, <Circle>, <Ellipse>, <Arc>, and <Line> are supported, where <Rectangle> can be used to draw rectangles with square or rounded corners, and <Arc> can be used to draw sectors or arcs.

Scenarios

Write several fixed paths of geometric figures and tap the button to play path animations randomly.

Write geometric figures to create mixing effects, such as the tangram effect.

XML Specifications

Collapse
Word wrap
Dark theme
Copy code
<Rectangle x="" y="" w="" h="" cornerRadius="" strokeColor="" fillColor="" weight="" cap="" dottedLine="" hybridMode="">
<!--<FillGradient>: fill gradient; <StrokeGradient>: stroke gradient-->
    <FillGradient>
<!--Linear gradient, radial gradient, and sweep gradient--><!--Select one of the three gradient effects.-->
        <Linear/Radial/Sweep x="" y="" x1="" y1="" tileMode="">
            <GradientPoint color="" position=""/>
            <GradientPoint color="" position=""/>
            <GradientPoint color="" position=""/>
        </Linear>/</Radial>/</Sweep>
    </FillGradient>
    <StrokeGradient>
<!--The setting is the same as that of <FillGradient>.-->
    </StrokeGradient>
</Rectangle>

The XML specifications of other geometric figures are the same as those of <Rectangle>.

Parameters

Common attributes

Expand

Parameter	Type	Mandatory	Description
x	Number	No	X coordinate, in pixels. For a rectangle, set this parameter to the x coordinate of the upper left corner. For a straight line, set this parameter to the x coordinate of the start point. For other geometric figures, set this parameter to the x coordinate of the center point. The default value is 0. Expressions are supported.
y	Number	No	Y coordinate, in pixels. For a rectangle, set this parameter to the y coordinate of the upper left corner. For a straight line, set this parameter to the y coordinate of the start point. For other geometric figures, set this parameter to the y coordinate of the center point. The default value is 0. Expressions are supported.
strokeColor	String	No	Stroke color, which can be represented in three ways: Use a 6- or 8-digit hexadecimal color code, for example, #FFFFFF or #FFFFFFFF. For an 8-digit hexadecimal color code, the first two digits indicate transparency, and the remaining six digits indicate red, green, and blue respectively. Use the *argb(transparency,red,green,blue)* function. Each value in the function ranges from 0 to 255. Use a string variable, for example, @abc. You can use a 6- or 8-digit hexadecimal color code without a number sign (#), for example, ffffff, ffffffff, or the argb function to represent the string variable. The default color is black.
fillColor	String	No	Fill color, which can be represented in the same ways as strokeColor. In addition, you can use a variable to dynamically change the fill color or gradient fill (specified in <FillGradient>). To dynamically change the gradient fill, you need to set @color="argb(0,0,0,0)+argb(15,5,5,5)+argb(25,3,10,0)", and then the color and position parameters in <FillGradient>. Later, you can change the value of the @color variable to dynamically change the gradient fill.
weight	Number	No	Stroke width. The value is a natural number or expression. The default value is 0, indicating that no stroke is required.
cap	String	No	Cap shape. The options are semicircle and square. If this parameter is left empty, there is no cap.
dottedLine	String	No	Dotted line pattern in the following format: line segment length,spacing,line segment length,spacing... For example, value 10,20,30,40 indicates a 10-pixel wide line segment, a 20-pixel spacing, a 30-pixel wide line segment, and a 40-pixel spacing in sequence. The line segments are displayed in this way repeatedly to form a geometric figure stroke. Note that at least a pair of line segment length and spacing settings is required.
hybridMode	String	No	Mixing mode. The options are clear (0), ori (1), tgt (2), oriOver (3), tgtOver (4), oriIn (5), tgtIn (6), oriOut (7), tgtOut (8), oriATop (9), tgtATop (10), and xor (11). You can enter either a character string or a number. This parameter must be used together with <Group>.

Attributes of a rectangle with square or rounded corners

Expand

Parameter	Type	Mandatory	Description
cornerRadius	String	No	Radius of the rounded corner of a rectangle, in x-radius,y-radius format, for example, 10,10. The value is a natural number, in pixels. The default value is 0.
w	Number	Yes	Rectangle width, in pixels. The value is a natural number or expression. The default value is 0.
h	Number	Yes	Rectangle height, in pixels. The value is a natural number or expression. The default value is 0.

Circle attributes

Expand

Parameter	Type	Mandatory	Description
r	Number	Yes	Circle radius, in pixels. The value is a natural number or expression. The default value is 0.

Ellipse attributes

Expand

Parameter	Type	Mandatory	Description
w	Number	Yes	Ellipse width, in pixels. The value is a natural number or expression. The default value is 0.
h	Number	Yes	Ellipse height, in pixels. The value is a natural number or expression. The default value is 0.

Sector and arc attributes

Expand

Parameter	Type	Mandatory	Description
w	Number	Yes	Width of the ellipse where a sector is located. The value is a natural number or expression.
h	Number	Yes	Height of the ellipse where a sector is located. The value is a natural number or expression.
startAngle	Number	No	Start angle, in degrees. The value ranges from –360 to +360. The default value is 0, which is the angle in 3 o'clock direction. Expressions are supported.
sweepAngle	Number	Yes	Sweep angle (sector angle), based on which sweeping starts from the start angle clockwise. The value ranges from –360 to +360. The default value is 0. Expressions are supported.
closure	String	No	Closure status. If this parameter is set to true, a sector is drawn. If this parameter is set to false, an arc is drawn. The default value is false.

Straight line attributes

Expand

Parameter	Type	Mandatory	Description
x1	Number	Yes	X coordinate of the end point of a straight line, in pixels. The default value is 0. Expressions are supported.
y1	Number	Yes	Y coordinate of the end point of a straight line, in pixels. The default value is 0. Expressions are supported.

Linear

Expand

Parameter	Type	Mandatory	Description
x	Number	No	X coordinate of a gradient axis (x,y,x1,y1), in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.
y	Number	No	Y coordinate of a gradient axis (x,y,x1,y1), in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.
x1	Number	No	X1 coordinate of a gradient axis (x,y,x1,y1), in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.
y1	Number	No	Y1 coordinate of a gradient axis (x,y,x1,y1), in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported. Note: The x, y, x1, and y1 coordinates cannot be 0 at the same time.
tileMode	String	No	Tile mode of the linear gradient. The options are as follows: stretch: Gradient colors are stretched along the gradient axis in the geometric figure. mirror: Gradient colors are displayed along the gradient axis in mirror mode (for example, abbaab...). loop: Gradient colors are displayed along the gradient axis in loop mode (for example, ababab...). The default value is stretch.

Radial

Expand

Parameter	Type	Mandatory	Description
x	Number	No	X coordinate of the circle center, in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.
y	Number	No	Y coordinate of the circle center, in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.
r	Number	No	Radius, in pixels. The value is a positive integer or expression. The default value is 10.
tileMode	String	No	Tile mode of the radial gradient. The options are as follows: stretch: Gradient colors are stretched from the center point of a geometric figure. mirror: Gradient colors are radiated out repeatedly from the center point in mirror mode (for example, abbaab...). loop: Gradient colors are radiated out from the center point in loop mode (for example, ababab...). The default value is stretch.

Sweep

Expand

Parameter	Type	Mandatory	Description
x	Number	No	X coordinate of the center point, in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.
y	Number	No	Y coordinate of the center point, in pixels. The coordinate is relative to coordinates of the geometric figure. The default value is 0 and expressions are supported.

GradientPoint

As a gradient subtag, GradientPoint is used to set the color and position of a gradient point.

Expand

Parameter	Type	Mandatory	Description
color	String	Yes	Gradient point color, which can be represented in three ways: Use a 6- or 8-digit hexadecimal color code, for example, #FFFFFF or #FFFFFFFF. For an 8-digit hexadecimal color code, the first two digits indicate transparency, and the remaining six digits indicate red, green, and blue respectively. Use the *argb(transparency,red,green,blue)* function. Each value in the function ranges from 0 to 255. Use a string variable, for example, @abc. You can use a 6- or 8-digit hexadecimal color code without a number sign (#), for example, ffffff, ffffffff, or the argb function to represent the string variable.
position	Number	Yes	Gradient point position. The value ranges from 0 to 1.0.

Parameter

Type

Mandatory

Description

color

String

Yes

Gradient point color, which can be represented in three ways:

Use a 6- or 8-digit hexadecimal color code, for example, #FFFFFF or #FFFFFFFF. For an 8-digit hexadecimal color code, the first two digits indicate transparency, and the remaining six digits indicate red, green, and blue respectively.
Use the argb(transparency,red,green,blue) function. Each value in the function ranges from 0 to 255.
Use a string variable, for example, @abc. You can use a 6- or 8-digit hexadecimal color code without a number sign (#), for example, ffffff, ffffffff, or the argb function to represent the string variable.

position

Number

Yes

Gradient point position. The value ranges from 0 to 1.0.

Note:

1. For geometric figures with an area, both strokeColor and fillColor can be set. For lines, only strokeColor can be set.

2. If both fillColor/strokeColor and <FillGradient>/<StrokeGradient> exist, the geometric figure is drawn based on <FillGradient>/<StrokeGradient>.

3. Animations such as translation and transparency animations must be written before the gradient mode. Otherwise, the animations cannot be parsed.

Examples

Example 1: Draw a rounded rectangle. Set the coordinates of the upper left corner of the rounded rectangle to (10,20), width to 100, height to 200, and stroke width to 5. In this case, the coordinates of the lower right corner can be calculated as follows: (10 + 100 + 5 x 2,20 + 200 + 5 x 2) = (120,230). Configure a linear gradient in FillGradient. In detail, use the upper left corner of the rectangle as the coordinate origin and set a gradient axis (0,0,100,200). That is, implement a linear gradient along the straight line from the upper left corner to the lower right corner of the rectangle.

Collapse
Word wrap
Dark theme
Copy code
<Rectangle x="10" y="20" w="100" h="200" cornerRadius="5,10" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle" dottedLine="20,15" >
    <!--<FillGradient>: fill gradient; <StrokeGradient>: stroke gradient-->
    <FillGradient>
        <!--Linear gradient-->
        <Linear x="0" y="0" x1="100" y1="200" tileMode="stretch">
            <GradientPoint color="#aa0000" position="0"/>
            <GradientPoint color="#00aa00" position="0.5"/>
            <GradientPoint color="#0000aa" position="1"/>
        </Linear>
    </FillGradient>
</Rectangle>

Example 2: Draw an ellipse. In detail, set coordinates of the ellipse center to (100,400), rx (radius along the X axis) to 50, ry (radius along the Y axis) to 100, and weight (stroke width) to 5. Configure a radial gradient. In this case, coordinates of the radial gradient center can be calculated as follows: (rx + weight,ry + weight) = (55,105). In addition, the radius of the radial gradient is 60.

Collapse
Word wrap
Dark theme
Copy code
<Ellipse x="100" y="400" w="100" h="200" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle" dottedLine="10,20,13,24">
    <FillGradient>
        <!--Radial gradient-->
        <Radial x="55" y="105" r="60">
            <GradientPoint color="#aa0000" position="0.2"/>
            <GradientPoint color="#00aa00" position="0.7"/>
        </Radial>
    </FillGradient>
</Ellipse>

Example 3: Draw a circle. In detail, set coordinates of the circle center to (600,200), r (circle radius) to 50, and weight (stroke width) to 5. Configure a sweep gradient. In this case, coordinates of the sweep gradient center can be calculated as follows: (r + weight, r + weight) = (55,55).

Collapse
Word wrap
Dark theme
Copy code
<Circle x="600" y="200" r="50" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle">
    <FillGradient>
        <!--Sweep gradient-->
        <Sweep x="55" y="55" >
            <GradientPoint color="#aa0000" position="0.2"/>
            <GradientPoint color="#00aa00" position="0.7"/>
        </Sweep>
    </FillGradient>
</Circle>

Example 4: Draw a sector. In detail, set the center coordinates of the ellipse where the sector is located to (400,200), radius along the X axis to 100, radius along the Y axis to 200, and closure to true. In addition, set startAngle to –10 and sweepAngle to 50. The angle of the 3 o'clock position is 0 degrees. An angle in counterclockwise direction is negative. An angle in clockwise direction is positive. Therefore, the settings indicate that, after a 10-degree counterclockwise rotation from the 3 o'clock position, sweeping of a 50-degree angle starts. Coordinates of the sweep gradient center are calculated in the same way as the ellipse. (Do not set the stroke width of the sector to a large value.)

Collapse
Word wrap
Dark theme
Copy code
<Arc x="400" y="200" w="200" h="400" startAngle="-10" sweepAngle="50" closure="true" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle">
    <FillGradient>
        <!--Sweep gradient-->
        <Sweep x="105" y="205" >
            <GradientPoint color="#aa0000" position="0.2"/>
            <GradientPoint color="#00aa00" position="0.7"/>
            <GradientPoint color="#0000aa" position="1"/>
        </Sweep>
    </FillGradient>
</Arc>

Example 5: Draw an arc in the same way as the sector. The only difference is that you need to set closure to false. In this way, only the sector arc is drawn.

Collapse
Word wrap
Dark theme
Copy code
<Arc x="400" y="400" w="100" h="200" startAngle="-10" sweepAngle="50" closure="false" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="semicircle"/>

Example 6: Draw a straight line.

Collapse
Word wrap
Dark theme
Copy code
<Line x="10" y="20" x1="100" y1="200" strokeColor="#ff00ff00" weight="5" cap="semicircle"/>

Example 7: Mix geometric figures. To implement this, you must use <Group> together with geometric figure tags. In <Group>, set layered, embed multiple geometric figures, and set the hybridMode parameter in the last geometric figure tag.

Collapse
Word wrap
Dark theme
Copy code
<Group x="0" y="0" w="#screen_width" h="#screen_height" layered="true">
    <Rectangle x="200" y="200" w="300" h="300" cornerRadius="15,15" fillColor="#ffffadff" weight="10" dottedLine="10,10" />
    <Image src="di.png" x="200" y="200" w="300" h="300"/>
    <Rectangle x="300" y="300" w="300" h="300" cornerRadius="15,15" fillColor="#ffaaadff" weight="10" dottedLine="10,20"  hybridMode="xor"/>
</Group>

Example 8: Dynamically change the fill gradient. In detail, declare the @color variable of the string type first. In the variable, combine multiple colors with plus signs (+) and ensure that the number of colors are the same as that of gradient colors. Then set fillColor to @color and configure the initial gradient colors in <GradientPoint>. During the running process, the value of @color will change when the button is tapped, achieving the dynamic fill gradient change effect.

Collapse
Word wrap
Dark theme
Copy code
<!--Combine colors with plus signs (+) in <GradientPoint> and ensure that the number of colors is the same as that in <FillGradient>.-->
<Var name="color" expression="argb(0,0,0,0)+argb(15,5,5,5)+argb(25,3,10,0)" type="string"/>
<!--Dynamically change the value of @color. Alternatively, use <VariableAnimation> to automatically change the gradient colors. -->
<Button   x="0" y="0"  w="420" h="420">
        <Trigger action="up">
            <VariableCommand name="c" expression="argb(255,141,183,255)+argb(255,83,187,180)+argb(255,107,205,164)" type="string"/>
        </Trigger>
</Button>
<Rectangle cornerRadius="15,15" dottedLine="10,20,30" fillColor="@color" h="400" strokeAlign="center" strokeColor="#ff00ff00" w="200" weight="5" x="510" y="610">
    <StrokeGradient>
        <Linear tileMode="stretch" x="0" x1="0" y="0" y1="100">
            <GradientPoint color="#ff0f0f" position="0" />
            <GradientPoint color="#00425D" position="0.5" />
            <GradientPoint color="#4ccfff" position="1" />
        </Linear>
    </StrokeGradient>
    <FillGradient>
        <Linear tileMode="stretch" x="0" x1="130" y="0" y1="0">
            <GradientPoint color="#000000" position="0" />
            <GradientPoint color="#00ff00" position="0.5" />
            <GradientPoint color="#ffffff" position="1" />
        </Linear>
    </FillGradient>
</Rectangle>