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_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_0000001212058492.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058492.png deleted file mode 100644 index b7c6998d7f55a75562fbf709aa84b4bd12922ae6..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058492.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_0000001212218458.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218458.gif deleted file mode 100644 index 78e7436bf654889a3a04e9d2e5dd53f5fb562906..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218458.gif 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/en-us_image_0000001257058393.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058393.png deleted file mode 100644 index e766d36181c3d1fbd96bb0acab1b3eb670e14cd4..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058393.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md index 4ccc7889444ed6de73832fa7e91616f718eab2b0..ed40622ef961bcb5f9368f462f7ebe4db3791a07 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -1,61 +1,55 @@ # Navigator +The **\** component provides redirection. > **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component provides redirection to the target page. - - -## Required Permissions - -None - - ## Child Components -This component can contain child components. +Supported ## APIs Navigator(value?: {target: string, type?: NavigationType}) -Creates a navigator. +**Parameters** + +| Name| Type | Mandatory| Description | +| ------ | -------------- | ---- | ---------------------------------------------- | +| target | string | Yes | Path of the target page to be redirected to. | +| type | [NavigationType](#navigationtype) | No | Navigation type.
Default value: **NavigationType.Push**| -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | target | string | Yes | - | Path of the target page to be redirected to. | - | type | NavigationType | No | NavigationType.Push | Navigation type. | +## NavigationType -- NavigationType enums - | Name | Description | - | -------- | -------- | - | Push | Navigates to a specified page in the application. | - | Replace | Replaces the current page with another one in the application and destroys the current page. | - | Back | Returns to the previous page or a specified page. | +| Name | Description | +| ------- | -------------------------- | +| Push | Navigates to a specified page in the application. | +| Replace | Replaces the current page with another one in the application and destroys the current page.| +| Back | Returns to the previous page or a specified page. | ## Attributes -| Name | Parameters | Default Value | Description | -| -------- | -------- | -------- | -------- | -| active | boolean | - | Whether the **\** component is activated. If the component is activated, the corresponding navigation takes effect. | -| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. | +| Name | Parameter | Description | +| ------ | ------- | ------------------------------------------------------------ | +| active | boolean | Whether the **\** component is activated. If the component is activated, the corresponding navigation takes effect.| +| params | object | Data that needs to be passed to the target page during redirection. You can use [router.getParams()](../apis/js-apis-router.md#routergetparams) to obtain the data on the target page.| +| target | string | Path of the target page to be redirected to. The target page must be added to the **main_pages.json** file. | +| type | [NavigationType](#navigationtype) | Navigation type.
Default value: **NavigationType.Push**| ## Example - ```ts // Navigator.ets @Entry @Component struct NavigatorExample { - @State active: boolean = false + @State active: boolean = false; @State Text: object = {name: 'news'} build() { @@ -63,28 +57,28 @@ struct NavigatorExample { Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { Text('Go to ' + this.Text['name'] + ' page') .width('100%').textAlign(TextAlign.Center) - }.params({ text: this.Text }) + }.params({ text: this.Text }) // Transfer parameters to the Detail page. Navigator() { Text('Back to previous page').width('100%').textAlign(TextAlign.Center) }.active(this.active) .onClick(() => { - this.active = true + this.active = true; }) }.height(150).width(350).padding(35) } } ``` - ```ts // Detail.ets -import router from '@system.router' +import router from '@ohos.router' @Entry @Component struct DetailExample { - @State text: any = router.getParams().text + // Receive the input parameters of Navigator.ets. + @State text: any = router.getParams().text; build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 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 f1c4719e5c7ae7601cfed3833d5311766329dce7..ba03ba0d0a63193d55c077f617d9c10bc0f2aef9 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 @@ -17,28 +17,29 @@ 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.| + +| 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#resourcecolor8) | 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#resourcecolor8) | 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#resourcecolor8) | 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#resourcecolor8) | 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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Default value: **4**
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| +| 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 @@ -65,4 +66,4 @@ struct CircleExample { } ``` -![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 8dc038f4cd1244eac9597a8895d34a83e5335e65..b4560f92d669fa6ea8100369aee6cd96efbc48c7 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 @@ -1,63 +1,68 @@ # Ellipse +The **\** component is used to draw an ellipse. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<Ellipse>** component is used to draw an ellipse. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -ellipse(options?: {width: Length, height: Length}) - -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | For details, see the **options** parameters. | +ellipse(options?: {width?: string | number, height?: string | number}) -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width. | - | height | Length | Yes | - | Height. | +**Parameters** +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| width | string \| number | No| Width.
Default value: **0**| +| height | string \| number | No| Height.
Default value: **0**| ## Attributes - | Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the ellipse is located. | -| height | Length | 0 | No | Height of the rectangle where the ellipse is located. | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | - |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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| +| 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 - -``` +```ts +// xxx.ets @Entry @Component struct EllipseExample { build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // Draw an ellipse in a 150 x 70 rectangle. + Column({ space: 10 }) { + // Draw a 150 x 80 ellipse. Ellipse({ width: 150, height: 80 }) - // Draw an ellipse in a 150 x 70 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 6bc655a5407bb61b277f2a36006c9f495538d301..0fb0312af67e52f306d119fafc2bb1ab202d0171 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 @@ -1,63 +1,179 @@ # Line +The **\** component is used to draw a straight line. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +## Child Components -The **<Line>** component is used to draw a straight line. +Not supported -## Required Permissions +## APIs -None +Line(options?: {width?: string | number, height?: string | number}) +**Parameters** -## Child Components +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | No| 0 | Width.| +| height | string \| number | No| 0 | Height.| -None +## Attributes -## APIs +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| 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#resourcecolor8) | 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#resourcecolor8) | 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.| -Line(options?: {width: Length, height: Length}) +## Example -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | For details, see the **options** parameters. | +### Example 1 -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width. | - | height | Length | Yes | - | Height. | +```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) -## Attributes +### Example 2 - | Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the straight line is located. | -| height | Length | 0 | No | Height of the rectangle where the straight line is located. | -| startPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the start point of the straight line. | -| endPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the end point of the straight line. | +```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 +### Example 3 - -``` +```ts +// xxx.ets @Entry @Component struct LineExample { build() { Column() { - Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 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 35c33284a4fd083b244dc0ef05e6a5df0480c72c..df371042ca151f28c84f179b9ddf208a6b7adfa1 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 @@ -1,104 +1,143 @@ # Path +The **** component is used to define a closed shape. > **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component is used to draw a path. - - -## Required Permissions - -None - - ## Child Components Not supported ## APIs -Path(value?: { width?: number | string, height?: number | string, commands?: string }) - -- Parameters +Path(value?: { width?: number | string; height?: number | string; commands?: string }) - | me | Type | Mandatory | Default Value | Description | - | -------- | ---------------- | --------- | ------------- | -------------------------------------------------- | - | width | number \| string | No | 0 | Width of the rectangle where the path is located. | - | height | number \| string | No | 0 | Height of the rectangle where the path is located. | - | commands | string | No | '' | Command string for drawing the path. | +**Parameters** +| Name | Type | Mandatory| Description | +| -------- | ---------------- | ---- | ----------------------------------- | +| width | number \| string | No | Width of the rectangle where the path is located.
Default value: **0** | +| height | number \| string | No | Height of the rectangle where the path is located.
Default value: **0** | +| commands | string | No | Command for drawing the path.
Default value: **''**| ## Attributes -| Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | number \| string | 0 | No | Width of the rectangle where the path is located. | -| height | number \| string | 0 | No | Height of the rectangle where the path is located. | -| commands | string | '' | No | Command string for drawing the path. | - +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| 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](../../ui/ts-pixel-units.md). | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | - | 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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.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: - -- M = moveto - -- L = lineto - -- H = horizontal lineto - -- V = vertical lineto - -- C = curveto - -- S = smooth curveto - -- Q = quadratic Belzier curve - -- T = smooth quadratic Belzier curveto - -- A = elliptical Arc - -- Z = closepath - - -For example, the command **M0 20 L50 50 L50 100 Z** defines a path that starts from (0, 20), reaches (50, 50) and then (50, 100), and ends at (0, 20). - +| 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.| +| H | horizontal lineto | x | Draws a horizontal line from the current point. This command is equivalent to the **L** command where the y-coordinate is 0. For example, `H 50 ` draws a line from the current point to point (50, 0), which is the start point of the new subpath.| +| 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) | 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), 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 - -``` +```ts +// xxx.ets @Entry @Component struct PathExample { build() { - Column({ space: 5 }) { - Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') - 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 }) { - // Run MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), and ClosePath() in sequence. - Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') - // Run MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), and ClosePath() in sequence. - Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') - // Run MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), and ClosePath() in sequence. - 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 }) { - / / Run MoveTo(0, 300), draw a curve between (150, 0) and (300, 300), and then run ClosePath(). - Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") - / / Run MoveTo(0, 150), draw a curve among (0, 150), (150, 0), and (300, 150), and then run ClosePath(). - 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 }) } } ``` -![en-us_image_0000001212058492](figures/en-us_image_0000001212058492.png) +![en-us_image_0000001219744193](figures/en-us_image_0000001219744193.png) 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 65d26dc9d1388cac2d8eddb4da24b420fec9d2e3..24e1c8dad7ca109cb93becd4879c681ff838c78b 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 @@ -1,68 +1,84 @@ # Polygon +The **\** component is used to draw a polygon. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **<Polygon>** component is used to draw a polygon. +## Child Components +Not supported -## Required Permissions -None +## APIs +Polygon(options?: {width?: string | number, height?: string | number}) -## Child Components - -None +**Parameters** +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | No| 0 | Width.| +| height | string \| number | No| 0 | Height.| -## APIs -Polygon(value:{options?: {width: Length, height: Length}}) +## Attributes -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | For details, see the **options** parameters. | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width. | - | height | Length | Yes | - | Height. | +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | Vertex coordinates of the polygon.| +| fill | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | - | 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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.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 -## Attributes +Describes the coordinates of a point. - | Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the polygon is located. | -| height | Length | 0 | No | Height of the rectangle where the polygon is located. | -| points | Array<Point> | - | Yes | Vertex coordinates of the polygon. | +| Name | Type | Description | +| --------- | -------------------- | ------------------------------------------------------------ | +| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| ## Example - -``` +```ts +// xxx.ets @Entry @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 point is (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_0000001212218458](figures/en-us_image_0000001212218458.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 1ffdd3cb28943e1d2f1b7a4c1a35b611af5f4d6b..41b2256a96467b4036a389f535e9e71edba0cc00 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 @@ -1,66 +1,86 @@ # Polyline +The **\** component is used to draw a polyline. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<Polyline>** component is used to draw a polyline. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -Polyline(options?: {width: Length, height: Length}) +Polyline(options?: {width?: string | number, height?: string | number}) -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | For details, see the **options** parameters. | +**Parameters** -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width. | - | height | Length | Yes | - | Height. | +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | No| 0 | Width.| +| height | string \| number | No| 0 | Height.| ## Attributes - | Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the polyline is located. | -| height | Length | 0 | No | Height of the rectangle where the polyline is located. | -| points | Array<Point> | - | Yes | List of coordinates that the polyline passes through. | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | List of coordinates that the polyline passes through.| +| fill | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | - | 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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.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 +Describes the coordinates of a point. + +| Name | Type | Description | +| --------- | -------------------- | ------------------------------------------------------------ | +| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| ## Example - -``` +```ts +// xxx.ets @Entry @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 45abfb085736f57bc08876512b9e4fabd3402328..271c289d1d2326bffb0ed5c2eeb3180f4c372eba 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 @@ -1,76 +1,97 @@ # Rect +The **\** component is used to draw a rectangle. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<Rect>** component is used to draw a rectangle. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<Length>} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}}) +Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | + {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | For details, see the **options** parameters. | +**Parameters** -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width. | - | height | Length | Yes | - | Height. | - | radius | Length \| Array<Length> | No | 0 | Radius of a rounded corner. You can set the radius of four rounded corners. | - | radiusWidth | Length | No | 0 | Width of the rounded corner. | - | radiusHeight | Length | No | 0 | Height of the rounded corner. | +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | No| 0 | Width.| +| height | string \| number | No| 0 | Height.| +| radius | string \| number \| Array<string \| number> | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| +| radiusWidth | string \| number | No| 0 | Width of the rounded corner.| +| radiusHeight | string \| number | No| 0 | Height of the rounded corner.| ## Attributes - | Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width. | -| height | Length | 0 | No | Height. | -| radiusWidth | Length | 0 | No | Width of a rounded corner. The width and height are the same when only the width is set. | -| radiusHeight | Length | 0 | No | Height of the rounded corner. The width and height are the same only when the height is set. | -| radius | Length \| Array<Length> | 0 | No | Size of the rounded corner. | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| 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#resourcecolor8) | 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#resourcecolor8) | - | 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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.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 - -``` +```ts +// xxx.ets @Entry @Component struct RectExample { build() { - Column({ space: 5 }) { - Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 10 }) { + Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%') // Draw a 90% x 50 rectangle. - Rect({ width: '90%', height: 50 }) - // 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-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index 71aaf504d360bec1e1d7b931777d2bbbca15d0d7..d49d9734254572433298a3b6af737807881837b7 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -14,7 +14,7 @@ The **\** component is the parent component of the drawing components. Th ## Child Components -This component can contain child components. +Supported ## APIs @@ -23,30 +23,30 @@ Shape(value?: PixelMap) **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| ----- | -------- | --------- | ------------- | ---------------------------------------- | -| value | PixelMap | No | - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. | +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | No| - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory | Description | -| ----------------- | ---------------------------------------- | ------------------------------- | --------- | ---------------------------------------- | -| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | No | View port of the shape. | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | 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 | number \| string | 1 | No | Stroke width. | -| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. | -| mesh8+ | Array<number>,number,number | [],0,0 | No | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix. | +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | View port of the shape.| +| fill | [ResourceColor](ts-types.md#resourcecolor8) | 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#resourcecolor8) | - | Stroke color. If this attribute is not set, no stroke is displayed.| +| 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 on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.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 | number \| string | 1 | Stroke width.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| mesh8+ | Array<number>,number,number | [],0,0 | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.| ## Example @@ -144,7 +144,7 @@ struct ShapeExample { } ``` -![en-us_image_0000001257058393](figures/en-us_image_0000001257058393.png) +![en-us_image_0000001184628104](figures/en-us_image_0000001184628104.png) ### Example 2 @@ -153,12 +153,12 @@ struct ShapeExample { @Entry @Component struct ShapeMeshExample { - @State columnVal: number = 0; - @State rowVal: number = 0; - @State count: number = 0; - @State verts: Array = []; - @State shapeWidth: number = 600; - @State shapeHeight: number = 600; + @State columnVal: number = 0 + @State rowVal: number = 0 + @State count: number = 0 + @State verts: Array = [] + @State shapeWidth: number = 600 + @State shapeHeight: number = 600 build() { Column() { @@ -187,34 +187,34 @@ struct ShapeMeshExample { .height(this.shapeHeight + 'px') // The mesh distortion effect is displayed when the component is touched. .onTouch((event: TouchEvent) => { - var touchX = event.touches[0].x * 2; - var touchY = event.touches[0].y * 2; - this.columnVal = 20; - this.rowVal = 20; - this.count = (this.columnVal + 1) * (this.rowVal + 1); - var orig = [this.count * 2]; - var index = 0; + var touchX = event.touches[0].x * 2 + var touchY = event.touches[0].y * 2 + this.columnVal = 20 + this.rowVal = 20 + this.count = (this.columnVal + 1) * (this.rowVal + 1) + var orig = [this.count * 2] + var index = 0 for (var i = 0; i <= this.rowVal; i++) { - var fy = this.shapeWidth * i / this.rowVal; + var fy = this.shapeWidth * i / this.rowVal for (var j = 0; j <= this.columnVal; j++) { - var fx = this.shapeWidth * j / this.columnVal; - orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx; - orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy; + var fx = this.shapeWidth * j / this.columnVal + orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx + orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy index++; } } for (var k = 0; k < this.count * 2; k += 2) { - var dx = touchX - orig[k + 0]; - var dy = touchY - orig[k + 1]; - var dd = dx * dx + dy * dy; - var d = Math.sqrt(dd); - var pull = 80000 / (dd * d); + var dx = touchX - orig[k + 0] + var dy = touchY - orig[k + 1] + var dd = dx * dx + dy * dy + var d = Math.sqrt(dd) + var pull = 80000 / (dd * d) if (pull >= 1) { - this.verts[k + 0] = touchX; - this.verts[k + 1] = touchY; + this.verts[k + 0] = touchX + this.verts[k + 1] = touchY } else { - this.verts[k + 0] = orig[k + 0] + dx * pull; - this.verts[k + 1] = orig[k + 1] + dy * pull; + this.verts[k + 0] = orig[k + 0] + dx * pull + this.verts[k + 1] = orig[k + 1] + dy * pull } } }) @@ -226,7 +226,7 @@ struct ShapeMeshExample { } ``` -Diagram: +Below is how the component is displayed when not being touched. ![en-us_image1_0000001184628104](figures/en-us_image1_0000001184628104.png) diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md index 4e482e26c39ad1083ee4f2053cc4224589d60a3e..8ba367c17bd1ef153b36952b49670c829ec08ce3 100644 --- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -7,56 +7,45 @@ The page transition navigates users between pages. You can customize page transi > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -| Name | Parameter | Description | -| ------------------- | ------ | ------------------------------- | -| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.| -| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.| +| Name | Parameter | Description | +| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| PageTransitionEnter | {
type: RouteType,
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) \| string,
delay: number
} | Page entrance animation.
- **type**: If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay. | +| PageTransitionExit | {
type: RouteType,
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) \| string,
delay: number
} | Page exit animation.
- **type**:If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.| +## RouteType enums -- Animation parameters - | Name | Type | Default Value | Mandatory | Description | - | -------- | ------------------------- | ------ | ---- | ---------------------------------------- | - | type | RouteType | - | No | Animation type. If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used. | - | duration | number | 1000 | No | Animation duration, in ms. | - | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).| - | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. | - - -- RouteType enums - | Name| Description | - | ---- | ---------------- | - | Pop | Redirects to a specified page. When the user is redirected from page A to page B, page A is Exit+Push, and page B is Enter+Push.| - | Push | Redirects to the next page. When the user is redirected back from page B to page A, page A is Enter+Pop, and page B is Exit+Pop.| +| Name| Description | +| ---- | ------------------------------------------------------------ | +| Pop | Redirects to a specified page. When the user is redirected from page A to page B, page A is Exit+Push, and page B is Enter+Push.| +| Push | Redirects to the next page. When the user is redirected back from page B to page A, page A is Enter+Pop, and page B is Exit+Pop.| +| None | The page is not redirected. | ## Attributes -The **PageTransitionEnter** and **PageTransitionExit** parameters support the following attributes: +| Name | Type | Mandatory| Description | +| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| slide | SlideEffect | No | Slide effect during page transition.
Default value: **SlideEffect.Right**| +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.
- **x**: translation distance along the x-axis.
- **y**: translation distance along the y-axis.
- **z**: translation distance along the y-axis.| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.
- **x**: scale ratio along the x-axis.
- **y**: scale ratio along the y-axis.
- **z**: scale ratio along the z-axis.
- **centerX** and **centerY**: scale center point.
- If the center point is 0, it refers to the upper left corner of the component.
| +| opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.
Default value: **1**| -| Name | Type | Default Value | Mandatory | Description | -| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- | -| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. | -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. | -| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. | +## SlideEffect -- SlideEffect enums - | Name | Description | - | ------ | ------------------------- | - | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.| - | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.| - | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.| - | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.| +| Name | Description | +| ------ | ------------------------- | +| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.| +| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.| +| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.| +| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.| ## Events -The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events: - -| Name | Description | -| ---------------------------------------- | ----------------------------------- | -| onEnter(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.| -| onExit(type: RouteType, progress: number) => void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.| +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onEnter(event: (type?: RouteType, progress?: number) => void) | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress.| +| onExit(event: (type?: RouteType, progress?: number) => void) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress.| ## Example