提交 ecb9e734 编写于 作者: E ester.zhou

Update docs (10240)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 a7a7c882
...@@ -2,17 +2,20 @@ ...@@ -2,17 +2,20 @@
The **\<RichText>** component parses and displays HTML text. The **\<RichText>** component parses and displays HTML text.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
Not supported Not supported
## APIs ## APIs
RichText(content:string) RichText(content: string)
**Parameters** **Parameters**
...@@ -42,7 +45,7 @@ RichText(content:string) ...@@ -42,7 +45,7 @@ RichText(content:string)
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> | | \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> | | \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> | | style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> | | \<script>\</script> | Embeds or references a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
## Example ## Example
......
...@@ -24,9 +24,9 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number ...@@ -24,9 +24,9 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a long press gesture is recognized.| | onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Invoked when a long press gesture is recognized.|
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift.| | onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Invoked when the finger used for a long press gesture is lift.|
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.| | onActionCancel(event: () =&gt; void) | Invoked when a tap cancellation event is received after a long press gesture is recognized.|
## Example ## Example
......
...@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb ...@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name| Type| Mandatory| Description|
| --------- | ------------ | --------- | ---------------------------------------- | | -------- | -------- | -------- | -------- |
| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1** | | fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All** | | direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. | | distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
## PanDirection enums ## PanDirection enums
| Name | Description | | Name| Description|
| ---------- | --------------------- | | -------- | -------- |
| All | All directions. | | All | All directions.|
| Horizontal | Horizontal panning. | | Horizontal | Horizontal panning.|
| Vertical | Vertical panning. | | Vertical | Vertical panning.|
| Left | Panning to the left. | | Left | Panning to the left.|
| Right | Panning to the right. | | Right | Panning to the right.|
| Up | Panning up. | | Up | Panning up.|
| Down | Panning down. | | Down | Panning down.|
| None | Panning disabled. | | None | Panning disabled.|
## PanGestureOptions ## PanGestureOptions
...@@ -47,21 +47,21 @@ See the **PanGesture** parameters. ...@@ -47,21 +47,21 @@ See the **PanGesture** parameters.
**APIs** **APIs**
| Name | Description | | Name| Description|
| --------------------------------- | --------------------------- | | -------- | -------- |
| setDirection(value: PanDirection) | Sets the direction. | | setDirection(value: PanDirection) | Sets the direction.|
| setDistance(value: number) | Sets the distance. | | setDistance(value: number) | Sets the distance.|
| setFingers(value: number) | Sets the number of fingers. | | setFingers(value: number) | Sets the number of fingers.|
## Events ## Events
| Name | Description | | Name| Description|
| ---------------------------------------- | ---------------------------------------- | | -------- | -------- |
| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized. | | onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when a pan gesture is recognized.|
| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated. | | onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the pan gesture status is updated.|
| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. | | onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the finger used for a pan gesture is lift.|
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. | | onActionCancel(event: () =&gt; void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.|
## Example ## Example
...@@ -115,3 +115,13 @@ struct PanGestureExample { ...@@ -115,3 +115,13 @@ struct PanGestureExample {
} }
} }
``` ```
**Diagrams**
Pannig to the left:
![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png)
Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner.
![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png)
...@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number }) ...@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number })
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name| Type| Mandatory| Description|
| -------- | ------ | --------- | ---------------------------------------- | | -------- | -------- | -------- | -------- |
| fingers | number | No | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2** | | fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
| distance | number | No | Minimum recognition distance, in vp.<br>Default value: **3** | | distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**|
## Events ## Events
| Name | Description | | Name| Description|
| ---------------------------------------- | ---------------------------------------- | | -------- | -------- |
| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized. | | onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen. | | onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift. | | onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized. | | onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
## Example ## Example
......
...@@ -23,10 +23,10 @@ RotationGesture(value?: { fingers?: number, angle?: number }) ...@@ -23,10 +23,10 @@ RotationGesture(value?: { fingers?: number, angle?: number })
| Parameter| Description| | Parameter| Description|
| -------- | -------- | | -------- | -------- |
| onActionStart(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when a rotation gesture is recognized.| | onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a rotation gesture is recognized.|
| onActionUpdate(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when the user moves the finger in a rotation gesture on the screen.| | onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
| onActionEnd(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when the finger used for the rotation gesture is lift.| | onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for the rotation gesture is lift.|
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.| | onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
## Example ## Example
...@@ -49,7 +49,7 @@ struct RotationGestureExample { ...@@ -49,7 +49,7 @@ struct RotationGestureExample {
.padding(20) .padding(20)
.border({ width: 3 }) .border({ width: 3 })
.margin(80) .margin(80)
.rotate({ angle: this.angle }) .rotate({ z: 1, angle: this.angle })
// The gesture event is triggered by rotating with two fingers. // The gesture event is triggered by rotating with two fingers.
.gesture( .gesture(
RotationGesture() RotationGesture()
......
...@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num ...@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name| Type| Mandatory| Description|
| --------- | -------------- | --------- | ---------------------------------------- | | -------- | -------- | -------- | -------- |
| fingers | number | No | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1** | | fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | SwipeDirection | No | Swipe direction.<br>Default value: **SwipeDirection.All** | | direction | [swipeDirection](#swipedirection)| No| Swipe direction.<br>Default value: **SwipeDirection.All**|
| speed | number | No | Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100** | | speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
## SwipeDirection ## SwipeDirection
| Name | Description | | Name| Description|
| ---------- | --------------------- | | -------- | -------- |
| All | All directions. | | All | All directions.|
| Horizontal | Horizontal direction. | | Horizontal | Horizontal direction.|
| Vertical | Vertical direction. | | Vertical | Vertical direction.|
| None | Swiping disabled. | | None | Swiping disabled.|
## Events ## Events
| Name | Description | | Name| Description|
| ---------------------------------------- | ---------------------------------------- | | -------- | -------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized. | | onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when a swipe gesture is recognized.|
## Example ## Example
...@@ -55,7 +55,7 @@ struct SwipeGestureExample { ...@@ -55,7 +55,7 @@ struct SwipeGestureExample {
.width(300) .width(300)
.height(200) .height(200)
.margin(100) .margin(100)
.rotate({ angle: this.rotateAngle }) .rotate({ z: 1, angle: this.rotateAngle })
// The gesture event is triggered by swiping vertically with one finger. // The gesture event is triggered by swiping vertically with one finger.
.gesture( .gesture(
SwipeGesture({ direction: SwipeDirection.Vertical }) SwipeGesture({ direction: SwipeDirection.Vertical })
......
...@@ -29,30 +29,30 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet ...@@ -29,30 +29,30 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ----------------------------- | | --------- | ------- | ---- | ----------------------------- |
| antialias | boolean | No | Whether antialiasing is enabled.<br>Default value: **false**| | antialias | boolean | No | Whether to enable antialiasing.<br>Default value: **false** |
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | | ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| | [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
| [lineWidth](#linewidth) | number | Line width. | | [lineWidth](#linewidth) | number | Line width. |
| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| | [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**| | [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**|
| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**| | [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**|
| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**| | [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**|
| [font](#font) | string | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**| | [font](#font) | string | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**|
| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**| | [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**|
| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**| | [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**|
| [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. | | [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>Default value: **0.0** | | [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>Default value: **0.0** |
| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**| | [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**|
| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**| | [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**|
| [shadowColor](#shadowcolor) | string | Shadow color. | | [shadowColor](#shadowcolor) | string | Shadow color. |
| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. | | [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. | | [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**| | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**|
> **NOTE** > **NOTE**
> >
...@@ -66,8 +66,8 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet ...@@ -66,8 +66,8 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -96,8 +96,8 @@ struct FillStyleExample { ...@@ -96,8 +96,8 @@ struct FillStyleExample {
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -126,8 +126,8 @@ struct LineWidthExample { ...@@ -126,8 +126,8 @@ struct LineWidthExample {
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -158,8 +158,8 @@ struct StrokeStyleExample { ...@@ -158,8 +158,8 @@ struct StrokeStyleExample {
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -192,8 +192,8 @@ struct LineCapExample { ...@@ -192,8 +192,8 @@ struct LineCapExample {
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -227,8 +227,8 @@ struct LineJoinExample { ...@@ -227,8 +227,8 @@ struct LineJoinExample {
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -262,8 +262,8 @@ struct MiterLimit { ...@@ -262,8 +262,8 @@ struct MiterLimit {
@Entry @Entry
@Component @Component
struct Fonts { struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -292,8 +292,8 @@ struct Fonts { ...@@ -292,8 +292,8 @@ struct Fonts {
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -337,8 +337,8 @@ struct CanvasExample { ...@@ -337,8 +337,8 @@ struct CanvasExample {
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -382,8 +382,8 @@ struct TextBaseline { ...@@ -382,8 +382,8 @@ struct TextBaseline {
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -415,8 +415,8 @@ struct GlobalAlpha { ...@@ -415,8 +415,8 @@ struct GlobalAlpha {
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -427,7 +427,7 @@ struct LineDashOffset { ...@@ -427,7 +427,7 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0; this.context.lineDashOffset = 10.0
this.context.stroke(); this.context.stroke();
}) })
} }
...@@ -461,8 +461,8 @@ struct LineDashOffset { ...@@ -461,8 +461,8 @@ struct LineDashOffset {
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -499,8 +499,8 @@ struct GlobalCompositeOperation { ...@@ -499,8 +499,8 @@ struct GlobalCompositeOperation {
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -531,8 +531,8 @@ struct ShadowBlur { ...@@ -531,8 +531,8 @@ struct ShadowBlur {
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -563,8 +563,8 @@ struct ShadowColor { ...@@ -563,8 +563,8 @@ struct ShadowColor {
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -596,8 +596,8 @@ struct ShadowOffsetX { ...@@ -596,8 +596,8 @@ struct ShadowOffsetX {
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -628,9 +628,9 @@ struct ShadowOffsetY { ...@@ -628,9 +628,9 @@ struct ShadowOffsetY {
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -677,8 +677,8 @@ Fills a rectangle on the canvas. ...@@ -677,8 +677,8 @@ Fills a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -765,8 +765,8 @@ Clears the content in a rectangle on the canvas. ...@@ -765,8 +765,8 @@ Clears the content in a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -797,12 +797,11 @@ Draws filled text on the canvas. ...@@ -797,12 +797,11 @@ Draws filled text on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory| Default Value| Description |
| -------- | ------ | ---- | ---- | --------------- | | -------- | ------ | ---- | ------ | ----------------------------- |
| text | string | Yes | "" | Text to draw. | | text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example** **Example**
...@@ -811,8 +810,8 @@ Draws filled text on the canvas. ...@@ -811,8 +810,8 @@ Draws filled text on the canvas.
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -842,12 +841,12 @@ Draws a text stroke on the canvas. ...@@ -842,12 +841,12 @@ Draws a text stroke on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory| Default Value| Description |
| -------- | ------ | ---- | ---- | --------------- | | -------- | ------ | ---- | ------ | ----------------------------- |
| text | string | Yes | "" | Text to draw. | | text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width of the text to be drawn. | | maxWidth | number | No | - | Maximum width of the text to be drawn. |
**Example** **Example**
...@@ -856,8 +855,8 @@ Draws a text stroke on the canvas. ...@@ -856,8 +855,8 @@ Draws a text stroke on the canvas.
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -887,14 +886,14 @@ Measures the specified text to obtain its width. This API returns a **TextMetric ...@@ -887,14 +886,14 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name| Type | Mandatory| Default Value| Description |
| ---- | ------ | ---- | ---- | ---------- | | ---- | ------ | ---- | ------ | -------------------- |
| text | string | Yes | "" | Text to be measured.| | text | string | Yes | '' | Text to be measured.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----------- | ------- | | ----------- | ---------------- |
| TextMetrics | **TextMetrics** object.| | TextMetrics | **TextMetrics** object.|
**TextMetrics** **TextMetrics**
...@@ -925,8 +924,8 @@ Measures the specified text to obtain its width. This API returns a **TextMetric ...@@ -925,8 +924,8 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -968,8 +967,8 @@ Strokes a path. ...@@ -968,8 +967,8 @@ Strokes a path.
@Entry @Entry
@Component @Component
struct Stroke { struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1008,8 +1007,8 @@ Creates a drawing path. ...@@ -1008,8 +1007,8 @@ Creates a drawing path.
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1055,8 +1054,8 @@ Moves a drawing path to a target position on the canvas. ...@@ -1055,8 +1054,8 @@ Moves a drawing path to a target position on the canvas.
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1100,8 +1099,8 @@ Connects the current point to a target position using a straight line. ...@@ -1100,8 +1099,8 @@ Connects the current point to a target position using a straight line.
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1138,8 +1137,8 @@ Draws a closed path. ...@@ -1138,8 +1137,8 @@ Draws a closed path.
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1173,10 +1172,10 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1173,10 +1172,10 @@ Creates a pattern for image filling based on a specified source image and repeti
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory| Description |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | Source image. For details, see **ImageBitmap**. |
| repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| | repetition | string | Yes | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**.<br>Default value: **''**|
**Return value** **Return value**
...@@ -1191,9 +1190,9 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1191,9 +1190,9 @@ Creates a pattern for image filling based on a specified source image and repeti
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1240,8 +1239,8 @@ Draws a cubic bezier curve on the canvas. ...@@ -1240,8 +1239,8 @@ Draws a cubic bezier curve on the canvas.
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1287,8 +1286,8 @@ Draws a quadratic curve on the canvas. ...@@ -1287,8 +1286,8 @@ Draws a quadratic curve on the canvas.
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1297,10 +1296,10 @@ Draws a quadratic curve on the canvas. ...@@ -1297,10 +1296,10 @@ Draws a quadratic curve on the canvas.
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.beginPath(); this.context.beginPath()
this.context.moveTo(20, 20); this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20); this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1336,8 +1335,8 @@ Draws an arc on the canvas. ...@@ -1336,8 +1335,8 @@ Draws an arc on the canvas.
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1383,8 +1382,8 @@ Draws an arc based on the radius and points on the arc. ...@@ -1383,8 +1382,8 @@ Draws an arc based on the radius and points on the arc.
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1393,9 +1392,9 @@ Draws an arc based on the radius and points on the arc. ...@@ -1393,9 +1392,9 @@ Draws an arc based on the radius and points on the arc.
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.moveTo(100, 20); this.context.moveTo(100, 20)
this.context.arcTo(150, 20, 150, 70, 50); this.context.arcTo(150, 20, 150, 70, 50)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1424,7 +1423,7 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1424,7 +1423,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
| rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. | | rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.| | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.| | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. | | counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction.<br>**true**: Draw the arc counterclockwise.<br>**false**: Draw the arc clockwise. |
**Example** **Example**
...@@ -1433,8 +1432,8 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1433,8 +1432,8 @@ Draws an ellipse in the specified rectangular region on the canvas.
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1479,8 +1478,8 @@ Creates a rectangle on the canvas. ...@@ -1479,8 +1478,8 @@ Creates a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1522,8 +1521,8 @@ Fills the area inside a closed path on the canvas. ...@@ -1522,8 +1521,8 @@ Fills the area inside a closed path on the canvas.
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1574,17 +1573,17 @@ struct Fill { ...@@ -1574,17 +1573,17 @@ struct Fill {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.moveTo(30, 90); region.moveTo(30, 90)
region.lineTo(110, 20); region.lineTo(110, 20)
region.lineTo(240, 130); region.lineTo(240, 130)
region.lineTo(60, 130); region.lineTo(60, 130)
region.lineTo(190, 20); region.lineTo(190, 20)
region.lineTo(270, 90); region.lineTo(270, 90)
region.closePath(); region.closePath()
// Fill path // Fill path
this.context.fillStyle = 'green'; this.context.fillStyle = 'green'
this.context.fill(region, "evenodd"); this.context.fill(region, "evenodd")
}) })
} }
.width('100%') .width('100%')
...@@ -1615,8 +1614,8 @@ Sets the current path to a clipping area. ...@@ -1615,8 +1614,8 @@ Sets the current path to a clipping area.
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1669,9 +1668,9 @@ struct Clip { ...@@ -1669,9 +1668,9 @@ struct Clip {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.rect(80,10,20,130); region.rect(80,10,20,130)
region.rect(40,50,100,50); region.rect(40,50,100,50)
this.context.clip(region,"evenodd") this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)" this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height) this.context.fillRect(0, 0, this.context.width, this.context.height)
...@@ -1739,8 +1738,8 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -1739,8 +1738,8 @@ Rotates a canvas clockwise around its coordinate axes.
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1782,8 +1781,8 @@ Scales the canvas based on the given scale factors. ...@@ -1782,8 +1781,8 @@ Scales the canvas based on the given scale factors.
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1814,7 +1813,7 @@ transform(a: number, b: number, c: number, d: number, e: number, f: number): voi ...@@ -1814,7 +1813,7 @@ transform(a: number, b: number, c: number, d: number, e: number, f: number): voi
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
> **NOTE** > **NOTE**
> >
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
> >
> - x' = scaleX \* x + skewY \* y + translateX > - x' = scaleX \* x + skewY \* y + translateX
...@@ -1839,8 +1838,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1839,8 +1838,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1892,8 +1891,8 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1892,8 +1891,8 @@ Resets the existing transformation matrix and creates a new transformation matri
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1943,8 +1942,8 @@ Moves the origin of the coordinate system. ...@@ -1943,8 +1942,8 @@ Moves the origin of the coordinate system.
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1999,9 +1998,9 @@ Draws an image on the canvas. ...@@ -1999,9 +1998,9 @@ Draws an image on the canvas.
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2010,7 +2009,7 @@ Draws an image on the canvas. ...@@ -2010,7 +2009,7 @@ Draws an image on the canvas.
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200); this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
}) })
} }
.width('100%') .width('100%')
...@@ -2103,8 +2102,8 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi ...@@ -2103,8 +2102,8 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
...@@ -2114,9 +2113,9 @@ struct GetImageData { ...@@ -2114,9 +2113,9 @@ struct GetImageData {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130); this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130); var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150); this.context.putImageData(imagedata,150,150)
}) })
} }
.width('100%') .width('100%')
...@@ -2155,8 +2154,8 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang ...@@ -2155,8 +2154,8 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2383,7 +2382,7 @@ struct ToDataURL { ...@@ -2383,7 +2382,7 @@ struct ToDataURL {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.context.toDataURL(); var dataURL = this.context.toDataURL()
}) })
} }
.width('100%') .width('100%')
...@@ -2406,10 +2405,10 @@ Restores the saved drawing context. ...@@ -2406,10 +2405,10 @@ Restores the saved drawing context.
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -2417,11 +2416,11 @@ Restores the saved drawing context. ...@@ -2417,11 +2416,11 @@ Restores the saved drawing context.
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2445,8 +2444,8 @@ Saves all states of the canvas in the stack. This API is usually called when the ...@@ -2445,8 +2444,8 @@ Saves all states of the canvas in the stack. This API is usually called when the
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2455,11 +2454,11 @@ Saves all states of the canvas in the stack. This API is usually called when the ...@@ -2455,11 +2454,11 @@ Saves all states of the canvas in the stack. This API is usually called when the
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2492,8 +2491,8 @@ Creates a linear gradient. ...@@ -2492,8 +2491,8 @@ Creates a linear gradient.
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2543,8 +2542,8 @@ Creates a linear gradient. ...@@ -2543,8 +2542,8 @@ Creates a linear gradient.
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......
# Combined Gestures # Combined Gestures
Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures.
> **NOTE** > **NOTE**
> >
> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## APIs ## APIs
GestureGroup(mode: GestureMode, ...gesture: GestureType[]) GestureGroup(mode: GestureMode, ...gesture: GestureType[])
**Parameters** - Parameters
| Name| Type| Mandatory| Default Value| Description|
| Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- | -------- | | mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.|
| mode | GestureMode | Yes | - | Recognition mode of combined gestures. | | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\| [PanGesture](ts-basic-gestures-pangesture.md)<br/>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
## GestureMode ## GestureMode
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. | | Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. | | Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. | | Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onCancel(event: () =&gt; void) | Callback for the **GestureMode.Sequence** cancellation event. | | onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
## Example ## Example
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct GestureGroupExample { struct GestureGroupExample {
@State count: number = 0 @State count: number = 0;
@State offsetX: number = 0 @State offsetX: number = 0;
@State offsetY: number = 0 @State offsetY: number = 0;
@State borderStyles: BorderStyle = BorderStyle.Solid @State positionX: number = 0;
@State positionY: number = 0;
@State borderStyles: BorderStyle = BorderStyle.Solid;
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) }
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles }) .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150)
.width(200)
.padding(20)
.margin(20)
.border({ width: 3, style: this.borderStyles })
.gesture( .gesture(
GestureGroup(GestureMode.Sequence, // The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered.
LongPressGesture({ repeat: true }) GestureGroup(GestureMode.Sequence,
.onAction((event: GestureEvent) => { LongPressGesture({ repeat: true })
if (event.repeat) {this.count++} .onAction((event: GestureEvent) => {
console.log('LongPress onAction') if (event.repeat) {
}) this.count++;
.onActionEnd(() => { }
console.log('LongPress end') console.info('LongPress onAction');
}), })
PanGesture({}) .onActionEnd(() => {
.onActionStart(() => { console.info('LongPress end');
this.borderStyles = BorderStyle.Dashed }),
console.log('pan start') PanGesture()
}) .onActionStart(() => {
.onActionUpdate((event: GestureEvent) => { this.borderStyles = BorderStyle.Dashed;
this.offsetX = event.offsetX console.info('pan start');
this.offsetY = event.offsetY })
console.log('pan update') .onActionUpdate((event: GestureEvent) => {
}) this.offsetX = this.positionX + event.offsetX;
) this.offsetY = this.positionY + event.offsetY;
console.info('pan update');
})
.onActionEnd(() => {
this.positionX = this.offsetX;
this.positionY = this.offsetY;
this.borderStyles = BorderStyle.Solid;
console.info('pan end');
})
)
.onCancel(() => { .onCancel(() => {
console.log('sequence gesture canceled') console.info('sequence gesture canceled');
}) })
) )
} }
} }
``` ```
![en-us_image_0000001212058490](figures/en-us_image_0000001212058490.gif) Diagram:
In sequence recognition mode the long press gesture event is triggered first.
![en-us_image_0000001174104384](figures/en-us_image_0000001174104384.png)
After the long press gesture is recognized, the drag gesture event is triggered.
![en-us_image1_0000001174104384](figures/en-us_image1_0000001174104384.png)
...@@ -4,13 +4,7 @@ The **\<Canvas>** component can be used to customize drawings. ...@@ -4,13 +4,7 @@ The **\<Canvas>** component can be used to customize drawings.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
...@@ -36,7 +30,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ...@@ -36,7 +30,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Parameter | Description | | Name | Parameter | Description |
| ----------------------------- | ---- | -------------------- | | ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | - | Triggered when a canvas is ready. | | onReady(event: () => void) | - | Triggered when the canvas is ready. |
**Example** **Example**
......
...@@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse ...@@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. | | color | string | Yes | '#ffffff' | Gradient color to set. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Page45 { struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() => {
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
}} }
}
``` ```
![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png) ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
......
...@@ -10,10 +10,10 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. ...@@ -10,10 +10,10 @@ An **ImageBitmap** object stores pixel data rendered on a canvas.
## Attributes ## Attributes
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Pixel width of the **ImageBitmap** object.| | width | number | Pixel width of the **ImageBitmap** object.|
| height | number | Pixel height of the **ImageBitmap** object.| | height | number | Pixel height of the **ImageBitmap** object.|
**Example** **Example**
......
...@@ -10,11 +10,11 @@ An **ImageData** object stores pixel data rendered on a canvas. ...@@ -10,11 +10,11 @@ An **ImageData** object stores pixel data rendered on a canvas.
## Attributes ## Attributes
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | Actual width of the rectangle on the canvas, in pixels.| | width | number | Actual width of the rectangle on the canvas, in pixels.|
| height | number | Actual height of the rectangle on the canvas, in pixels.| | height | number | Actual height of the rectangle on the canvas, in pixels.|
| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.| | data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
**Example** **Example**
......
...@@ -27,19 +27,19 @@ loadAnimation( ...@@ -27,19 +27,19 @@ loadAnimation(
path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**. Loads an animation. Before calling this API, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------------- | --------------------------- | ---- | ---------------------------------------- | | -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**| | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.| | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
| render | string | Yes | Rendering type. The value can only be **"canvas"**. | | render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.| | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
| autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | | autoplay | boolean | No | Whether to automatically play the animation.<br/>Default value: **true** |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation.<br/>Default value: null |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy ## lottie.destroy
...@@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho ...@@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.| | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
**Example** **Example**
```ts ```ts
...@@ -131,9 +131,9 @@ Plays a specified animation. ...@@ -131,9 +131,9 @@ Plays a specified animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.| | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
**Example** **Example**
...@@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani ...@@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example** **Example**
...@@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin ...@@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example** **Example**
...@@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an ...@@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example** **Example**
...@@ -207,10 +207,10 @@ Sets the playback speed of the specified animation. ...@@ -207,10 +207,10 @@ Sets the playback speed of the specified animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.| | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
**Example** **Example**
...@@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays. ...@@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- | | --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 | | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
**Example** **Example**
...@@ -275,9 +275,9 @@ Plays an animation. ...@@ -275,9 +275,9 @@ Plays an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -294,9 +294,9 @@ Destroys an animation. ...@@ -294,9 +294,9 @@ Destroys an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat ...@@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between ...@@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati ...@@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -370,9 +370,9 @@ Sets the playback speed of an animation. ...@@ -370,9 +370,9 @@ Sets the playback speed of an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.| | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
**Example** **Example**
...@@ -389,9 +389,9 @@ Sets the playback direction of an animation. ...@@ -389,9 +389,9 @@ Sets the playback direction of an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- | | --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.| | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
**Example** **Example**
...@@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time. ...@@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- | | ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.| | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress.<br/>Default value: **false** |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null. |
**Example** **Example**
...@@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress. ...@@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- | | ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.| | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress.<br>Default value: **false** |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null. |
**Example** **Example**
...@@ -456,10 +456,10 @@ Sets the animation to play only the specified segment. ...@@ -456,10 +456,10 @@ Sets the animation to play only the specified segment.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- | | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.| | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
**Example** **Example**
...@@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr ...@@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ | | --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.| | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
**Example** **Example**
...@@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n ...@@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ---------------------------------------- | | ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.| | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
**Example** **Example**
...@@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for ...@@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------- | ---- | ---------------------------------------- | | -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**| | inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br/>Default value: **false** |
**Example** **Example**
...@@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func ...@@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| | name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. | | callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
**Example** **Example**
...@@ -575,10 +575,10 @@ Removes an event listener. ...@@ -575,10 +575,10 @@ Removes an event listener.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| | name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | | callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
**Example** **Example**
...@@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event. ...@@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------------------ | ---- | --------- | | ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. | | name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters.| | args | any | Yes | Custom callback parameters.|
**Example** **Example**
......
# GridContainer # GridContainer
The **\<GridContainer>** component lays out components vertically. It is used only in the grid layout.
> ![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;GridContainer&gt;** component lays out components vertically. It is used only in the grid layout.
## Required Permissions
None
## Child Components ## Child Components
This component can contain child components. Supported
## APIs ## APIs
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length}) GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})
- Parameter **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
| sizeType | SizeType | No | SizeType.Auto | Device size type. |
| gutter | Length | No | - | Gutter of the grid layout. |
| margin | Length | No | - | Margin of the grid layout. |
- SizeType enums | Name| Type| Mandatory| Description|
| Name | Description | | -------- | -------- | -------- | -------- |
| -------- | -------- | | columns | number \| 'auto' | No| Total number of columns in the current layout.<br>Default value: **'auto'**|
| XS | Device of the minimum size. | | sizeType | SizeType | No| Device size type.<br>Default value: **SizeType.Auto**|
| SM | Small-sized device. | | gutter | number \| string | No| Gutter of the grid layout. This parameter cannot be set to a percentage. |
| MD | Medium-sized device. | | margin | number \| string | No| Margin of the grid layout. This parameter cannot be set to a percentage. |
| LG | Large-sized device. |
| Auto | Auto. The size type is selected based on the device type. | ## SizeType
| Name| Description|
| -------- | -------- |
| XS | Device of the minimum size.|
| SM | Small-sized device.|
| MD | Medium-sized device.|
| LG | Large-sized device.|
| Auto | Auto. The size type is selected based on the device type.|
## Attributes ## Attributes
Universal attributes and [attributes](ts-container-column.md#attributes) of the **&lt;Column&gt;** component are supported. The universal attributes and attributes of the **[<Column\>](ts-container-column.md#attributes)** component are supported.
## Events ## Events
Universal events are supported. The universal events are supported.
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct GridContainerExample { struct GridContainerExample {
......
...@@ -4,7 +4,9 @@ The **\<Scroll>** component scrolls the content when the layout size of a compon ...@@ -4,7 +4,9 @@ The **\<Scroll>** component scrolls the content when the layout size of a compon
> **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 prerequisite for the component to rebound is that the component is scrolled. > - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
> - This component can scroll only when the size on the main axis is less than the content size.
> - This component can produce a bounce effect only when there is more than one screen of content.
## Child Components ## Child Components
...@@ -22,11 +24,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -22,11 +24,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| -------------- | ---------------------------------------- | --------- | | -------------- | ---------------------------------------- | --------- |
| scrollable | ScrollDirection | Scroll direction.<br>Default value: **ScrollDirection.Vertical**| | scrollable | [ScrollDirection](#scrolldirection) | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**| | scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Auto**|
| scrollBarColor | string \| number \| Color | Color of the scrollbar.| | scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.|
| scrollBarWidth | string \| number | Width of the scrollbar.| | scrollBarWidth | string \| number | Width of the scrollbar.|
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**| | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**|
## ScrollDirection ## ScrollDirection
| Name | Description | | Name | Description |
...@@ -34,15 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -34,15 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Horizontal | Only horizontal scrolling is supported. | | Horizontal | Only horizontal scrolling is supported. |
| Vertical | Only vertical scrolling is supported. | | Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. | | None | Scrolling is disabled. |
| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.| | Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9.|
## Events ## Events
| Name | Description | | Name | Description |
| ----------------------------------------------------------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. | | onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. | | onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEnd(event: () => void) | Invoked when scrolling stops. | | onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. |
| onScrollEnd(event: () => void) | Invoked when scrolling stops. |
> **NOTE**
>
> If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
## Scroller ## Scroller
...@@ -67,18 +74,24 @@ Scrolls to the specified position. ...@@ -67,18 +74,24 @@ Scrolls to the specified position.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | number \| string | Yes | Horizontal scrolling offset. | | xOffset | Length | Yes | Horizontal scrolling offset. |
| yOffset | number \| string | Yes | Vertical scrolling offset. | | yOffset | Length | Yes | Vertical scrolling offset. |
| animation | {<br>duration: number,<br>curve: [Curve](ts-appendix-enums.md#curve)<br>} | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.| | animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md)<br>} | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
### scrollEdge ### scrollEdge
scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void scrollEdge(value: Edge): void
Scrolls to the edge of the container. Scrolls to the edge of the container.
**Parameters**
| Name | Type| Mandatory | Description |
| ----- | ---- | ---- | --------- |
| value | [Edge](ts-appendix-enums.md#edge) | Yes | Edge position to scroll to.|
### scrollPage ### scrollPage
...@@ -91,7 +104,7 @@ Scrolls to the next or previous page. ...@@ -91,7 +104,7 @@ Scrolls to the next or previous page.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ | | --------- | ------- | ---- | ------------------------------ |
| next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.| | next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
| direction | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical. | | direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9. |
### currentOffset ### currentOffset
...@@ -101,6 +114,13 @@ currentOffset() ...@@ -101,6 +114,13 @@ currentOffset()
Obtains the scrolling offset. Obtains the scrolling offset.
**Return value**
| Type | Description |
| ---------------------------------------- | ---------------------------------------- |
| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
### scrollToIndex ### scrollToIndex
scrollToIndex(value: number): void scrollToIndex(value: number): void
...@@ -120,15 +140,36 @@ Scrolls to the item with the specified index. ...@@ -120,15 +140,36 @@ Scrolls to the item with the specified index.
| value | number | Yes | Index of the item to be scrolled to in the list.| | value | number | Yes | Index of the item to be scrolled to in the list.|
### scrollBy<sup>9+</sup>
scrollBy(dx: Length, dy: Length): void
Scrolls by the specified amount.
> **NOTE**
>
> Only the **\<Scroll>** component is supported.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ----------------- |
| dx | Length | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
| dy | Length | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.|
## Example ## Example
### Example 1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct ScrollExample { struct ScrollExample {
scroller: Scroller = new Scroller() scroller: Scroller = new Scroller();
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
build() { build() {
Stack({ alignContent: Alignment.TopStart }) { Stack({ alignContent: Alignment.TopStart }) {
...@@ -146,38 +187,99 @@ struct ScrollExample { ...@@ -146,38 +187,99 @@ struct ScrollExample {
}, item => item) }, item => item)
}.width('100%') }.width('100%')
} }
.scrollable(ScrollDirection.Vertical) .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction.
.scrollBar(BarState.On) .scrollBar(BarState.On) // The scrollbar is always displayed.
.scrollBarColor(Color.Gray) .scrollBarColor(Color.Gray) // Color of the scrollbar.
.scrollBarWidth(30) .scrollBarWidth(30) // Width of the scrollbar.
.edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => { .onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset) console.info(xOffset + ' ' + yOffset);
}) })
.onScrollEdge((side: Edge) => { .onScrollEdge((side: Edge) => {
console.info('To the edge') console.info('To the edge');
}) })
.onScrollEnd(() => { .onScrollEnd(() => {
console.info('Scroll Stop') console.info('Scroll Stop');
}) })
Button('scroll 150')
.onClick(() => { // Click to scroll down to 150.0 vp.
this.scroller.scrollBy(0,150);
})
.margin({ top: 10, left: 20 })
Button('scroll 100') Button('scroll 100')
.onClick(() => { // Click to scroll down by 100.0 vp. .onClick(() => { // Click to scroll down by 100.0 vp.
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
}) })
.margin({ top: 10, left: 20 }) .margin({ top: 60, left: 20 })
Button('back top') Button('back top')
.onClick(() => { // Click to go back to the top. .onClick(() => { // Click to go back to the top.
this.scroller.scrollEdge(Edge.Top) this.scroller.scrollEdge(Edge.Top);
}) })
.margin({ top: 60, left: 20 }) .margin({ top: 110, left: 20 })
Button('next page') Button('next page')
.onClick(() => { // Click to go to the next page. .onClick(() => { // Click to go to the next page.
this.scroller.scrollPage({ next: true }) this.scroller.scrollPage({ next: true });
}) })
.margin({ top: 110, left: 20 }) .margin({ top: 170, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC) }.width('100%').height('100%').backgroundColor(0xDCDCDC)
} }
} }
``` ```
![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif) ![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
### Example 2
```ts
@Entry
@Component
struct NestedScroll {
@State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list.
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
private scroller: Scroller = new Scroller();
build() {
Flex() {
Scroll(this.scroller) {
Column() {
Text("Scroll Area")
.width("100%").height("40%").backgroundColor(0X330000FF)
.fontSize(16).textAlign(TextAlign.Center)
List({ space: 20 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text("ListItem" + item)
.width("100%").height("100%").borderRadius(15)
.fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White)
}.width("100%").height(100)
}, item => item)
}
.width("100%").height("50%").edgeEffect(EdgeEffect.None)
.onReachStart(() => {
this.listPosition = 0;
})
.onReachEnd(() => {
this.listPosition = 2;
})
.onScrollBegin((dx: number, dy: number) => {
if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
this.scroller.scrollBy(0, -dy);
return { dxRemain: dx, dyRemain: 0 };
}
this.listPosition = 1;
return { dxRemain: dx, dyRemain: dy };
})
Text("Scroll Area")
.width("100%").height("40%").backgroundColor(0X330000FF)
.fontSize(16).textAlign(TextAlign.Center)
}
}
.width("100%").height("100%")
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
}
}
```
![NestedScroll](figures/NestedScroll.gif)
...@@ -137,4 +137,4 @@ struct GestureSettingsExample { ...@@ -137,4 +137,4 @@ struct GestureSettingsExample {
} }
``` ```
![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif) ![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif)
# Time Picker Dialog Box # Time Picker Dialog Box
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default. You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default.
## Required Permissions > **NOTE**
>
None > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## TimePickerDialog.show ## TimePickerDialog.show
...@@ -16,22 +13,23 @@ show(options?: TimePickerDialogOptions) ...@@ -16,22 +13,23 @@ show(options?: TimePickerDialogOptions)
Defines and displays a time picker dialog box. Defines and displays a time picker dialog box.
- options parameters - options parameters
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selected | Date | No| Current system time| Time of the selected item.| | selected | Date | No| Selected time.<br>Default value: current system time|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.| | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the OK button in the dialog box is clicked.| | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.| | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
## Example ## Example
### Time Picker Sample Code (24-Hour Clock) ### Time Picker Sample Code (24-Hour Clock)
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerDialogExample01 { struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true @State isUseMilitaryTime: boolean = true;
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
...@@ -40,13 +38,13 @@ struct TimePickerDialogExample01 { ...@@ -40,13 +38,13 @@ struct TimePickerDialogExample01 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()") console.info("TimePickerDialog:onCancel()");
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
} }
}) })
}) })
...@@ -54,12 +52,16 @@ struct TimePickerDialogExample01 { ...@@ -54,12 +52,16 @@ struct TimePickerDialogExample01 {
} }
} }
``` ```
![en-us_image_0000001118642010](figures/en-us_image_0000001118642010.gif)
### Time Picker Sample Code (12-Hour Clock) ### Time Picker Sample Code (12-Hour Clock)
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerDialogExample02 { struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false @State isUseMilitaryTime: boolean = false;
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
...@@ -68,13 +70,13 @@ struct TimePickerDialogExample02 { ...@@ -68,13 +70,13 @@ struct TimePickerDialogExample02 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()") console.info("TimePickerDialog:onCancel()");
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
} }
}) })
}) })
...@@ -82,3 +84,5 @@ struct TimePickerDialogExample02 { ...@@ -82,3 +84,5 @@ struct TimePickerDialogExample02 {
} }
} }
``` ```
![en-us_image_0000001118642020](figures/en-us_image_0000001118642020.gif)
\ No newline at end of file
...@@ -32,7 +32,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ...@@ -32,7 +32,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**| | [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**|
| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**| | [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**|
| [font](#font) | string | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**| | [font](#font) | string | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**|
| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>> **NOTE**<br>> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**| | [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**|
| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'**| | [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'**|
| [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. | | [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>- Default value: **0.0**| | [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>- Default value: **0.0**|
...@@ -78,7 +78,7 @@ struct FillStyleExample { ...@@ -78,7 +78,7 @@ struct FillStyleExample {
} }
``` ```
![en-us_image_0000001211898510](figures/en-us_image_0000001211898510.png) ![en-us_image_0000001193872516](figures/en-us_image_0000001193872516.png)
### lineWidth ### lineWidth
...@@ -111,7 +111,7 @@ struct LineWidthExample { ...@@ -111,7 +111,7 @@ struct LineWidthExample {
} }
``` ```
![en-us_image_0000001257058439](figures/en-us_image_0000001257058439.png) ![en-us_image_0000001238832403](figures/en-us_image_0000001238832403.png)
### strokeStyle ### strokeStyle
...@@ -145,7 +145,7 @@ struct StrokeStyleExample { ...@@ -145,7 +145,7 @@ struct StrokeStyleExample {
} }
``` ```
![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png) ![en-us_image_0000001238712437](figures/en-us_image_0000001238712437.png)
### lineCap ### lineCap
...@@ -182,7 +182,7 @@ struct LineCapExample { ...@@ -182,7 +182,7 @@ struct LineCapExample {
} }
``` ```
![en-us_image_0000001256858427](figures/en-us_image_0000001256858427.png) ![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG)
### lineJoin ### lineJoin
...@@ -220,7 +220,7 @@ struct LineJoinExample { ...@@ -220,7 +220,7 @@ struct LineJoinExample {
} }
``` ```
![en-us_image_0000001256858429](figures/en-us_image_0000001256858429.png) ![en-us_image_0000001194352450](figures/en-us_image_0000001194352450.png)
### miterLimit ### miterLimit
...@@ -258,7 +258,7 @@ struct MiterLimit { ...@@ -258,7 +258,7 @@ struct MiterLimit {
} }
``` ```
![en-us_image_0000001212218472](figures/en-us_image_0000001212218472.png) ![en-us_image_0000001238952397](figures/en-us_image_0000001238952397.png)
### font ### font
...@@ -291,7 +291,7 @@ struct Fonts { ...@@ -291,7 +291,7 @@ struct Fonts {
} }
``` ```
![en-us_image_0000001211898508](figures/en-us_image_0000001211898508.png) ![en-us_image_0000001194032476](figures/en-us_image_0000001194032476.png)
### textAlign ### textAlign
...@@ -339,7 +339,7 @@ struct CanvasExample { ...@@ -339,7 +339,7 @@ struct CanvasExample {
} }
``` ```
![en-us_image_0000001257138377](figures/en-us_image_0000001257138377.png) ![en-us_image_0000001239032423](figures/en-us_image_0000001239032423.png)
### textBaseline ### textBaseline
...@@ -387,7 +387,7 @@ struct TextBaseline { ...@@ -387,7 +387,7 @@ struct TextBaseline {
} }
``` ```
![en-us_image_0000001256978375](figures/en-us_image_0000001256978375.png) ![en-us_image_0000001193872518](figures/en-us_image_0000001193872518.png)
### globalAlpha ### globalAlpha
...@@ -423,7 +423,7 @@ struct GlobalAlpha { ...@@ -423,7 +423,7 @@ struct GlobalAlpha {
} }
``` ```
![en-us_image_0000001211898506](figures/en-us_image_0000001211898506.png) ![en-us_image_0000001238832405](figures/en-us_image_0000001238832405.png)
### lineDashOffset ### lineDashOffset
...@@ -458,7 +458,7 @@ struct LineDashOffset { ...@@ -458,7 +458,7 @@ struct LineDashOffset {
} }
``` ```
![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png) ![en-us_image_0000001238712439](figures/en-us_image_0000001238712439.png)
### globalCompositeOperation ### globalCompositeOperation
...@@ -513,7 +513,7 @@ struct GlobalCompositeOperation { ...@@ -513,7 +513,7 @@ struct GlobalCompositeOperation {
} }
``` ```
![en-us_image_0000001212218474](figures/en-us_image_0000001212218474.png) ![en-us_image_0000001194192456](figures/en-us_image_0000001194192456.png)
### shadowBlur ### shadowBlur
...@@ -548,7 +548,7 @@ struct ShadowBlur { ...@@ -548,7 +548,7 @@ struct ShadowBlur {
} }
``` ```
![en-us_image_0000001211898514](figures/en-us_image_0000001211898514.png) ![en-us_image_0000001194352452](figures/en-us_image_0000001194352452.png)
### shadowColor ### shadowColor
...@@ -583,7 +583,7 @@ struct ShadowColor { ...@@ -583,7 +583,7 @@ struct ShadowColor {
} }
``` ```
![en-us_image_0000001212058502](figures/en-us_image_0000001212058502.png) ![en-us_image_0000001238952399](figures/en-us_image_0000001238952399.png)
### shadowOffsetX ### shadowOffsetX
...@@ -619,7 +619,7 @@ struct ShadowOffsetX { ...@@ -619,7 +619,7 @@ struct ShadowOffsetX {
} }
``` ```
![en-us_image_0000001257138379](figures/en-us_image_0000001257138379.png) ![en-us_image_0000001194032478](figures/en-us_image_0000001194032478.png)
### shadowOffsetY ### shadowOffsetY
...@@ -655,7 +655,7 @@ struct ShadowOffsetY { ...@@ -655,7 +655,7 @@ struct ShadowOffsetY {
} }
``` ```
![en-us_image_0000001257058427](figures/en-us_image_0000001257058427.png) ![en-us_image_0000001239032425](figures/en-us_image_0000001239032425.png)
### imageSmoothingEnabled ### imageSmoothingEnabled
...@@ -689,7 +689,7 @@ struct ImageSmoothingEnabled { ...@@ -689,7 +689,7 @@ struct ImageSmoothingEnabled {
} }
``` ```
![en-us_image_0000001257138385](figures/en-us_image_0000001257138385.png) ![en-us_image_0000001193872520](figures/en-us_image_0000001193872520.png)
## Methods ## Methods
...@@ -703,7 +703,7 @@ Fills a rectangle on the canvas. ...@@ -703,7 +703,7 @@ Fills a rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.|
...@@ -739,7 +739,7 @@ Fills a rectangle on the canvas. ...@@ -739,7 +739,7 @@ Fills a rectangle on the canvas.
} }
``` ```
![en-us_image_0000001257138375](figures/en-us_image_0000001257138375.png) ![en-us_image_0000001194192436](figures/en-us_image_0000001194192436.png)
### strokeRect ### strokeRect
...@@ -748,16 +748,16 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -748,16 +748,16 @@ strokeRect(x: number, y: number, w: number, h: number): void
Draws an outlined rectangle on the canvas. Draws an outlined rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------ | | ------ | ------ | ---- | ---- | ------------ |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.|
| width | number | Yes | 0 | Width of the rectangle. | | width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -786,7 +786,7 @@ Draws an outlined rectangle on the canvas. ...@@ -786,7 +786,7 @@ Draws an outlined rectangle on the canvas.
} }
``` ```
![en-us_image_0000001212378436](figures/en-us_image_0000001212378436.png) ![en-us_image_0000001194352436](figures/en-us_image_0000001194352436.png)
### clearRect ### clearRect
...@@ -795,16 +795,16 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -795,16 +795,16 @@ clearRect(x: number, y: number, w: number, h: number): void
Clears the content in a rectangle on the canvas. Clears the content in a rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.|
| width | number | Yes | 0 | Width of the rectangle. | | width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -835,7 +835,7 @@ Clears the content in a rectangle on the canvas. ...@@ -835,7 +835,7 @@ Clears the content in a rectangle on the canvas.
} }
``` ```
![en-us_image_0000001212058500](figures/en-us_image_0000001212058500.png) ![en-us_image_0000001238952377](figures/en-us_image_0000001238952377.png)
### fillText ### fillText
...@@ -846,14 +846,14 @@ Draws filled text on the canvas. ...@@ -846,14 +846,14 @@ Draws filled text on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | ------ | ---- | ---- | --------------- | | -------- | ------ | ---- | ---- | --------------- |
| text | string | Yes | "" | Text to draw. | | text | string | Yes | "" | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. | | maxWidth | number | No | - | Maximum width allowed for the text. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -883,7 +883,7 @@ Draws filled text on the canvas. ...@@ -883,7 +883,7 @@ Draws filled text on the canvas.
} }
``` ```
![en-us_image_0000001257058437](figures/en-us_image_0000001257058437.png) ![en-us_image_0000001194032458](figures/en-us_image_0000001194032458.png)
### strokeText ### strokeText
...@@ -894,14 +894,14 @@ Draws a text stroke on the canvas. ...@@ -894,14 +894,14 @@ Draws a text stroke on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | ------ | ---- | ---- | --------------- | | -------- | ------ | ---- | ---- | --------------- |
| text | string | Yes | "" | Text to draw. | | text | string | Yes | "" | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width of the text to be drawn. | | maxWidth | number | No | - | Maximum width of the text to be drawn. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -931,7 +931,7 @@ Draws a text stroke on the canvas. ...@@ -931,7 +931,7 @@ Draws a text stroke on the canvas.
} }
``` ```
![en-us_image_0000001212218466](figures/en-us_image_0000001212218466.png) ![en-us_image_0000001238952401](figures/en-us_image_0000001238952401.png)
### measureText ### measureText
...@@ -940,13 +940,13 @@ measureText(text: string): TextMetrics ...@@ -940,13 +940,13 @@ measureText(text: string): TextMetrics
Returns a **TextMetrics** object used to obtain the width of specified text. Returns a **TextMetrics** object used to obtain the width of specified text.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ---------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | Yes | "" | Text to be measured.| | text | string | Yes | "" | Text to be measured.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----------- | ------- | | ----------- | ------- |
...@@ -970,7 +970,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -970,7 +970,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
| hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.| | hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.|
| ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.| | ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1001,7 +1001,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -1001,7 +1001,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
} }
``` ```
![en-us_image_0000001256858431](figures/en-us_image_0000001256858431.png) ![en-us_image_0000001194032480](figures/en-us_image_0000001194032480.png)
### stroke ### stroke
...@@ -1010,14 +1010,14 @@ stroke(path?: Path2D): void ...@@ -1010,14 +1010,14 @@ stroke(path?: Path2D): void
Strokes a path. Strokes a path.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ---------------------------------------- | ---- | ---- | ------------ | | ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.| | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -1050,7 +1050,7 @@ Strokes a path. ...@@ -1050,7 +1050,7 @@ Strokes a path.
} }
``` ```
![en-us_image_0000001257138373](figures/en-us_image_0000001257138373.png) ![en-us_image_0000001238832389](figures/en-us_image_0000001238832389.png)
### beginPath ### beginPath
...@@ -1059,7 +1059,7 @@ beginPath(): void ...@@ -1059,7 +1059,7 @@ beginPath(): void
Creates a drawing path. Creates a drawing path.
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1093,7 +1093,7 @@ Creates a drawing path. ...@@ -1093,7 +1093,7 @@ Creates a drawing path.
} }
``` ```
![en-us_image_0000001212378440](figures/en-us_image_0000001212378440.png) ![en-us_image_0000001193872522](figures/en-us_image_0000001193872522.png)
### moveTo ### moveTo
...@@ -1102,14 +1102,14 @@ moveTo(x: number, y: number): void ...@@ -1102,14 +1102,14 @@ moveTo(x: number, y: number): void
Moves a drawing path to a target position on the canvas. Moves a drawing path to a target position on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | Yes | 0 | X-coordinate of the target position.| | x | number | Yes | 0 | X-coordinate of the target position.|
| y | number | Yes | 0 | Y-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1141,7 +1141,7 @@ Moves a drawing path to a target position on the canvas. ...@@ -1141,7 +1141,7 @@ Moves a drawing path to a target position on the canvas.
} }
``` ```
![en-us_image_0000001212058498](figures/en-us_image_0000001212058498.png) ![en-us_image_0000001238832409](figures/en-us_image_0000001238832409.png)
### lineTo ### lineTo
...@@ -1150,14 +1150,14 @@ lineTo(x: number, y: number): void ...@@ -1150,14 +1150,14 @@ lineTo(x: number, y: number): void
Connects the current point to a target position using a straight line. Connects the current point to a target position using a straight line.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | Yes | 0 | X-coordinate of the target position.| | x | number | Yes | 0 | X-coordinate of the target position.|
| y | number | Yes | 0 | Y-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1189,7 +1189,7 @@ Connects the current point to a target position using a straight line. ...@@ -1189,7 +1189,7 @@ Connects the current point to a target position using a straight line.
} }
``` ```
![en-us_image_0000001257058435](figures/en-us_image_0000001257058435.png) ![en-us_image_0000001238712443](figures/en-us_image_0000001238712443.png)
### closePath ### closePath
...@@ -1198,7 +1198,7 @@ closePath(): void ...@@ -1198,7 +1198,7 @@ closePath(): void
Draws a closed path. Draws a closed path.
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1232,7 +1232,7 @@ Draws a closed path. ...@@ -1232,7 +1232,7 @@ Draws a closed path.
} }
``` ```
![en-us_image_0000001257058431](figures/en-us_image_0000001257058431.png) ![en-us_image_0000001194192460](figures/en-us_image_0000001194192460.png)
### createPattern ### createPattern
...@@ -1243,7 +1243,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1243,7 +1243,7 @@ Creates a pattern for image filling based on a specified source image and repeti
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. |
| repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| | repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.|
...@@ -1254,7 +1254,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1254,7 +1254,7 @@ Creates a pattern for image filling based on a specified source image and repeti
| ------------------------------- | ----------------------- | | ------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| | [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1286,7 +1286,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1286,7 +1286,7 @@ Creates a pattern for image filling based on a specified source image and repeti
} }
``` ```
![en-us_image_0000001257138387](figures/en-us_image_0000001257138387.png) ![en-us_image_0000001194352456](figures/en-us_image_0000001194352456.png)
### bezierCurveTo ### bezierCurveTo
...@@ -1295,9 +1295,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1295,9 +1295,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas. Draws a cubic bezier curve on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------------- | | ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.| | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.|
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.| | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.|
...@@ -1306,7 +1306,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1306,7 +1306,7 @@ Draws a cubic bezier curve on the canvas.
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1338,7 +1338,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1338,7 +1338,7 @@ Draws a cubic bezier curve on the canvas.
} }
``` ```
![en-us_image_0000001212378442](figures/en-us_image_0000001212378442.png) ![en-us_image_0000001238952403](figures/en-us_image_0000001238952403.png)
### quadraticCurveTo ### quadraticCurveTo
...@@ -1347,16 +1347,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1347,16 +1347,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas. Draws a quadratic curve on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.| | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.|
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.| | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.|
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve.| | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve.| | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1388,7 +1388,7 @@ Draws a quadratic curve on the canvas. ...@@ -1388,7 +1388,7 @@ Draws a quadratic curve on the canvas.
} }
``` ```
![en-us_image_0000001256978383](figures/en-us_image_0000001256978383.png) ![en-us_image_0000001194032482](figures/en-us_image_0000001194032482.png)
### arc ### arc
...@@ -1397,9 +1397,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1397,9 +1397,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas. Draws an arc on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------------- | ------- | ---- | ----- | ---------- | | ---------------- | ------- | ---- | ----- | ---------- |
| x | number | Yes | 0 | X-coordinate of the center point of the arc.| | x | number | Yes | 0 | X-coordinate of the center point of the arc.|
| y | number | Yes | 0 | Y-coordinate of the center point of the arc.| | y | number | Yes | 0 | Y-coordinate of the center point of the arc.|
...@@ -1408,7 +1408,7 @@ Draws an arc on the canvas. ...@@ -1408,7 +1408,7 @@ Draws an arc on the canvas.
| endAngle | number | Yes | 0 | End radian of the arc. | | endAngle | number | Yes | 0 | End radian of the arc. |
| counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.| | counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1439,7 +1439,7 @@ Draws an arc on the canvas. ...@@ -1439,7 +1439,7 @@ Draws an arc on the canvas.
} }
``` ```
![en-us_image_0000001212378430](figures/en-us_image_0000001212378430.png) ![en-us_image_0000001239032429](figures/en-us_image_0000001239032429.png)
### arcTo ### arcTo
...@@ -1448,9 +1448,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1448,9 +1448,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc. Draws an arc based on the radius and points on the arc.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | --------------- | | ------ | ------ | ---- | ---- | --------------- |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc.| | x1 | number | Yes | 0 | X-coordinate of the first point on the arc.|
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.| | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.|
...@@ -1458,7 +1458,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -1458,7 +1458,7 @@ Draws an arc based on the radius and points on the arc.
| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc.| | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc.|
| radius | number | Yes | 0 | Radius of the arc. | | radius | number | Yes | 0 | Radius of the arc. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1489,7 +1489,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -1489,7 +1489,7 @@ Draws an arc based on the radius and points on the arc.
} }
``` ```
![en-us_image_0000001257138383](figures/en-us_image_0000001257138383.png) ![en-us_image_0000001193872524](figures/en-us_image_0000001193872524.png)
### ellipse ### ellipse
...@@ -1498,9 +1498,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1498,9 +1498,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region on the canvas. Draws an ellipse in the specified rectangular region on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------------- | ------- | ---- | ----- | ----------------- | | ---------------- | ------- | ---- | ----- | ----------------- |
| x | number | Yes | 0 | X-coordinate of the ellipse center. | | x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. | | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
...@@ -1509,9 +1509,9 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1509,9 +1509,9 @@ Draws an ellipse in the specified rectangular region on the canvas.
| rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. | | rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.| | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.| | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. | | counterclockwise | boolean | No | false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1541,7 +1541,7 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1541,7 +1541,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
} }
``` ```
![en-us_image_0000001256858423](figures/en-us_image_0000001256858423.png) ![en-us_image_0000001194192440](figures/en-us_image_0000001194192440.png)
### rect ### rect
...@@ -1550,16 +1550,16 @@ rect(x: number, y: number, w: number, h: number): void ...@@ -1550,16 +1550,16 @@ rect(x: number, y: number, w: number, h: number): void
Creates a rectangle on the canvas. Creates a rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ------------- | | ---- | ------ | ---- | ---- | ------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.|
| w | number | Yes | 0 | Width of the rectangle. | | w | number | Yes | 0 | Width of the rectangle. |
| h | number | Yes | 0 | Height of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1589,7 +1589,7 @@ Creates a rectangle on the canvas. ...@@ -1589,7 +1589,7 @@ Creates a rectangle on the canvas.
} }
``` ```
![en-us_image_0000001257138381](figures/en-us_image_0000001257138381.png) ![en-us_image_0000001238712445](figures/en-us_image_0000001238712445.png)
### fill ### fill
...@@ -1600,7 +1600,7 @@ Fills the area inside a closed path on the canvas. ...@@ -1600,7 +1600,7 @@ Fills the area inside a closed path on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------------- | ---- | --------- | ---------------------------------------- | | -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.| | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.|
...@@ -1632,7 +1632,7 @@ Fills the area inside a closed path on the canvas. ...@@ -1632,7 +1632,7 @@ Fills the area inside a closed path on the canvas.
} }
``` ```
![en-us_image_0000001256858421](figures/en-us_image_0000001256858421.png) ![en-us_image_0000001194192462](figures/en-us_image_0000001194192462.png)
fill(path: Path2D, fillRule?: CanvasFillRule): void fill(path: Path2D, fillRule?: CanvasFillRule): void
...@@ -1641,7 +1641,7 @@ Fills the area inside a closed path on the canvas. ...@@ -1641,7 +1641,7 @@ Fills the area inside a closed path on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------------- | ---- | --------- | ---------------------------------------- | | -------- | -------------- | ---- | --------- | ---------------------------------------- |
| path | Path2D | Yes | | A **Path2D** path to fill. | | path | Path2D | Yes | | A **Path2D** path to fill. |
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.| | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.|
...@@ -1698,11 +1698,11 @@ Sets the current path to a clipping path. ...@@ -1698,11 +1698,11 @@ Sets the current path to a clipping path.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------------- | ---- | --------- | ---------------------------------------- | | -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.| | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1735,7 +1735,7 @@ Sets the current path to a clipping path. ...@@ -1735,7 +1735,7 @@ Sets the current path to a clipping path.
} }
``` ```
![en-us_image_0000001257058441](figures/en-us_image_0000001257058441.png) ![en-us_image_0000001194032462](figures/en-us_image_0000001194032462.png)
clip(path:Path2D, fillRule?: CanvasFillRule): void clip(path:Path2D, fillRule?: CanvasFillRule): void
...@@ -1744,12 +1744,12 @@ Sets a closed path to a clipping path. ...@@ -1744,12 +1744,12 @@ Sets a closed path to a clipping path.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------------- | ---- | --------- | ---------------------------------------- | | -------- | -------------- | ---- | --------- | ---------------------------------------- |
| path | Path2D | Yes | | A **Path2D** path to clip.| | path | Path2D | Yes | | A **Path2D** path to clip.|
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.| | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1795,7 +1795,7 @@ Sets a filter for the image on the canvas. This API is a void API. ...@@ -1795,7 +1795,7 @@ Sets a filter for the image on the canvas. This API is a void API.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------ | | ------ | ------ | ---- | ---- | ------------ |
| filter | string | Yes | - | Functions that accept various filter effects.| | filter | string | Yes | - | Functions that accept various filter effects.|
...@@ -1827,13 +1827,13 @@ rotate(angle: number): void ...@@ -1827,13 +1827,13 @@ rotate(angle: number): void
Rotates a canvas clockwise around its coordinate axes. Rotates a canvas clockwise around its coordinate axes.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| | angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1863,7 +1863,7 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -1863,7 +1863,7 @@ Rotates a canvas clockwise around its coordinate axes.
} }
``` ```
![en-us_image_0000001212218478](figures/en-us_image_0000001212218478.png) ![en-us_image_0000001238952405](figures/en-us_image_0000001238952405.png)
### scale ### scale
...@@ -1872,14 +1872,14 @@ scale(x: number, y: number): void ...@@ -1872,14 +1872,14 @@ scale(x: number, y: number): void
Scales the canvas based on scale factors. Scales the canvas based on scale factors.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | Yes | 0 | Horizontal scale factor.| | x | number | Yes | 0 | Horizontal scale factor.|
| y | number | Yes | 0 | Vertical scale factor.| | y | number | Yes | 0 | Vertical scale factor.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1911,7 +1911,7 @@ Scales the canvas based on scale factors. ...@@ -1911,7 +1911,7 @@ Scales the canvas based on scale factors.
} }
``` ```
![en-us_image_0000001211898516](figures/en-us_image_0000001211898516.png) ![en-us_image_0000001193872498](figures/en-us_image_0000001193872498.png)
### transform ### transform
...@@ -1939,7 +1939,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1939,7 +1939,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
| e | number | Yes | 0 | X-axis translation.| | e | number | Yes | 0 | X-axis translation.|
| f | number | Yes | 0 | Y-axis translation.| | f | number | Yes | 0 | Y-axis translation.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -1975,7 +1975,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1975,7 +1975,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
} }
``` ```
![en-us_image_0000001212378438](figures/en-us_image_0000001212378438.png) ![en-us_image_0000001239032431](figures/en-us_image_0000001239032431.png)
### setTransform ### setTransform
...@@ -1986,7 +1986,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1986,7 +1986,7 @@ Resets the existing transformation matrix and creates a new transformation matri
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------------------- | | ---- | ------ | ---- | ---- | -------------------- |
| a | number | Yes | 0 | X-axis scale. | | a | number | Yes | 0 | X-axis scale. |
| b | number | Yes | 0 | X-axis skew. | | b | number | Yes | 0 | X-axis skew. |
...@@ -1995,7 +1995,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1995,7 +1995,7 @@ Resets the existing transformation matrix and creates a new transformation matri
| e | number | Yes | 0 | X-axis translation.| | e | number | Yes | 0 | X-axis translation.|
| f | number | Yes | 0 | Y-axis translation.| | f | number | Yes | 0 | Y-axis translation.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2031,22 +2031,20 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -2031,22 +2031,20 @@ Resets the existing transformation matrix and creates a new transformation matri
![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png) ![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png)
### translate
### translate ### translate
translate(x: number, y: number): void translate(x: number, y: number): void
Moves the origin of the coordinate system. Moves the origin of the coordinate system.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | Yes | 0 | X-axis translation.| | x | number | Yes | 0 | X-axis translation.|
| y | number | Yes | 0 | Y-axis translation.| | y | number | Yes | 0 | Y-axis translation.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2090,9 +2088,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: ...@@ -2090,9 +2088,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
Draws an image on the canvas. Draws an image on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----- | ---------------------------------------- | ---- | ---- | ----------------------------- | | ----- | ---------------------------------------- | ---- | ---- | ----------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.| | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.|
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
...@@ -2104,8 +2102,7 @@ Draws an image on the canvas. ...@@ -2104,8 +2102,7 @@ Draws an image on the canvas.
| dw | number | No | 0 | Width of the drawing area. | | dw | number | No | 0 | Width of the drawing area. |
| dh | number | No | 0 | Height of the drawing area. | | dh | number | No | 0 | Height of the drawing area. |
**Example**
**Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2134,7 +2131,7 @@ Draws an image on the canvas. ...@@ -2134,7 +2131,7 @@ Draws an image on the canvas.
} }
``` ```
![en-us_image_0000001256978377](figures/en-us_image_0000001256978377.png) ![en-us_image_0000001238712447](figures/en-us_image_0000001238712447.png)
### createImageData ### createImageData
...@@ -2143,9 +2140,9 @@ createImageData(sw: number, sh: number): ImageData ...@@ -2143,9 +2140,9 @@ createImageData(sw: number, sh: number): ImageData
Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions. Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ------------- | | ---- | ------ | ---- | ---- | ------------- |
| sw | number | Yes | 0 | Width of the **ImageData** object.| | sw | number | Yes | 0 | Width of the **ImageData** object.|
| sh | number | Yes | 0 | Height of the **ImageData** object.| | sh | number | Yes | 0 | Height of the **ImageData** object.|
...@@ -2155,9 +2152,9 @@ createImageData(imageData: ImageData): ImageData ...@@ -2155,9 +2152,9 @@ createImageData(imageData: ImageData): ImageData
Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object. Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- | | --------- | ---------------------------------------- | ---- | ---- | ---------------- |
| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object to copy.| | imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object to copy.|
...@@ -2173,9 +2170,9 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -2173,9 +2170,9 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas. Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.|
| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.|
...@@ -2195,9 +2192,9 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2195,9 +2192,9 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas. Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.|
| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.|
...@@ -2210,7 +2207,6 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi ...@@ -2210,7 +2207,6 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
| ---------------------------------------- | ------------- | | ---------------------------------------- | ------------- |
| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| | [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
**Example** **Example**
```ts ```ts
...@@ -2254,9 +2250,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: ...@@ -2254,9 +2250,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas. Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----------- | ------ | ---- | ------------ | ----------------------------- | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. | | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. |
| dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. | | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
...@@ -2266,7 +2262,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang ...@@ -2266,7 +2262,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
| dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. | | dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. |
| dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. | | dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. |
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2301,7 +2297,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang ...@@ -2301,7 +2297,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
} }
``` ```
![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png) ![en-us_image_0000001194192464](figures/en-us_image_0000001194192464.png)
### setLineDash ### setLineDash
...@@ -2311,7 +2307,7 @@ Sets the dash line style. ...@@ -2311,7 +2307,7 @@ Sets the dash line style.
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | ------------------- | | -------- | -------- | ------------------- |
| segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.| | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
...@@ -2457,9 +2453,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality) ...@@ -2457,9 +2453,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
Sets the quality of image smoothing. This API is a void API. Sets the quality of image smoothing. This API is a void API.
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------- | --------------------- | ---------------------------------------- | | ------- | --------------------- | ---------------------------------------- |
| quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.| | quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.|
...@@ -2476,8 +2472,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O ...@@ -2476,8 +2472,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O
| ---------------------------------------- | --------------- | | ---------------------------------------- | --------------- |
| [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.| | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.|
**Example**
**Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2520,7 +2515,7 @@ restore(): void ...@@ -2520,7 +2515,7 @@ restore(): void
Restores the saved drawing context. Restores the saved drawing context.
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2561,7 +2556,7 @@ save(): void ...@@ -2561,7 +2556,7 @@ save(): void
Saves the current drawing context. Saves the current drawing context.
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2602,16 +2597,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2602,16 +2597,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
Creates a linear gradient. Creates a linear gradient.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x0 | number | Yes | 0 | X-coordinate of the start point.| | x0 | number | Yes | 0 | X-coordinate of the start point.|
| y0 | number | Yes | 0 | Y-coordinate of the start point.| | y0 | number | Yes | 0 | Y-coordinate of the start point.|
| x1 | number | Yes | 0 | X-coordinate of the end point.| | x1 | number | Yes | 0 | X-coordinate of the end point.|
| y1 | number | Yes | 0 | Y-coordinate of the end point.| | y1 | number | Yes | 0 | Y-coordinate of the end point.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2645,7 +2640,7 @@ Creates a linear gradient. ...@@ -2645,7 +2640,7 @@ Creates a linear gradient.
} }
``` ```
![en-us_image_0000001212378434](figures/en-us_image_0000001212378434.png) ![en-us_image_0000001194352460](figures/en-us_image_0000001194352460.png)
### createRadialGradient ### createRadialGradient
...@@ -2654,9 +2649,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2654,9 +2649,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
Creates a linear gradient. Creates a linear gradient.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------------- | | ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. |
| y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. |
...@@ -2665,7 +2660,7 @@ Creates a linear gradient. ...@@ -2665,7 +2660,7 @@ Creates a linear gradient.
| y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. | | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
| r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.| | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
...@@ -2699,7 +2694,7 @@ Creates a linear gradient. ...@@ -2699,7 +2694,7 @@ Creates a linear gradient.
} }
``` ```
![en-us_image_0000001212218480](figures/en-us_image_0000001212218480.png) ![en-us_image_0000001238952407](figures/en-us_image_0000001238952407.png)
## CanvasPattern ## CanvasPattern
......
...@@ -4,19 +4,14 @@ ...@@ -4,19 +4,14 @@
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Description |
| ---- | ------ | ---- | ------------------ | | -----| -------- | ----------------------------- |
| id | string | '' | Unique ID you assigned to the component.| | id | string | Unique ID you assigned to the component.<br>Default value: **''**|
## APIs ## APIs
...@@ -26,101 +21,109 @@ None ...@@ -26,101 +21,109 @@ None
getInspectorByKey(id: string): string getInspectorByKey(id: string): string
Obtains all attributes of the component with the specified ID, excluding the information about child components. This is a system API. Obtains all attributes of the component with the specified ID, excluding the information about child components.
This is a system API.
**Parameters**
- Parameters | Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Default Value | Description | | ---- | -------- | ---- | -------------|
| ---- | ------ | ---- | ---- | ----------- | | id | string | Yes | ID of the component whose attributes are to be obtained.|
| id | string | Yes | - | ID of the component whose attributes are to be obtained.|
- Return value **Return value**
| Type | Description |
| ------ | --------------- | | Type | Description |
| string | JSON string of the component attribute list.| | -------| -------------- |
| string | JSON string of the component attribute list.|
### getInspectorTree ### getInspectorTree
getInspectorTree(): string getInspectorTree(): string
Obtains the component tree and component attributes. This is a system API. Obtains the component tree and component attributes.
This is a system API.
- Return value **Return value**
| Type | Description | | Type | Description |
| ------ | ------------------- | | ------ | --------------------------- |
| string | JSON string of the component tree and component attribute list.| | string | JSON string of the component tree and component attribute list.|
### sendEventByKey ### sendEventByKey
sendEventByKey(id: string, action: number, params: string): boolean sendEventByKey(id: string, action: number, params: string): boolean
Sends an event to the component with the specified ID. This is a system API. Sends an event to the component with the specified ID.
This is a system API.
**Parameters**
| Name | Type | Mandatory | Description |
| ------ | -------| ---- | -------------------------- |
| id | string | Yes | ID of the component to which the event is to be sent. |
| action | number | Yes | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long-click event.|
| params | string | Yes | Event parameters. If there is no parameter, pass an empty string **""**. |
- Parameters **Return value**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| id | string | Yes | - | ID of the component to which the event is to be sent. |
| action | number | Yes | - | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long click event.|
| params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. |
- Return value | Type | Description |
| Type | Description | | -------- | --------------------------|
| ------- | ------------------------------ | | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
| boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
### sendTouchEvent ### sendTouchEvent
sendTouchEvent(event: TouchObject): boolean sendTouchEvent(event: TouchObject): boolean
Sends a touch event. This is a system API. Sends a touch event.
This is a system API.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Description |
| ----- | ----------- | ---- | ---- | ---------------------------------------- | | ----- | ----------- | ---- | ------------------------------------------------------------ |
| event | TouchObject | Yes | - | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).| | event | [TouchObject](ts-universal-events-touch.md#touchobject) | Yes | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
- Return value **Return value**
| Type | Description | | Type | Description |
| ------- | -------------------------- | | ------- | ---------------------------|
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
### sendKeyEvent ### sendKeyEvent
sendKeyEvent(event: KeyEvent): boolean sendKeyEvent(event: KeyEvent): boolean
Sends a key event. This is a system API. Sends a key event.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Description |
| ----- | -------- | ---- | ---- | ---------------------------------------- | | ----- | -------- | ---- | ------------------------------------------------------------ |
| event | KeyEvent | Yes | - | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).| | event | [KeyEvent](ts-universal-events-key.md#keyevent) | Yes | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
- Return value **Return value**
| Type | Description | | Type | Description |
| ------- | --------------------------- | | ------- | ------------------------------|
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
### sendMouseEvent ### sendMouseEvent
sendMouseEvent(event: MouseEvent): boolean sendMouseEvent(event: MouseEvent): boolean
Sends a mouse event. This is a system API. Sends a mouse event.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Description |
| ----- | ---------- | ---- | ---- | ---------------------------------------- | | ----- | ---------- | ---- | --------------------------------------- |
| event | MouseEvent | Yes | - | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).| | event | [MouseEvent](ts-universal-mouse-key.md#mouseevent) | Yes | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
- Return value **Return value**
| Type | Description | | Type | Description |
| ------- | --------------------------- | | ------- | ---------------------------------- |
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
## Example ## Example
...@@ -133,6 +136,7 @@ class Utils { ...@@ -133,6 +136,7 @@ class Utils {
static rect_bottom; static rect_bottom;
static rect_value; static rect_value;
// Obtain the coordinates of the rectangular area occupied by the component.
static getComponentRect(key) { static getComponentRect(key) {
let strJson = getInspectorByKey(key); let strJson = getInspectorByKey(key);
let obj = JSON.parse(strJson); let obj = JSON.parse(strJson);
...@@ -172,32 +176,32 @@ struct IdExample { ...@@ -172,32 +176,32 @@ struct IdExample {
console.info(getInspectorTree()) console.info(getInspectorTree())
this.text = "Button 'click to start' is clicked" this.text = "Button 'click to start' is clicked"
setTimeout(() => { setTimeout(() => {
sendEventByKey("longclick", 11, "") sendEventByKey("longClick", 11, "") // Send a long-click event to the component whose ID is "longClick".
}, 2000) }, 2000)
}).id('click') }).id('click')
Button() { Button() {
Text('longclick').fontSize(25).fontWeight(FontWeight.Bold) Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 }).backgroundColor('#0D9FFB') }.margin({ top: 20 }).backgroundColor('#0D9FFB')
.gesture( .gesture(
LongPressGesture().onActionEnd(() => { LongPressGesture().onActionEnd(() => {
console.info('long clicked') console.info('long clicked')
this.text = "Button 'longclick' is longclicked" this.text = "Button 'longClick' is longclicked"
setTimeout(() => { setTimeout(() => {
let rect = Utils.getComponentRect('onTouch') let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch".
let touchPoint: TouchObject = { let touchPoint: TouchObject = {
id: 1, id: 1,
x: rect.left + (rect.right - rect.left) / 2, x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
y: rect.top + (rect.bottom - rect.top) / 2, y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
type: TouchType.Down, type: TouchType.Down,
screenX: rect.left + (rect.right - rect.left) / 2, screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
screenY: rect.left + (rect.right - rect.left) / 2, screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate of the component center.
} }
sendTouchEvent(touchPoint) sendTouchEvent(touchPoint) // Send a touch event.
touchPoint.type = TouchType.Up touchPoint.type = TouchType.Up
sendTouchEvent(touchPoint) sendTouchEvent(touchPoint) // Send a touch event.
}, 2000) }, 2000)
})).id('longclick') })).id('longClick')
Button() { Button() {
Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold) Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
...@@ -206,14 +210,14 @@ struct IdExample { ...@@ -206,14 +210,14 @@ struct IdExample {
console.info('onTouch is clicked') console.info('onTouch is clicked')
this.text = "Button 'onTouch' is clicked" this.text = "Button 'onTouch' is clicked"
setTimeout(() => { setTimeout(() => {
let rect = Utils.getComponentRect('onMouse') let rect = Utils.getComponentRect('onMouse') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse".
let mouseEvent: MouseEvent = { let mouseEvent: MouseEvent = {
button: MouseButton.Left, button: MouseButton.Left,
action: MouseAction.Press, action: MouseAction.Press,
x: rect.left + (rect.right - rect.left) / 2, x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
y: rect.top + (rect.bottom - rect.top) / 2, y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
screenX: rect.left + (rect.right - rect.left) / 2, screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
screenY: rect.top + (rect.bottom - rect.top) / 2, screenY: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
timestamp: 1, timestamp: 1,
target: { target: {
area: { area: {
...@@ -231,7 +235,7 @@ struct IdExample { ...@@ -231,7 +235,7 @@ struct IdExample {
}, },
source: SourceType.Mouse source: SourceType.Mouse
} }
sendMouseEvent(mouseEvent) sendMouseEvent(mouseEvent) // Send a mouse event.
}, 2000) }, 2000)
}).id('onTouch') }).id('onTouch')
...@@ -251,7 +255,7 @@ struct IdExample { ...@@ -251,7 +255,7 @@ struct IdExample {
metaKey: 0, metaKey: 0,
timestamp: 0 timestamp: 0
} }
sendKeyEvent(keyEvent) sendKeyEvent(keyEvent) // Send a key event.
}, 2000) }, 2000)
}).id('onMouse') }).id('onMouse')
......
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
| Name | Type | Description | | Name | Type | Description |
| ---------- | ---------------------------------------- | ---------------------------------------- | | ---------- | ---------------------------------------- | ---------------------------------------- |
| flexBasis | string \| number | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)| | flexBasis | string \| number | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0** | | flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0** |
| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>Default value: **1** | | flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**. |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | he default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto** | | alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
## Example ## Example
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
@Entry @Entry
@Component @Component
struct FlexExample { struct FlexExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
...@@ -109,4 +108,4 @@ struct FlexExample { ...@@ -109,4 +108,4 @@ struct FlexExample {
} }
``` ```
![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png) ![en-us_image_0000001219744197](figures/en-us_image_0000001219744197.png)
...@@ -12,7 +12,7 @@ You can set the opacity of a component. ...@@ -12,7 +12,7 @@ You can set the opacity of a component.
| Name | Type | Description | | Name | Type | Description |
| ------- | ---------------------------------------- | ---------------------------------------- | | ------- | ---------------------------------------- | ---------------------------------------- |
| opacity | number \| [Resource](ts-types.md#resource) | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.<br/>**NOTE**<br/>A child component can inherit this attribute of its parent component.<br>Default value: **1** | | opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.<br>**NOTE**<br>A child component can inherit this attribute of its parent component. Default value: **1**|
## Example ## Example
...@@ -30,6 +30,10 @@ struct OpacityExample { ...@@ -30,6 +30,10 @@ struct OpacityExample {
Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
} }
.width('100%') .width('100%')
.padding({ top: 5 }) .padding({ top: 5 })
...@@ -37,4 +41,4 @@ struct OpacityExample { ...@@ -37,4 +41,4 @@ struct OpacityExample {
} }
``` ```
![en-us_image_0000001256858385](figures/en-us_image_0000001256858385.gif) ![opacity.png](figures/opacity.png)
# Adding Title and Paragraph Text # Adding Title and Paragraph Text
The **\<text>** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **\<text>** component and add the text to be displayed between the **\<text>** and **\</text>** tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
The &lt;text&gt; component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a &lt;text&gt; component and add the text to be displayed between the &lt;text&gt; and &lt;/text&gt; tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
``` ```
...@@ -15,15 +13,16 @@ The &lt;text&gt; component is most commonly used to display text in title and pa ...@@ -15,15 +13,16 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
``` ```
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
margin-top: 20px; margin-top: 20px;
margin-left: 30px; margin-left: 30px;
font-weight: 700;
} }
.title-text { .title-text {
width: 95%;
color: #1a1a1a; color: #1a1a1a;
font-size: 50px; font-size: 50px;
margin-top: 40px; margin-top: 40px;
...@@ -37,14 +36,15 @@ The &lt;text&gt; component is most commonly used to display text in title and pa ...@@ -37,14 +36,15 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
``` ```
``` ```
// xxx.js // xxx.js
export default { export default {
data: { data: {
headTitle: 'Capture the Beauty in This Moment', headTitle: 'Capture the Beauty in Moment',
paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.', paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.', paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
}, },
} }
``` ```
![en-us_image_0000001118642600](figures/en-us_image_0000001118642600.PNG)
# &lt;grid-container&gt; Development # Grid Layout
The **&lt;grid-container&gt;** component is the root container of the grid layout. Within the root container, you can use **&lt;grid-row&gt;** and **&lt;grid-col&gt;** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md). The **\<grid-container>** component is the root container of the grid layout. Within the root container, you can use **\<grid-row>** and **\<grid-col>** for the grid layout. For details, see [Grid-container](../reference/arkui-js/js-components-grid-container.md).
## Creating a &lt;grid-container&gt; Component ## Creating a \<grid-container> Component
Create a **&lt;grid-container&gt;** component in the .hml file under **pages/index** and add a [**&lt;grid-row&gt;**](../reference/arkui-js/js-components-grid-row.md) child component. Create a **\<grid-container>** component in the .hml file under **pages/index** and add a [\<Grid-row>](../reference/arkui-js/js-components-grid-row.md) child component.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
...@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind ...@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -35,16 +35,17 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind ...@@ -35,16 +35,17 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png) ![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component. >
> **\<grid-container>** supports only **\<grid-row>** as a child component.
## Methods ## Methods
Click the **&lt;grid-container&gt;** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**). Touch the **\<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
...@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get ...@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get ...@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -108,12 +109,12 @@ export default { ...@@ -108,12 +109,12 @@ export default {
![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif) ![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif)
## Adding &lt;grid-col&gt; ## Adding \<grid-col>
After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout. After adding a **\<grid-row>** child component to **\<grid-container>**, add a **\<grid-col>** child component to **\<grid-row>** to form a layout.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType"> <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
...@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;* ...@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;*
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -165,8 +166,9 @@ text{ ...@@ -165,8 +166,9 @@ text{
![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**. >
> **\<grid-row>** supports only **\<grid-col>** as a child component. You can add content only to **\<grid-col>**.
## Example Scenario ## Example Scenario
...@@ -174,7 +176,7 @@ text{ ...@@ -174,7 +176,7 @@ text{
In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data. In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <refresh refreshing="{{fresh}}" onrefresh="refresh">
...@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l ...@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -211,7 +213,7 @@ text{ ...@@ -211,7 +213,7 @@ text{
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -241,10 +243,4 @@ export default { ...@@ -241,10 +243,4 @@ export default {
``` ```
![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif) ![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
\ No newline at end of file
## Samples
The following sample is provided to help you better understand how to develop the **\<grid>** component:
[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
\ No newline at end of file
# OffscreenCanvas # OffscreenCanvasRenderingContext2D
**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas, which is a new buffer created by the GPU outside of the current buffer. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md).
Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style. In the following example, you first create an offscreen canvas, and then create a **getContext2d** object on the canvas, which is an image, and finally set the **filter** attribute for the image.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -24,11 +23,11 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the ...@@ -24,11 +23,11 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -48,9 +47,7 @@ select{ ...@@ -48,9 +47,7 @@ select{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -75,12 +72,10 @@ export default { ...@@ -75,12 +72,10 @@ export default {
this.img.onerror = function() { this.img.onerror = function() {
prompt.showToast({message:"error",duration:2000}) prompt.showToast({message:"error",duration:2000})
}; };
var bitmap = this.offscreen.transferToImageBitmap(); var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap);
this.ctx.transferFromImageBitmap(bitmap);
}, },
change(e){ change(e){
this.offCanvas.filter = e.newValue; this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
var bitmap = this.offscreen.transferToImageBitmap(); var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap); this.ctx.transferFromImageBitmap(bitmap);
}, },
...@@ -93,10 +88,10 @@ export default { ...@@ -93,10 +88,10 @@ export default {
## Determining the Position ## Determining the Position
Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path. Use **isPointInPath** to determine whether a coordinate is within the path area and use **isPointInStroke** to determine whether a coordinate is on the edge of the path.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -110,9 +105,11 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co ...@@ -110,9 +105,11 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -143,7 +140,7 @@ button{ ...@@ -143,7 +140,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -188,4 +185,4 @@ export default { ...@@ -188,4 +185,4 @@ export default {
} }
``` ```
![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif) ![en-us_image_0000001178084014](figures/en-us_image_0000001178084014.gif)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册