Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 6b5b4774 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (11508) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 a7a7c882
显示空白变更内容
内联 并排
Showing with 589 addition and 388 deletion
en/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 6b5b4774
# Navigator # Navigator
The **\<Navigator>** component provides redirection.
> **NOTE** > **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.
The **\<Navigator>** component provides redirection to the target page.
## Required Permissions
None
## Child Components ## Child Components
This component can contain child components. Supported
## APIs ## APIs
Navigator(value?: {target: string, type?: NavigationType}) 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.<br>Default value: **NavigationType.Push**|
- Parameters ## NavigationType
| 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 enums | Name | Description |
| Name | Description | | ------- | -------------------------- |
| -------- | -------- | | Push | Navigates to a specified page in the application. |
| 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.|
| 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. |
| Back | Returns to the previous page or a specified page. |
## Attributes ## Attributes
| Name | Parameters | Default Value | Description | | Name | Parameter | Description |
| -------- | -------- | -------- | -------- | | ------ | ------- | ------------------------------------------------------------ |
| active | boolean | - | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. | | active | boolean | Whether the **\<Navigator>** 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. | | 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.<br>Default value: **NavigationType.Push**|
## Example ## Example
```ts ```ts
// Navigator.ets // Navigator.ets
@Entry @Entry
@Component @Component
struct NavigatorExample { struct NavigatorExample {
@State active: boolean = false @State active: boolean = false;
@State Text: object = {name: 'news'} @State Text: object = {name: 'news'}
build() { build() {
...@@ -63,28 +57,28 @@ struct NavigatorExample { ...@@ -63,28 +57,28 @@ struct NavigatorExample {
Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
Text('Go to ' + this.Text['name'] + ' page') Text('Go to ' + this.Text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center) .width('100%').textAlign(TextAlign.Center)
}.params({ text: this.Text }) }.params({ text: this.Text }) // Transfer parameters to the Detail page.
Navigator() { Navigator() {
Text('Back to previous page').width('100%').textAlign(TextAlign.Center) Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
}.active(this.active) }.active(this.active)
.onClick(() => { .onClick(() => {
this.active = true this.active = true;
}) })
}.height(150).width(350).padding(35) }.height(150).width(350).padding(35)
} }
} }
``` ```
```ts ```ts
// Detail.ets // Detail.ets
import router from '@system.router' import router from '@ohos.router'
@Entry @Entry
@Component @Component
struct DetailExample { struct DetailExample {
@State text: any = router.getParams().text // Receive the input parameters of Navigator.ets.
@State text: any = router.getParams().text;
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
......
en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 6b5b4774
...@@ -17,28 +17,29 @@ Not supported ...@@ -17,28 +17,29 @@ Not supported
Circle(options?: {width?: string | number, height?: string | number}) Circle(options?: {width?: string | number, height?: string | number})
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory| Description|
| width | string \| number | No| 0 | Width of the circle.| | -------- | -------- | -------- | -------- |
| height | string \| number | No| 0 | Height of the circle.| | width | string \| number | No| Width of the circle.<br>Default value: **0**|
| height | string \| number | No| Height of the circle.<br>Default value: **0**|
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description| | Name| Type| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No| Color of the fill area.| | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color of the fill area.<br>Default value: **Color.Black**|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.<br>Default value: **1**|
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No| Stroke color.| | stroke | [ResourceColor](ts-types.md#resourcecolor8) | Stroke color. If this attribute is not set, the component does not have any stroke.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | Stroke dashes.<br>Default value: **[]** |
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.<br>Default value: **0**|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| | strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>**NOTE**<br>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 | No| Stroke width.| | strokeWidth | Length | Stroke width.<br>Default value: **1**|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| | antiAlias | boolean | Whether anti-aliasing is enabled.<br>Default value: **true**|
## Example ## Example
...@@ -65,4 +66,4 @@ struct CircleExample { ...@@ -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)
en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 6b5b4774
# Ellipse # Ellipse
The **\<Ellipse>** component is used to draw an ellipse.
> ![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. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Ellipse&gt;** component is used to draw an ellipse.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
ellipse(options?: {width: Length, height: Length}) ellipse(options?: {width?: string | number, height?: string | number})
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| width | Length | Yes | - | Width. |
| height | Length | Yes | - | Height. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| width | string \| number | No| Width.<br>Default value: **0**|
| height | string \| number | No| Height.<br>Default value: **0**|
## Attributes ## Attributes
| Name | Type | Default Value | Mandatory | Description | In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| -------- | -------- | -------- | -------- | -------- |
| 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. |
| 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&lt;Length&gt; | [] | 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.<br>**NOTE**<br>This attribute does not take effect for the **\<Ellipse>** component, because it does not have a miter join.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct EllipseExample { struct EllipseExample {
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Column({ space: 10 }) {
// Draw an ellipse in a 150 x 70 rectangle. // Draw a 150 x 80 ellipse.
Ellipse({ width: 150, height: 80 }) Ellipse({ width: 150, height: 80 })
// Draw an ellipse in a 150 x 70 rectangle. // Draw a 150 x 100 ellipse with blue strokes.
Ellipse().width(150).height(80) Ellipse()
}.width('100%').margin({ top: 5 }) .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)
en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 6b5b4774
# Line # Line
The **\<Line>** 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. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
The **&lt;Line&gt;** component is used to draw a straight line. Not supported
## Required Permissions
None ## APIs
Line(options?: {width?: string | number, height?: string | number})
## Child Components **Parameters**
None | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width.|
| height | string \| number | No| 0 | Height.|
## APIs ## Attributes
Line(options?: {width: Length, height: Length}) In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| startPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.|
| endPoint | Array&lt;Length&gt; | [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.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.|
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | 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.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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.|
- Parameters ## Example
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters ### Example 1
| 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 <Line> 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 <Line> 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')
}
}
}
```
## Attributes ![en-us_image_0000001219982725](figures/en-us_image_0000001219982725.png)
| Name | Type | Default Value | Mandatory | Description | ### Example 2
| -------- | -------- | -------- | -------- | -------- |
| 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')
}
}
}
```
## Example ![en-us_image1_0000001219982725](figures/en-us_image1_0000001219982725.png)
### Example 3
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineExample { struct LineExample {
build() { build() {
Column() { Column() {
Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100]) Line()
Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) .startPoint([50, 30])
}.margin({ top: 5 }) .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)
en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 6b5b4774
# Path # Path
The **<Path\>** component is used to define a closed shape.
> **NOTE** > **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.
The **\<Path>** component is used to draw a path.
## Required Permissions
None
## Child Components ## Child Components
Not supported Not supported
## APIs ## APIs
Path(value?: { width?: number | string, height?: number | string, commands?: string }) Path(value?: { width?: number | string; height?: number | string; commands?: string })
- Parameters
| me | Type | Mandatory | Default Value | Description | **Parameters**
| -------- | ---------------- | --------- | ------------- | -------------------------------------------------- |
| 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. |
| Name | Type | Mandatory| Description |
| -------- | ---------------- | ---- | ----------------------------------- |
| width | number \| string | No | Width of the rectangle where the path is located.<br>Default value: **0** |
| height | number \| string | No | Height of the rectangle where the path is located.<br>Default value: **0** |
| commands | string | No | Command for drawing the path.<br>Default value: **''**|
## Attributes ## Attributes
| Name | Type | Default Value | Mandatory | Description | In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| -------- | -------- | -------- | -------- | -------- |
| width | number \| string | 0 | No | Width of the rectangle where the path is located. | | Name | Type | Default Value | Description |
| height | number \| string | 0 | No | Height of the rectangle where the path is located. | | -------- | ----------------------------------- | ---- | ---------------------------------------- |
| commands | string | '' | No | Command string for drawing the path. | | 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&lt;Length&gt; | [] | 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.<br>**NOTE**<br>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.<br>**NOTE**<br>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: The supported commands are as follows:
| Command | Name | Parameter | Description |
- M = moveto | ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| 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 | 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.|
- H = horizontal lineto | 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.|
- V = vertical lineto | 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.|
- C = curveto | 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.|
- S = smooth curveto | Z | closepath | none | Closes the current subpath by connecting the current path back to the initial point of the current subpath. |
- Q = quadratic Belzier curve 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).
- 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).
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct PathExample { struct PathExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 10 }) {
Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Straight line')
Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3) .fontSize(11)
.fontColor(0xCCCCCC)
Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%') .width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) { // Draw a straight line whose length is 900 px and width is 3 vp.
// Run MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), and ClosePath() in sequence. Path()
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') .width(300)
// Run MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), and ClosePath() in sequence. .height(10)
Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') .commands('M0 0 L900 0')
// Run MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), and ClosePath() in sequence. .stroke(Color.Black)
Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') .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%') }.width('100%')
Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) { // Draw an arc.
/ / Run MoveTo(0, 300), draw a curve between (150, 0) and (300, 300), and then run ClosePath(). Row({ space: 20 }) {
Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") Path()
/ / Run MoveTo(0, 150), draw a curve among (0, 150), (150, 0), and (300, 150), and then run ClosePath(). .width(100)
Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z') .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)
en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 6b5b4774
# Polygon # Polygon
The **\<Polygon>** component is used to draw a polygon.
> ![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. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Polygon&gt;** component is used to draw a polygon. ## Child Components
## Required Permissions Not supported
None
## APIs
## Child Components Polygon(options?: {width?: string | number, height?: string | number})
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 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters | Name| Type| Default Value| Description|
| Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- | -------- | | points | Array&lt;Point&gt; | [] | Vertex coordinates of the polygon.|
| width | Length | Yes | - | Width. | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | Color of the fill area.|
| height | Length | Yes | - | Height. | | 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&lt;Length&gt; | [] | 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.<br>**NOTE**<br>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.<br>**NOTE**<br>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 | | Name | Type | Description |
| -------- | -------- | -------- | -------- | -------- | | --------- | -------------------- | ------------------------------------------------------------ |
| width | Length | 0 | No | Width of the rectangle where the polygon is located. | | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
| height | Length | 0 | No | Height of the rectangle where the polygon is located. |
| points | Array&lt;Point&gt; | - | Yes | Vertex coordinates of the polygon. |
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct PolygonExample { struct PolygonExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 10 }) {
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). // 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]]) Polygon({ width: 100, height: 100 })
// 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). .points([[0, 0], [50, 100], [100, 0]])
Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 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). // 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]]) Polygon().width(100).height(100)
}.width('100%') .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
}.margin({ top: 5 }) .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)
en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 6b5b4774
# Polyline # Polyline
The **\<Polyline>** component is used to draw a polyline.
> ![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. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Polyline&gt;** component is used to draw a polyline.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Polyline(options?: {width: Length, height: Length}) Polyline(options?: {width?: string | number, height?: string | number})
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters | Name| Type| Mandatory| Default Value| Description|
| Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- | -------- | | width | string \| number | No| 0 | Width.|
| width | Length | Yes | - | Width. | | height | string \| number | No| 0 | Height.|
| height | Length | Yes | - | Height. |
## Attributes ## Attributes
| Name | Type | Default Value | Mandatory | Description | In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| -------- | -------- | -------- | -------- | -------- |
| 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&lt;Point&gt; | - | Yes | List of coordinates that the polyline passes through. |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 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&lt;Length&gt; | [] | 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.<br>**NOTE**<br>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.<br>**NOTE**<br>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 ## 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 @Entry
@Component @Component
struct PolylineExample { struct PolylineExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 10 }) {
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). // 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]]) Polyline({ width: 100, height: 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). .points([[0, 0], [20, 60], [100, 100]])
Polyline().width(100).height(100).points([[0, 0], [0, 100], [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%') }.width('100%')
}.margin({ top: 5 })
} }
} }
``` ```
![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif) ![en-us_image_0000001219744185](figures/en-us_image_0000001219744185.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 6b5b4774
# Rect # Rect
The **\<Rect>** component is used to draw a rectangle.
> ![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. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Rect&gt;** component is used to draw a rectangle.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array&lt;Length&gt;} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}}) Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| options | Object | No | - | For details, see the **options** parameters. |
- options parameters | Name| Type| Mandatory| Default Value| Description|
| Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- | -------- | | width | string \| number | No| 0 | Width.|
| width | Length | Yes | - | Width. | | height | string \| number | No| 0 | Height.|
| height | Length | Yes | - | Height. | | radius | string \| number \| Array&lt;string \| number&gt; | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.|
| radius | Length \| Array&lt;Length&gt; | No | 0 | Radius of a rounded corner. You can set the radius of four rounded corners. | | radiusWidth | string \| number | No| 0 | Width of the rounded corner.|
| radiusWidth | Length | No | 0 | Width of the rounded corner. | | radiusHeight | string \| number | No| 0 | Height of the rounded corner.|
| radiusHeight | Length | No | 0 | Height of the rounded corner. |
## Attributes ## Attributes
| Name | Type | Default Value | Mandatory | Description | In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| -------- | -------- | -------- | -------- | -------- |
| width | Length | 0 | No | Width. | | Name| Type| Default Value| Description|
| 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. | | radiusWidth | string \| number | 0 | Width of the 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. | | radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.|
| radius | Length \| Array&lt;Length&gt; | 0 | No | Size of the rounded corner. | | radius | string \| number \| Array&lt;string \| number&gt; | 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&lt;Length&gt; | [] | 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.<br>**NOTE**<br>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.<br>**NOTE**<br>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
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct RectExample { struct RectExample {
build() { build() {
Column({ space: 10 }) {
Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 50 rectangle.
Column({ space: 5 }) { Column({ space: 5 }) {
Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 50 rectangle. // Draw a 90% x 50 rectangle.
Rect({ width: '90%', height: 50 }) Rect({ width: '90%', height: 50 })
.fill(Color.Pink)
// Draw a 90% x 50 rectangle. // Draw a 90% x 50 rectangle.
Rect().width('90%').height(50) Rect()
.width('90%')
Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%') .height(50)
// Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. .fillOpacity(0)
Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20) .stroke(Color.Red)
// Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20. .strokeWidth(3)
Rect({ width: '90%', height: 50 }).radius(20)
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 }) }.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)
en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 6b5b4774
...@@ -14,7 +14,7 @@ The **\<Shape>** component is the parent component of the drawing components. Th ...@@ -14,7 +14,7 @@ The **\<Shape>** component is the parent component of the drawing components. Th
## Child Components ## Child Components
This component can contain child components. Supported
## APIs ## APIs
...@@ -23,30 +23,30 @@ Shape(value?: PixelMap) ...@@ -23,30 +23,30 @@ Shape(value?: PixelMap)
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | 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. | | 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 ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Description|
| ----------------- | ---------------------------------------- | ------------------------------- | --------- | ---------------------------------------- | | -------- | -------- | -------- | -------- |
| viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No | View port of the shape. | | viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | View port of the shape.|
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No | Color of the fill area. | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Opacity of the fill area. | | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No | Stroke color. | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | Stroke color. If this attribute is not set, no stroke is displayed.|
| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dash. | | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No | Offset of the start point for drawing the stroke. | | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No | Cap style of 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 | No | Join style of the stroke. | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No | Limit value when the sharp angle is drawn as a miter. | | 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.<br>**NOTE**<br>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 | No | Stroke opacity. | | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>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 | No | Stroke width. | | strokeWidth | number \| string | 1 | Stroke width.|
| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. | | antiAlias | boolean | true | Whether anti-aliasing is enabled.|
| mesh<sup>8+</sup> | Array&lt;number&gt;,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. | | mesh<sup>8+</sup> | Array&lt;number&gt;,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 ## Example
...@@ -144,7 +144,7 @@ struct ShapeExample { ...@@ -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 ### Example 2
...@@ -153,12 +153,12 @@ struct ShapeExample { ...@@ -153,12 +153,12 @@ struct ShapeExample {
@Entry @Entry
@Component @Component
struct ShapeMeshExample { struct ShapeMeshExample {
@State columnVal: number = 0; @State columnVal: number = 0
@State rowVal: number = 0; @State rowVal: number = 0
@State count: number = 0; @State count: number = 0
@State verts: Array<number> = []; @State verts: Array<number> = []
@State shapeWidth: number = 600; @State shapeWidth: number = 600
@State shapeHeight: number = 600; @State shapeHeight: number = 600
build() { build() {
Column() { Column() {
...@@ -187,34 +187,34 @@ struct ShapeMeshExample { ...@@ -187,34 +187,34 @@ struct ShapeMeshExample {
.height(this.shapeHeight + 'px') .height(this.shapeHeight + 'px')
// The mesh distortion effect is displayed when the component is touched. // The mesh distortion effect is displayed when the component is touched.
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
var touchX = event.touches[0].x * 2; var touchX = event.touches[0].x * 2
var touchY = event.touches[0].y * 2; var touchY = event.touches[0].y * 2
this.columnVal = 20; this.columnVal = 20
this.rowVal = 20; this.rowVal = 20
this.count = (this.columnVal + 1) * (this.rowVal + 1); this.count = (this.columnVal + 1) * (this.rowVal + 1)
var orig = [this.count * 2]; var orig = [this.count * 2]
var index = 0; var index = 0
for (var i = 0; i <= this.rowVal; i++) { 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++) { for (var j = 0; j <= this.columnVal; j++) {
var fx = this.shapeWidth * j / this.columnVal; var fx = this.shapeWidth * j / this.columnVal
orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx; orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx
orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy; orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy
index++; index++;
} }
} }
for (var k = 0; k < this.count * 2; k += 2) { for (var k = 0; k < this.count * 2; k += 2) {
var dx = touchX - orig[k + 0]; var dx = touchX - orig[k + 0]
var dy = touchY - orig[k + 1]; var dy = touchY - orig[k + 1]
var dd = dx * dx + dy * dy; var dd = dx * dx + dy * dy
var d = Math.sqrt(dd); var d = Math.sqrt(dd)
var pull = 80000 / (dd * d); var pull = 80000 / (dd * d)
if (pull >= 1) { if (pull >= 1) {
this.verts[k + 0] = touchX; this.verts[k + 0] = touchX
this.verts[k + 1] = touchY; this.verts[k + 1] = touchY
} else { } else {
this.verts[k + 0] = orig[k + 0] + dx * pull; this.verts[k + 0] = orig[k + 0] + dx * pull
this.verts[k + 1] = orig[k + 1] + dy * pull; this.verts[k + 1] = orig[k + 1] + dy * pull
} }
} }
}) })
...@@ -226,7 +226,7 @@ struct ShapeMeshExample { ...@@ -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) ![en-us_image1_0000001184628104](figures/en-us_image1_0000001184628104.png)
......
en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ 6b5b4774
...@@ -8,55 +8,44 @@ The page transition navigates users between pages. You can customize page transi ...@@ -8,55 +8,44 @@ The page transition navigates users between pages. You can customize page transi
| Name | Parameter | Description | | 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.| | PageTransitionEnter | {<br/>type: RouteType,<br/>duration: number,<br/>curve: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay: number<br/>} | Page entrance animation.<br>- **type**: If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>Default value: **Curve.Linear**<br>- **delay**: animation delay, in milliseconds. By default, the animation is played without delay. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.| | PageTransitionExit | {<br/>type: RouteType,<br/>duration: number,<br/>curve: [Curve](ts-appendix-enums.md#curve) \| string,<br/>delay: number<br/>} | Page exit animation.<br>- **type**:If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>Default value: **Curve.Linear**<br>- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.|
## RouteType enums
- Animation parameters | Name| Description |
| Name | Type | Default Value | Mandatory | 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.|
| type | RouteType | - | No | Animation type. If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used. | | 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.|
| duration | number | 1000 | No | Animation duration, in ms. | | None | The page is not redirected. |
| 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.|
## Attributes ## Attributes
The **PageTransitionEnter** and **PageTransitionExit** parameters support the following attributes: | Name | Type | Mandatory| Description |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| slide | SlideEffect | No | Slide effect during page transition.<br>Default value: **SlideEffect.Right**|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | 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.<br>- **x**: translation distance along the x-axis.<br>- **y**: translation distance along the y-axis.<br>- **z**: translation distance along the y-axis.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point.<br>- If the center point is 0, it refers to the upper left corner of the component.<br>|
| opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.<br>Default value: **1**|
| Name | Type | Default Value | Mandatory | Description | ## SlideEffect
| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. |
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | - | 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 | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | - | 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 enums | Name | Description |
| Name | Description | | ------ | ------------------------- |
| ------ | ------------------------- | | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
| 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.|
| 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.|
| 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.|
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
## Events ## Events
The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events:
| Name | Description | | Name | Description |
| ---------------------------------------- | ----------------------------------- | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.| | onEnter(event: (type?: RouteType, progress?: number) =&gt; void) | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.|
| onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.| | onExit(event: (type?: RouteType, progress?: number) =&gt; void) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.<br>- **type**: route type.<br>- **progress**: current progress.|
## Example ## Example
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或