diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001184628104.png b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..5986356fa4f5c8e40057ce4e6e1e16307b228b62 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001184628104.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001219982725.png b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001219982725.png new file mode 100644 index 0000000000000000000000000000000000000000..b980148e07e0d6d9f42b0df75766da9cbfe09840 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001219982725.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001184628104.png b/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..b1adc0e02a67216e458df85cb263353c577e0a33 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001184628104.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001219982725.PNG b/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001219982725.PNG new file mode 100644 index 0000000000000000000000000000000000000000..310eae1cbaec0f37b61787a9cfa6ddf032c887d4 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001219982725.PNG differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001169582302.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001169582302.png new file mode 100644 index 0000000000000000000000000000000000000000..4248727e91ebbd2ad2dd35211936745a8800f94c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001169582302.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104394.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104394.png new file mode 100644 index 0000000000000000000000000000000000000000..3d9d5916e4dd08a6190848d402dcd1b6540ec613 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104394.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264386.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264386.png new file mode 100644 index 0000000000000000000000000000000000000000..8e96bc78a4ab3e3d5c44201def12d73fea1b6db2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264386.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582856.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582856.png new file mode 100644 index 0000000000000000000000000000000000000000..837f6723b62e7402ba6e240372bd3de88e2ff0f6 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582856.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001184628104.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..ef4a4905fb4c0c1a6559bb622c523282ef01ee27 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001184628104.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058488.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058488.png deleted file mode 100644 index b85ac72fcec0f4b2eb752307d4abe05ef4795ef2..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058488.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218432.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218432.gif deleted file mode 100644 index 49167ceae5eb50a96334c73496ed534d25bbecf4..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218432.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218454.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218454.png deleted file mode 100644 index ad2c71e4bcc008c0d286a05b2e969103aa06236d..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218454.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218484.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218484.png deleted file mode 100644 index 2c20e6d28a0636b8122f6377052933c33cfcffaf..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218484.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744185.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744185.png new file mode 100644 index 0000000000000000000000000000000000000000..0e103f4f2200e361cc966b8bed337c8a73380cfd Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744185.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744191.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744191.png new file mode 100644 index 0000000000000000000000000000000000000000..c2aeef3f178867e832601aae0b723ae1ddf3db49 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744191.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982725.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982725.png new file mode 100644 index 0000000000000000000000000000000000000000..048fdc4749a41e0675390e66e61b5d63953ed8e1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982725.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858387.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858387.jpg deleted file mode 100644 index e3d3e1023746c03c9ad426328de0114321ac3f66..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256858387.jpg and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978353.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978353.png deleted file mode 100644 index d34ba19a667f40c8dc3b4e668095bda1bd4868aa..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978353.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/gradientColor1.png b/en/application-dev/reference/arkui-ts/figures/gradientColor1.png new file mode 100644 index 0000000000000000000000000000000000000000..b82f81358cd03243b99ac23b6eb190238bf22f0b Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/gradientColor1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/gradientColor2.png b/en/application-dev/reference/arkui-ts/figures/gradientColor2.png new file mode 100644 index 0000000000000000000000000000000000000000..c50424c9fd41bdda195affb5170cac38bd3df0e5 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/gradientColor2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/gradientColor3.png b/en/application-dev/reference/arkui-ts/figures/gradientColor3.png new file mode 100644 index 0000000000000000000000000000000000000000..84d9674c5b43486a260ca9e1c9b1017b9022583c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/gradientColor3.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index 4fd5e4a14697ccfa22bfa1a722560de9dca87a3d..e18675585e33d687275c6e145ec6c49c533f63cd 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -16,29 +16,30 @@ Not supported Circle(options?: {width?: string | number, height?: string | number}) -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | No| 0 | Width of the circle.| - | height | string \| number | No| 0 | Height of the circle.| +**Parameters** + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| width | string \| number | No| Width of the circle.
Default value: **0**| +| height | string \| number | No| Height of the circle.
Default value: **0**| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | Length | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| +| Name| Type| Description| +| -------- | -------- | -------- | +| fill | [ResourceColor](ts-types.md) | Color of the fill area.
Default value: **Color.Black**| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.
Default value: **1**| +| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.| +| strokeDashArray | Array<Length> | Stroke dashes.
Default value: **[]** | +| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.
Default value: **LineCapStyle.Butt**| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**| +| strokeMiterLimit | number \| string | Limit value when the sharp angle is drawn as a miter.
Default value: **4**
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a shape with a sharp angle.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.
Default value: **1**
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | Stroke width.
Default value: **1**| +| antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**| ## Example @@ -49,14 +50,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the @Component struct CircleExample { build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { + Column({ space: 10 }) { // Draw a circle whose diameter is 150. Circle({ width: 150, height: 150 }) - // Draw a circle whose diameter is 150. - Circle().width(150).height(150) - }.width('100%').margin({ top: 5 }) + // Draw a circle with the diameter of 150 and red dashes. (If the width and height are different, the shorter value is used as the diameter.) + Circle() + .width(150) + .height(200) + .fillOpacity(0) + .strokeWidth(3) + .stroke(Color.Red) + .strokeDashArray([1, 2]) + }.width('100%') } } ``` -![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png) +![en-us_image_0000001219744191](figures/en-us_image_0000001219744191.png) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 156e1ab40ee2ac87553b4df54054e2fb489d633b..31ede5c9611e2af12c97aeb7e5bfb6654ca1e7de 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -14,7 +14,7 @@ Not supported ## APIs -ellipse(options?: {width?: string | number, height?: string | number}) +Ellipse(options?: {width?: string | number, height?: string | number}) **Parameters** @@ -27,19 +27,19 @@ ellipse(options?: {width?: string | number, height?: string | number}) In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No|Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dash.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | Length | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| +| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.| +| strokeDashArray | Array<Length> | [] | Stroke dashes. | +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| ## Example @@ -50,14 +50,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the @Component struct EllipseExample { build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // Draw an ellipse in a 150 x 80 rectangle. + Column({ space: 10 }) { + // Draw a 150 x 80 ellipse. Ellipse({ width: 150, height: 80 }) - // Draw an ellipse in a 150 x 80 rectangle. - Ellipse().width(150).height(80) - }.width('100%').margin({ top: 5 }) + // Draw a 150 x 100 ellipse with blue strokes. + Ellipse() + .width(150) + .height(100) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + }.width('100%') } } ``` -![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png) +![en-us_image_0000001174104394](figures/en-us_image_0000001174104394.png) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md index a4dad2bb721a0e4db791ae84bed8a660d717b04b..8008dbb26a45122441d98570a47fdf0be1d95037 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -5,8 +5,7 @@ The **\** component is used to draw a straight line. > **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -22,36 +21,126 @@ Not supported Line(value?: {width?: string | number, height?: string | number}) -- Parameters - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | No| 0 | Width.| - | height | string \| number | No| 0 | Height.| +**Parameters** + +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | No| 0 | Width.| +| height | string \| number | No| 0 | Height.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| startPoint | Array<Length> | [0, 0] | No | Coordinates (relative coordinates) of the start point of the line, in vp.| -| endPoint | Array<Length> | [0, 0] | No | Coordinates (relative coordinates) of the end point of the line, in vp.| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | Length | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| - +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| startPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.| +| endPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.| +| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| +| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Stroke color.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a shape with a sharp angle.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| ## Example +### Example 1 + +```ts +// xxx.ets +@Entry +@Component +struct LineExample { + build() { + Column({ space: 10 }) { + // The coordinates of the start and end points of the line are determined relative to the coordinates of the drawing area of the component. + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor('#F5F5F5') + Line() + .width(200) + .height(200) + .startPoint([50, 50]) + .endPoint([150, 150]) + .strokeWidth(5) + .stroke(Color.Orange) + .strokeOpacity(0.5) + .backgroundColor('#F5F5F5') + // If the coordinates of a point are beyond the width and height range of the component, the line will exceed the drawing area. + Line({ width: 50, height: 50 }) + .startPoint([0, 0]) + .endPoint([100, 100]) + .strokeWidth(3) + .strokeDashArray([10, 3]) + .backgroundColor('#F5F5F5') + // strokeDashOffset is used to define the offset when the associated strokeDashArray array is rendered. + Line({ width: 50, height: 50 }) + .startPoint([0, 0]) + .endPoint([100, 100]) + .strokeWidth(3) + .strokeDashArray([10, 3]) + .strokeDashOffset(5) + .backgroundColor('#F5F5F5') + } + } +} +``` + +![en-us_image_0000001219982725](figures/en-us_image_0000001219982725.png) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct LineExample1 { + build() { + Row({ space: 10 }) { + // Set LineCapStyle to Butt. + Line() + .width(100) + .height(200) + .startPoint([50, 50]) + .endPoint([50, 200]) + .strokeWidth(20) + .strokeLineCap(LineCapStyle.Butt) + .backgroundColor('#F5F5F5').margin(10) + // Set LineCapStyle to Round. + Line() + .width(100) + .height(200) + .startPoint([50, 50]) + .endPoint([50, 200]) + .strokeWidth(20) + .strokeLineCap(LineCapStyle.Round) + .backgroundColor('#F5F5F5') + // Set LineCapStyle to Square. + Line() + .width(100) + .height(200) + .startPoint([50, 50]) + .endPoint([50, 200]) + .strokeWidth(20) + .strokeLineCap(LineCapStyle.Square) + .backgroundColor('#F5F5F5') + } + } +} +``` + +![en-us_image1_0000001219982725](figures/en-us_image1_0000001219982725.png) + +### Example 3 + ```ts // xxx.ets @Entry @@ -59,12 +148,38 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the struct LineExample { build() { Column() { - Line().startPoint([0, 0]).endPoint([50, 100]) - Line({ width: 50, height: 50 }).startPoint([0, 0]).endPoint([100, 100]) - Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) - }.margin({ top: 5 }) + Line() + .startPoint([50, 30]) + .endPoint([300, 30]) + .strokeWidth(10) + // Set the interval for strokeDashArray to 50. + Line() + .startPoint([50, 20]) + .endPoint([300, 20]) + .strokeWidth(10) + .strokeDashArray([50]) + // Set the interval for strokeDashArray to 50, 10. + Line() + .startPoint([50, 20]) + .endPoint([300, 20]) + .strokeWidth(10) + .strokeDashArray([50, 10]) + // Set the interval for strokeDashArray to 50, 10, 20. + Line() + .startPoint([50, 20]) + .endPoint([300, 20]) + .strokeWidth(10) + .strokeDashArray([50, 10, 20]) + // Set the interval for strokeDashArray to 50, 10, 20, 30. + Line() + .startPoint([50, 20]) + .endPoint([300, 20]) + .strokeWidth(10) + .strokeDashArray([50, 10, 20, 30]) + + } } } ``` -![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg) +![en-us_image2_0000001219982725](figures/en-us_image2_0000001219982725.PNG) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md index df5bc74f017aedfc698e85fd88f9e39f00bcb29d..cc922d6c409bab21c9201c3cf8687c3420a4134e 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -27,24 +27,24 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory | Description | -| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- | -| commands | string | '' | No | Command for drawing the path. The unit is px. For details about how to convert the pixel units, see [Pixel Unit Conversion](../../ui/ts-pixel-units.md).| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the stroke.| -| strokeWidth | Length | 1 | No| Width of the stroke.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| +| Name | Type | Default Value | Description | +| -------- | ----------------------------------- | ---- | ---------------------------------------- | +| commands | string | '' | Command for drawing the path. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Width of the stroke.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| The supported commands are as follows: -| Command | Attribute | Parameter | Description | +| Command | Name | Parameter | Description | | ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- | | M | moveto | (x y) | Starts a new subpath at the point specified by the given (x, y) coordinates. For example, `M 0 0` starts a new subpath at point (0, 0).| | L | lineto | (x y) | Draws a line from the current point to the point specified by the given (x, y) coordinates. The specified point becomes the start point of the new subpath. For example, `L 50 50` draws a line from the current point to point (50, 50), which is the start point of the new subpath.| @@ -52,12 +52,12 @@ The supported commands are as follows: | V | vertical lineto | y | Draws a vertical line from the current point. This command is equivalent to the **L** command where the x-coordinate is 0. For example, `V 50 ` draws a line from the current point to point (0, 50), which is the start point of the new subpath.| | C | curveto | (x1 y1 x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point of the curve start point and (x2, y2) as the control point of the curve end point. For example, `C100 100 250 100 250 200 ` draws a cubic Bezier curve from the current point to point (250, 200), which is the start point of the new subpath.| | S | smooth curveto | (x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x2, y2) as the control point of the curve end point. If the previous command is **C** or **S**, the control point of the curve start point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `C100 100 250 100 250 200 S400 300 400 200`, the second segment of the cubic Bezier curve uses point (250, 300) as the control point of the curve start point. If there is no previous command or the previous command is not **C** or **S**, the control point of the curve start point coincides with the current point.| -| Q | quadratic Belzier curve | (x1 y1 x y) | Use (x1, y1) as the control point to draw a quadratic Bessel curve from the current point to (x, y). For example, Q400 50 600 300 indicates that a quadratic Bessel curve from the current point to the (600, 300) point is drawn, and the (600, 300) point is used as the starting point of the new subpath.| -| T | smooth quadratic Belzier curveto | (x y) | Draw a quadratic Bessel curve from the current point to (x, y). If the previous command is Q or T, the control point is the mapping of the end point control point of the previous command relative to the start point. For example, a control point of the second Bessel curve segment of the Q400 50 600 300 T1000 300 is (800, 350). If there is no previous command or the previous command is not Q or T, the first control point coincides with the current point.| -| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to (x, y). The size and direction of an ellipse are defined by two radiuses (rx, ry) and x-axis-rotation, indicating how the entire ellipse rotates relative to the current coordinate system (in degrees). large-arc-flag and sweep-flag determine an arc drawing manner.| +| Q | quadratic Belzier curve | (x1 y1 x y) | Draws a quadratic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point. For example, `Q400 50 600 300` draws a quadratic Bezier curve from the current point to point (600, 300), which is the start point of the new subpath.| +| T | smooth quadratic Belzier curveto | (x y) | Draws a quadratic Bezier curve from the current point to the point specified by the given (x, y) coordinates. If the previous command is **Q** or **T**, the control point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `Q400 50 600 300 T1000 300`, the second segment of the quadratic Bezier curve uses point (800, 350) as the control point. If there is no previous command or the previous command is not **Q** or **T**, the control point of the curve start point coincides with the current point.| +| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to the point specified by the given (x, y) coordinates. **(rx, ry)** and **x-axis-rotation** define the size and direction of the arc, indicating how the arc rotates relative to the current coordinate system (in degrees). **large-arc-flag** and **sweep-flag** define how the arc is drawn.| | Z | closepath | none | Closes the current subpath by connecting the current path back to the initial point of the current subpath. | -For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts from position (0, 20), draws a straight line from point (0, 20) to point (50, 50), draws a straight line from point (50, 50) to point (50, 100), and draws a closed path from point (50, 100) to point (0, 20) to form a closed triangle. +For example, **commands('M0 20 L50 50 L50 100 Z')** defines a triangle that starts from position (0, 20), by drawing a line from point (0, 20) to point (50, 50), then a line from point (50, 50) to point (50, 100), and finally a line from point (50, 100) to point (0, 20). ## Example @@ -67,24 +67,75 @@ For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts f @Component struct PathExample { build() { - Column({ space: 5 }) { - Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') - // Draw a straight line with a length of 900px and a width of 3vp. - Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3) - - Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%') - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') - Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') - Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + Column({ space: 10 }) { + Text('Straight line') + .fontSize(11) + .fontColor(0xCCCCCC) + .width('90%') + // Draw a straight line whose length is 900 px and width is 3 vp. + Path() + .width(300) + .height(10) + .commands('M0 0 L900 0') + .stroke(Color.Black) + .strokeWidth(3) + + Text('Straight line graph') + .fontSize(11) + .fontColor(0xCCCCCC) + .width('90%') + // Draw a straight line. + Row({ space: 20 }) { + Path() + .width(100) + .height(100) + .commands('M150 0 L300 300 L0 300 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M0 0 H300 V300 H0 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) }.width('100%') - Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%') - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") - Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%') + // Draw an arc. + Row({ space: 20 }) { + Path() + .width(100) + .height(100) + .commands("M0 300 S150 0 300 300 Z") + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M0 200 A30 20 20 0 0 250 200 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) } - }.width('100%').margin({ top: 5 }) + }.width('100%') + .margin({ top: 5 }) } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index 15b4da37a04970d3cbfcdce429ede77ec46291b8..113a7cfe6b90415406af3f0d8820309f6d598986 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -17,6 +17,7 @@ Not supported Polygon(value?: {width?: string | number, height?: string | number}) **Parameters** + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | width | string \| number | No| 0 | Width.| @@ -27,20 +28,20 @@ Polygon(value?: {width?: string | number, height?: string | number}) In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | No| Vertex coordinates of the polygon.| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | Length | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | Vertex coordinates of the polygon.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| +| strokeDashArray | Array<Length> | [] | Stroke dashes. | +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| ## Point @@ -59,18 +60,25 @@ Describes the coordinates of a point. @Component struct PolygonExample { build() { - Column({ space: 5 }) { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100). - Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]]) - // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100). - Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]]) - // Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100). - Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) - }.width('100%') - }.margin({ top: 5 }) + Column({ space: 10 }) { + // Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100). + Polygon({ width: 100, height: 100 }) + .points([[0, 0], [50, 100], [100, 0]]) + .fill(Color.Green) + // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100). + Polygon().width(100).height(100) + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + // Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100). + Polygon().width(100).height(100) + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + }.width('100%').margin({ top: 10 }) } } ``` -![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.gif) +![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.png) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index 8475647b5707a180dba18377ee45ae41796b9a69..a3aaa5a37edd67bc28474046bd9dc436dad3e514 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -17,6 +17,7 @@ Not supported Polyline(value?: {width?: string | number, height?: string | number}) **Parameters** + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | width | string \| number | No| 0 | Width.| @@ -27,20 +28,20 @@ Polyline(value?: {width?: string | number, height?: string | number}) In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | No| List of coordinates that the polyline passes through.| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | Length | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | List of coordinates that the polyline passes through.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| ## Point @@ -58,16 +59,28 @@ Describes the coordinates of a point. @Component struct PolylineExample { build() { - Column({ space: 5 }) { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (20,60). - Polyline({ width: 100, height: 100 }).points([[0, 0], [20, 60], [100, 100]]) - // Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (0,100). - Polyline().width(100).height(100).points([[0, 0], [0, 100], [100, 100]]) - }.width('100%') - }.margin({ top: 5 }) + Column({ space: 10 }) { + // Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (20,60). + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + // Draw a polyline in a 100 x 100 rectangle. The start point is (20, 0), the end point is (100, 90), and the passing point is (0,100). + Polyline() + .width(100) + .height(100) + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(8) + .points([[20, 0], [0, 100], [100, 90]]) + // Set the join style of the stroke to a round corner. + .strokeLineJoin(LineJoinStyle.Round) + // Set the cap style of the stroke to a half circle. + .strokeLineCap(LineCapStyle.Round) + }.width('100%') } } ``` -![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif) +![en-us_image_0000001219744185](figures/en-us_image_0000001219744185.png) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index bb9a06be8dfc2d71663807a7fc9f9cb2cf3529bf..f4b1c4679e83e9cc6eb68910308414482abb7b07 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -32,22 +32,22 @@ Rect(value?: {width?: string | number,height?: string | number,radius?: string | In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| radiusWidth | string \| number | 0 | No| Width of the rounded corner. The width and height are the same when only the width is set.| -| radiusHeight | string \| number | 0 | No| Height of the rounded corner. The width and height are the same only when the height is set.| -| radius | string \| number \| Array<string \| number> | 0 | No| Radius of the rounded corner. You can set separate radiuses for four rounded corners.| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dash.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | Length | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.| +| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.| +| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| +| strokeDashArray | Array<Length> | [] | Stroke dashes. | +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| +| strokeWidth | Length | 1 | Stroke width.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| ## Example @@ -58,21 +58,40 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the @Component struct RectExample { build() { - Column({ space: 5 }) { - Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') - // Draw a 90% x 50 rectangle. - Rect({ width: '90%', height: 50 }) + Column({ space: 10 }) { + Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%') // Draw a 90% x 50 rectangle. - Rect().width('90%').height(50) - - Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%') - // Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. - Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20) - // Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. - Rect({ width: '90%', height: 50 }).radius(20) + Column({ space: 5 }) { + Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') + // Draw a 90% x 50 rectangle. + Rect({ width: '90%', height: 50 }) + .fill(Color.Pink) + // Draw a 90% x 50 rectangle. + Rect() + .width('90%') + .height(50) + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + + Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%') + // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively. + Rect({ width: '90%', height: 80 }) + .radiusHeight(20) + .radiusWidth(40) + .fill(Color.Pink) + // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20. + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + }.width('100%').margin({ top: 10 }) + // Draw a 90% x 50 rectangle, with the width and height of its rounded corners as follows: 40 for the upper left rounded corner, 20 for the upper right rounded corner, 40 for the lower right rounded corner, and 20 for the lower left rounded corner. + Rect({ width: '90%', height: 80 }) + .radius([[40, 40], [20, 20], [40, 40], [20, 20]]) + .fill(Color.Pink) }.width('100%').margin({ top: 5 }) } } ``` -![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png) +![en-us_image_0000001174264386](figures/en-us_image_0000001174264386.png) diff --git a/en/application-dev/reference/arkui-ts/ts-pixel-units.md b/en/application-dev/reference/arkui-ts/ts-pixel-units.md new file mode 100644 index 0000000000000000000000000000000000000000..d595399e83fcac8822074b80a201e5855cf3f769 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-pixel-units.md @@ -0,0 +1,74 @@ +# Pixel Units + +The framework provides four pixel units, with vp as the reference data unit. + + +| Name| Description | +| ---- | ------------------------------------------------------------ | +| px | Physical pixel unit of the screen. | +| vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.| +| fp | Font pixel, which is similar to vp and varies according to the system font size.| +| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **[designWidth](../../quick-start/package-structure.md)**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.| + + +## Pixel Unit Conversion + +Conversion between px and other pixel units is supported. + +| API | Description | +| ---------------------------------------- | ---------------------- | +| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | +| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | +| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | +| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | +| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.| +| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.| + + +## Example + +```ts +// xxx.ets +@Entry +@Component +struct Example { + build() { + Column() { + Flex({ wrap: FlexWrap.Wrap }) { + Column() { + Text("width(220)") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220px')") + .width('220px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + }.margin(5) + Column() { + Text("width('220vp')") + .width('220vp').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220lpx') designWidth:720") + .width('220lpx').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width(vp2px(220) + 'px')") + .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("fontSize('12fp')") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') + }.margin(5) + }.width('100%') + } + } +} +``` + +![en-us_image_0000001169582302](figures/en-us_image_0000001169582302.png) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index cf0fffeda5bcc15eb4021782ef580fe284beecf3..5387323038344bdea0670d857178ad6ae4175ac5 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -13,11 +13,11 @@ The border attributes are used to set border styles for components. | Name | Type | Description | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| border | {
width?: [Length](ts-types.md#length) \| EdgeWidths9+,
color?: [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors9+,
radius?: [Length](ts-types.md#length) \| BorderRadiuses9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles9+
} | Unified border style.
- **width**: border width.
- **color**: border color.
- **radius**: radius of the rounded corner of the border.
- **style**: border style.| -| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles9+ | Border style of an element.
Default value: **BorderStyle.Solid** | -| borderWidth | [Length](ts-types.md#length) \| EdgeWidths9+ | Border width. The percentage format is not supported. | -| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors9+ | Border color of an element. | -| borderRadius | [Length](ts-types.md#length) \| BorderRadiuses9+ | Border radius. The percentage format is not supported. | +| border | {
width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+,
color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+,
radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+
} | Unified border style.
- **width**: border width.
- **color**: border color.
- **radius**: radius of the rounded corner of the border.
- **style**: border style.| +| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+ | Border style.
Default value: **BorderStyle.Solid** | +| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)9+ | Border width. The percentage format is not supported. | +| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)9+ | Border color.
Default value: **Color.Black** | +| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)9+ | Border radius. The percentage format is not supported. | ## EdgeWidths9+ @@ -70,19 +70,19 @@ To reference this object, at least one parameter must be passed. @Entry @Component struct BorderExample { - build() { Column() { Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { // Dashed border Text('dashed') - .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) + .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) // Dotted border Text('dotted') .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) }.width('100%').height(150) + Text('.border') .fontSize(50) .width(300) @@ -92,12 +92,12 @@ struct BorderExample { color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, style: { - left: BorderStyle.Dotted, - right: BorderStyle.Dotted, - top: BorderStyle.Solid, - bottom: BorderStyle.Dashed + left: BorderStyle.Dotted, + right: BorderStyle.Dotted, + top: BorderStyle.Solid, + bottom: BorderStyle.Dashed } - }).textAlign(TextAlign.Center) + }).textAlign(TextAlign.Center) } } } diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index 9b36249f0a6e49598b50d0e3e2333ab9c3882bc3..f1cb514bdf1643497721297fb69d5791b791c988 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -126,19 +126,19 @@ Sends a mouse event. ```ts // xxx.ets class Utils { - static rect_left; - static rect_top; - static rect_right; - static rect_bottom; - static rect_value; + static rect_left + static rect_top + static rect_right + static rect_bottom + static rect_value // Obtain the coordinates of the rectangular area occupied by the component. static getComponentRect(key) { - let strJson = getInspectorByKey(key); - let obj = JSON.parse(strJson); - console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj)); + let strJson = getInspectorByKey(key) + let obj = JSON.parse(strJson) + console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj)) let rectInfo = JSON.parse('[' + obj.$rect + ']') - console.info("[getInspectorByKey] rectInfo is: " + rectInfo); + console.info("[getInspectorByKey] rectInfo is: " + rectInfo) this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0] this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1] this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0] @@ -229,7 +229,11 @@ struct IdExample { } } }, - source: SourceType.Mouse + source: SourceType.Mouse, + pressure: 1, + tiltX: 1, + tiltY: 1, + sourceTool: SourceTool.Unknown } sendMouseEvent(mouseEvent) // Send a mouse event. }, 2000) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index a05add4dc6b8d26ed66939ffba38f4cd0530c0db..a8db3e77829f493a331e570449b80cedce5eb2b2 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -4,22 +4,17 @@ Create a more gorgeous look for a component by applying a gradient color effect > **NOTE** > -> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -## Required Permissions - -None +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Attributes -| Name| Type| Default Value| Description| -| -------- | -------- | -------- | -------- | -| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | Linear gradient.
**angle**: angle of the linear gradient.
**direction**: direction of the linear gradient. It does not take effect when **angle** is set.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated.| -| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | Angle gradient.
**center**: center point of the angle gradient.
**start**: start point of the angle gradient.
**end**: end point of the angle gradient.
**rotation**: rotation angle of the angle gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated.| -| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | Radial gradient.
**center**: center point of the radial gradient.
**radius**: radius of the radial gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated.| +| Name | Type | Description | +| -------------- | -------------------------------------------- | ----------------------------------- | +| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| +| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Angle gradient.
- **center**: center point of the angle gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the angle gradient.
Default value: **0**
- **end**: end point of the angle gradient.
Default value: **0**
- **rotation**: rotation angle of the angle gradient.
Default value: **0**
- **colors**: colors of the angle gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| +| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**| ## Example @@ -29,7 +24,6 @@ None @Entry @Component struct ColorGradientExample { - build() { Column({ space: 5 }) { Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) @@ -38,8 +32,32 @@ struct ColorGradientExample { .height(50) .linearGradient({ angle: 90, - colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] }) + Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width('90%') + .height(50) + .linearGradient({ + direction: GradientDirection.Left, // Gradient direction. + repeating: true, // Whether the gradient colors are repeated. + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1. + }) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![en-us_image_0000001219864149](figures/gradientColor1.png) + +```ts +@Entry +@Component +struct ColorGradientExample { + build() { + Column({ space: 5 }) { Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) Row() .width(100) @@ -48,8 +66,37 @@ struct ColorGradientExample { center: [50, 50], start: 0, end: 359, - colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] + }) + + Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .sweepGradient({ + center: [50, 50], + start: 0, + end: 359, + rotation: 45, // Rotation angle. + repeating: true, // Whether the gradient colors are repeated. + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1. }) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![en-us_image_0000001219864149](figures/gradientColor2.png) + +```ts +// xxx.ets +@Entry +@Component +struct ColorGradientExample { + build() { + Column({ space: 5 }) { Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) Row() .width(100) @@ -57,7 +104,17 @@ struct ColorGradientExample { .radialGradient({ center: [50, 50], radius: 60, - colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] + }) + Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .radialGradient({ + center: [50, 50], + radius: 60, + repeating: true, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1. }) } .width('100%') @@ -66,4 +123,4 @@ struct ColorGradientExample { } ``` -![en-us_image_0000001212218484](figures/en-us_image_0000001212218484.png) +![en-us_image_0000001219864149](figures/gradientColor3.png) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md index 1803f47bcad428f04154ac75a22800fac7a3f895..b2e6cbe5494ef88e663d8e09e04832c462354f18 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md @@ -1,8 +1,9 @@ # Hit Test Control -Hit test control allows you to configure hit testing for components. When processing a touch event, ArkUI performs hit testing on the touch points and component area before the touch event is triggered, in order to determine the component that needs to respond to the touch event, and then distributes the touch event based on the hit test result. The **hitTestBehavior** attribute sets the behavior during hit testing. The settings will affect the hit test result of the component and thereby the subsequent touch event distribution. For details, see **HitTestMode**. +Hit test control allows you to configure hit testing for components. When processing a touch event, ArkUI performs hit testing on the touch points and component area before the touch event is triggered, in order to determine the component that needs to respond to the touch event, and then distributes the touch event based on the hit test result. The **hitTestBehavior** attribute sets how the component behaves during hit testing. The settings will affect the hit test result and thereby the subsequent touch event distribution. For details, see **[HitTestMode](#hittestmode)**. > **NOTE** +> > - The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. > - When the touch areas of nodes, for example, two nodes, in the **\** component overlap, hit testing is performed only on the node displayed at the top layer by default. To perform hit testing on the node at the lower layer, set **hitTestBehavior** to **HitTestMode.Transparent** for the upper-layer node. @@ -11,7 +12,7 @@ Hit test control allows you to configure hit testing for components. When proces | Name | Type | Description | | -------------------- | -------- | ---------------------------------------- | -| hitTestBehavior | HitTestMode | How the component behaves during hit testing.
Default value: **HitTestMode.Default**| +| hitTestBehavior | [HitTestMode](#hittestmode) | How the component behaves during hit testing.
Default value: **HitTestMode.Default**| ## HitTestMode