Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 7732f06b 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19724 【4.0-Beta1】翻译完成 18844+18875+18867+19409+19574+18935+19101+19087 

Merge pull request !19724 from ester.zhou/C4-0614
上级 b6833871 9ae5193f
显示空白变更内容
内联 并排
Showing with 1180 addition and 987 deletion
en/application-dev/application-models/accessibilityextensionability.md
浏览文件 @ 7732f06b
# AccessibilityExtensionAbility Development # AccessibilityExtensionAbility
The **AccessibilityExtensionAbility** module provides accessibility extension capabilities based on the **ExtensionAbility** framework. You can develop your accessibility applications by applying the **AccessibilityExtensionAbility** template to enhance usability. The **AccessibilityExtensionAbility** module provides accessibility extension capabilities based on the **ExtensionAbility** framework. You can develop your accessibility applications by applying the **AccessibilityExtensionAbility** template to enhance usability.
...@@ -10,14 +10,6 @@ The **AccessibilityExtensionAbility** module provides accessibility extension ca ...@@ -10,14 +10,6 @@ The **AccessibilityExtensionAbility** module provides accessibility extension ca
> >
> Model: stage > Model: stage
This document is organized as follows:
- [AccessibilityExtensionAbility Overview](#accessibilityextensionability-overview)
- [Creating an Accessibility Extension Service](#creating-an-accessibility-extension-service)
- [Processing an Accessibility Event](#processing-an-accessibility-event)
- [Declaring Capabilities of Accessibility Extension Services](#declaring-capabilities-of-accessibility-extension-services)
- [Enabling a Custom Accessibility Extension Service](#enabling-a-custom-accessibility-extension-service)
## AccessibilityExtensionAbility Overview ## AccessibilityExtensionAbility Overview
Accessibility is about giving equal access to everyone so that they can access and use information equally and conveniently under any circumstances. It helps narrow the digital divide between people of different classes, regions, ages, and health status in terms of information understanding, information exchange, and information utilization, so that they can participate in social life more conveniently and enjoy the benefits of technological advances. Accessibility is about giving equal access to everyone so that they can access and use information equally and conveniently under any circumstances. It helps narrow the digital divide between people of different classes, regions, ages, and health status in terms of information understanding, information exchange, and information utilization, so that they can participate in social life more conveniently and enjoy the benefits of technological advances.
......
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 7732f06b
# Enums # Enums
>**NOTE**
>
>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Color ## Color
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Color | Value | Illustration | | Color | Value | Illustration |
| ------------------------ | -------- | ------------------------------------------------------------ | | ------------------------ | ------------- | ---------------------------------------- |
| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) | | Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) | | Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) | | Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
...@@ -24,7 +28,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -24,7 +28,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | ------------------------------------------------------------ | | --------- | ------------------------------- |
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.| | Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
| Auto | The image is scaled automatically to fit the display area. | | Auto | The image is scaled automatically to fit the display area. |
...@@ -37,7 +41,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -37,7 +41,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ----------------------------------------------- | | ------ | ----------------------------- |
| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
| Dashed | Dashed border. | | Dashed | Dashed border. |
| Solid | Solid border. | | Solid | Solid border. |
...@@ -47,7 +51,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -47,7 +51,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----- | -------------------- | | ----- | ---------- |
| Bevel | Bevel is used to connect paths.| | Bevel | Bevel is used to connect paths.|
| Miter | Miter is used to connect paths.| | Miter | Miter is used to connect paths.|
| Round | Round is used to connect paths.| | Round | Round is used to connect paths.|
...@@ -55,7 +59,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -55,7 +59,7 @@ Since API version 9, this API is supported in ArkTS widgets.
## TouchType ## TouchType
| Name | Description | | Name | Description |
| ------ | ------------------------------ | | ------ | --------------- |
| Down | A finger is pressed. | | Down | A finger is pressed. |
| Up | A finger is lifted. | | Up | A finger is lifted. |
| Move | A finger moves on the screen in pressed state.| | Move | A finger moves on the screen in pressed state.|
...@@ -64,7 +68,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -64,7 +68,7 @@ Since API version 9, this API is supported in ArkTS widgets.
## MouseButton ## MouseButton
| Name | Description | | Name | Description |
| ------- | ---------------- | | ------- | -------- |
| Left | Left button on the mouse. | | Left | Left button on the mouse. |
| Right | Right button on the mouse. | | Right | Right button on the mouse. |
| Middle | Middle button on the mouse. | | Middle | Middle button on the mouse. |
...@@ -75,7 +79,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -75,7 +79,7 @@ Since API version 9, this API is supported in ArkTS widgets.
## MouseAction ## MouseAction
| Name | Description | | Name | Description |
| ------- | -------------- | | ------- | ------- |
| Press | The mouse button is pressed.| | Press | The mouse button is pressed.|
| Release | The mouse button is released.| | Release | The mouse button is released.|
| Move | The mouse cursor moves. | | Move | The mouse cursor moves. |
...@@ -86,17 +90,17 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -86,17 +90,17 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------------------- | ------------------------------------------------------------ | | ------------------- | ---------------------------------------- |
| Linear | The animation speed keeps unchanged. | | Linear | The animation speed keeps unchanged. |
| Ease | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.| | Ease | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.|
| EaseIn | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. | | EaseIn | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.|
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. | | EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.|
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.| | EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). | | FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). | | LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). | | FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). | | ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). | | Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).|
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). | | Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). | | Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Friction | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0). | | Friction | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0). |
...@@ -106,7 +110,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -106,7 +110,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 10, this API is supported in ArkTS widgets. Since API version 10, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | ------------------ | | ------- | --------- |
| Initial | The animation is in the initial state. | | Initial | The animation is in the initial state. |
| Running | The animation is being played.| | Running | The animation is being played.|
| Paused | The animation is paused.| | Paused | The animation is paused.|
...@@ -117,8 +121,8 @@ Since API version 10, this API is supported in ArkTS widgets. ...@@ -117,8 +121,8 @@ Since API version 10, this API is supported in ArkTS widgets.
Since API version 10, this API is supported in ArkTS widgets. Since API version 10, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | ------------------------------------------------------------ | | --------- | ---------------------------------------- |
| None | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.| | None | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state. |
| Forwards | The target component retains the state set by the last keyframe encountered during execution of the animation. | | Forwards | The target component retains the state set by the last keyframe encountered during execution of the animation. |
| Backwards | The animation applies the values defined in the first relevant keyframe once it is applied to the target component, and retains the values during the period set by **delay**. The first relevant keyframe depends on the value of **playMode**. If **playMode** is **Normal** or **Alternate**, the first relevant keyframe is in the **from** state. If **playMode** is **Reverse** or **AlternateReverse**, the first relevant keyframe is in the **to** state.| | Backwards | The animation applies the values defined in the first relevant keyframe once it is applied to the target component, and retains the values during the period set by **delay**. The first relevant keyframe depends on the value of **playMode**. If **playMode** is **Normal** or **Alternate**, the first relevant keyframe is in the **from** state. If **playMode** is **Reverse** or **AlternateReverse**, the first relevant keyframe is in the **to** state.|
| Both | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.| | Both | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.|
...@@ -128,7 +132,7 @@ Since API version 10, this API is supported in ArkTS widgets. ...@@ -128,7 +132,7 @@ Since API version 10, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ---------------- | ------------------------------------------------------------ | | ---------------- | ---------------------------------------- |
| Normal | The animation is played forwards. | | Normal | The animation is played forwards. |
| Reverse | The animation is played backwards. | | Reverse | The animation is played backwards. |
| Alternate | The animation is played forwards for an odd number of times (1, 3, 5...) and backwards for an even number of times (2, 4, 6...).| | Alternate | The animation is played forwards for an odd number of times (1, 3, 5...) and backwards for an even number of times (2, 4, 6...).|
...@@ -136,34 +140,34 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -136,34 +140,34 @@ Since API version 9, this API is supported in ArkTS widgets.
## KeyType ## KeyType
| Name| Description | | Name | Description |
| ---- | ---------- | | ---- | ----- |
| Down | The key is pressed.| | Down | The key is pressed.|
| Up | The key is released.| | Up | The key is released.|
## KeySource ## KeySource
| Name | Description | | Name | Description |
| -------- | -------------------- | | -------- | ---------- |
| Unknown | Unknown input device. | | Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard.| | Keyboard | The input device is a keyboard.|
## Edge ## Edge
| Name | Description | | Name | Description |
| -------- | ---------------------- | | -------------------------------- | ---------------------------------------- |
| Top | Top edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.| | Top | Top edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Center<sup>(deprecated) </sup> | Center position in the vertical direction.<br> This API is deprecated since API version 9.| | Center<sup>(deprecated) </sup> | Center position in the vertical direction.<br> This API is deprecated since API version 9. |
| Bottom | Bottom edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.| | Bottom | Bottom edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9.| | Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9. |
| Start | Start position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.| | Start | Start position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Middle<sup>(deprecated) </sup> | Center position in the horizontal direction.<br> This API is deprecated since API version 9.| | Middle<sup>(deprecated) </sup> | Center position in the horizontal direction.<br> This API is deprecated since API version 9. |
| End | End position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.| | End | End position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
## Week ## Week
| Name | Description | | Name | Description |
| -------- | ---------------------- | | ---- | ---- |
| Mon | Monday. | | Mon | Monday. |
| Tue | Tuesday. | | Tue | Tuesday. |
| Wed | Wednesday. | | Wed | Wednesday. |
...@@ -176,8 +180,8 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -176,8 +180,8 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name| Description | | Name | Description |
| ---- | ---------------------- | | ---- | ----------- |
| Ltr | Components are arranged from left to right. | | Ltr | Components are arranged from left to right. |
| Rtl | Components are arranged from right to left. | | Rtl | Components are arranged from right to left. |
| Auto | The default layout direction is used.| | Auto | The default layout direction is used.|
...@@ -186,8 +190,8 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -186,8 +190,8 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name| Description | | Name | Description |
| ---- | -------------------------------- | | ---- | ------------------ |
| Off | Not displayed. | | Off | Not displayed. |
| On | Always displayed. | | On | Always displayed. |
| Auto | Displayed when the screen is touched and hidden after 2s.| | Auto | Displayed when the screen is touched and hidden after 2s.|
...@@ -197,7 +201,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -197,7 +201,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------------------------------------------ | | ------ | ---------------------------------------- |
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.| | Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
| Fade | Fade effect. When at one of the edges, the component produces a fade effect. | | Fade | Fade effect. When at one of the edges, the component produces a fade effect. |
| None | No effect when the component is at one of the edges. | | None | No effect when the component is at one of the edges. |
...@@ -207,7 +211,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -207,7 +211,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ---------------- | | ----------- | -------- |
| TopStart | Top start. | | TopStart | Top start. |
| Top | Horizontally centered on the top. | | Top | Horizontally centered on the top. |
| TopEnd | Top end. | | TopEnd | Top end. |
...@@ -223,7 +227,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -223,7 +227,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------------------------------------- | | ------ | ------------------------------ |
| All | The transition takes effect in all scenarios.| | All | The transition takes effect in all scenarios.|
| Insert | The transition takes effect when a component is inserted or displayed.| | Insert | The transition takes effect when a component is inserted or displayed.|
| Delete | The transition takes effect when a component is deleted or hidden.| | Delete | The transition takes effect when a component is deleted or hidden.|
...@@ -231,16 +235,16 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -231,16 +235,16 @@ Since API version 9, this API is supported in ArkTS widgets.
## RelateType ## RelateType
| Name | Description | | Name | Description |
| ------ | ------------------------------- | | ---- | -------------- |
| FILL | The current child component is scaled to fill the parent component. | | FILL | The current child component is scaled to fill the parent component.|
| FIT | The current child component is scaled to adapt to the parent component. | | FIT | The current child component is scaled to adapt to the parent component.|
## Visibility ## Visibility
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | -------------------------------- | | ------- | ---------------- |
| Hidden | The component is hidden, and a placeholder is used for it in the layout. | | Hidden | The component is hidden, and a placeholder is used for it in the layout. |
| Visible | The component is visible. | | Visible | The component is visible. |
| None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.| | None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
...@@ -250,9 +254,9 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -250,9 +254,9 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------- | | ------ | ----------------------------- |
| Butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints.| | Butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints. |
| Round | The line is extended at the endpoints by a half circle whose diameter is equal to the line width.| | Round | The line is extended at the endpoints by a half circle whose diameter is equal to the line width. |
| Square | The line is extended at the endpoints by a rectangle whose width is equal to half the line width and height equal to the line width.| | Square | The line is extended at the endpoints by a rectangle whose width is equal to half the line width and height equal to the line width.|
## Axis ## Axis
...@@ -260,7 +264,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -260,7 +264,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ---------- | ------------ | | ---------- | ------ |
| Vertical | Vertical direction.| | Vertical | Vertical direction.|
| Horizontal | Horizontal direction.| | Horizontal | Horizontal direction.|
...@@ -269,7 +273,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -269,7 +273,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------ | | ------ | ------------ |
| Start | Aligned with the start edge in the same direction as the language in use.| | Start | Aligned with the start edge in the same direction as the language in use.|
| Center | Aligned with the center. This is the default alignment mode.| | Center | Aligned with the center. This is the default alignment mode.|
| End | Aligned with the end edge in the same direction as the language in use. | | End | Aligned with the end edge in the same direction as the language in use. |
...@@ -279,10 +283,10 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -279,10 +283,10 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------------ | ------------------------------------------------------------ | | ------------ | ---------------------------------------- |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.| | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.| | Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.| | End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.| | SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.|
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.| | SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.|
| SpaceEvenly | The child components are evenly distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between any two adjacent components are the same.| | SpaceEvenly | The child components are evenly distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between any two adjacent components are the same.|
...@@ -292,7 +296,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -292,7 +296,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | ------------------------------------------------------------ | | -------- | ---------------------------------------- |
| Auto | The default configuration of the flex container is used. | | Auto | The default configuration of the flex container is used. |
| Start | The items in the flex container are aligned with the cross-start edge. | | Start | The items in the flex container are aligned with the cross-start edge. |
| Center | The items in the flex container are centered along the cross axis. | | Center | The items in the flex container are centered along the cross axis. |
...@@ -305,18 +309,18 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -305,18 +309,18 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------------- | ------------------------------ | | ------------- | ---------------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows.| | Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. | | RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns.| | Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction. | | ColumnReverse | The child components are arranged opposite to the **Column** direction.|
## FlexWrap ## FlexWrap
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ------------------------------------------------- | | ----------- | --------------------------- |
| NoWrap | The child components in the flex container are arranged in a single line, and they cannot overflow. | | NoWrap | The child components in the flex container are arranged in a single line, and they cannot overflow. |
| Wrap | The child components in the flex container are arranged in multiple lines, and they may overflow. | | Wrap | The child components in the flex container are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the flex container are reversely arranged in multiple lines, and they may overflow.| | WrapReverse | The child components in the flex container are reversely arranged in multiple lines, and they may overflow.|
...@@ -326,7 +330,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -326,7 +330,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ------------------------ | | ------ | ------------ |
| Top | Top aligned. | | Top | Top aligned. |
| Center | Center aligned. This is the default alignment mode.| | Center | Center aligned. This is the default alignment mode.|
| Bottom | Bottom aligned. | | Bottom | Bottom aligned. |
...@@ -336,7 +340,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -336,7 +340,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| -------- | -------------------------- | | -------- | ------------- |
| X | The image is repeatedly drawn only along the horizontal axis.| | X | The image is repeatedly drawn only along the horizontal axis.|
| Y | The image is repeatedly drawn only along the vertical axis.| | Y | The image is repeatedly drawn only along the vertical axis.|
| XY | The image is repeatedly drawn along both axes. | | XY | The image is repeatedly drawn along both axes. |
...@@ -347,7 +351,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -347,7 +351,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Type | Description | | Type | Description |
| ------- | ------------------------------------------------------------ | | ------- | ----------------------------------- |
| Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.| | Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Auto | The original image aspect ratio is retained. | | Auto | The original image aspect ratio is retained. |
...@@ -357,7 +361,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -357,7 +361,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ---------- | | ----------- | ----- |
| Left | The gradient direction is from right to left.| | Left | The gradient direction is from right to left.|
| Top | The gradient direction is from bottom to top.| | Top | The gradient direction is from bottom to top.|
| Right | The gradient direction is from left to right.| | Right | The gradient direction is from left to right.|
...@@ -371,16 +375,16 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -371,16 +375,16 @@ Since API version 9, this API is supported in ArkTS widgets.
## SharedTransitionEffectType ## SharedTransitionEffectType
| Name | Description | | Name | Description |
| ----------- | ---------- | | -------- | ---------------------------------------- |
| Static | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.| | Static | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.|
| Exchange | The element is relocated and scaled properly on the target page.| | Exchange | The element is relocated and scaled properly on the target page. |
## FontStyle ## FontStyle
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | ---------------- | | ------ | -------- |
| Normal | Standard font style.| | Normal | Standard font style.|
| Italic | Italic font style.| | Italic | Italic font style.|
...@@ -389,7 +393,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -389,7 +393,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------- | -------------- | | ------- | ------- |
| Lighter | The font weight is lighter. | | Lighter | The font weight is lighter. |
| Normal | The font weight is normal.| | Normal | The font weight is normal.|
| Regular | The font weight is regular.| | Regular | The font weight is regular.|
...@@ -402,29 +406,29 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -402,29 +406,29 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------------------- | -------------- | | --------------------- | ------- |
| Start | Aligned with the start.| | Start | Aligned with the start.|
| Center | Horizontally centered.| | Center | Horizontally centered.|
| End | Aligned with the end.| | End | Aligned with the end.|
| Justify<sup>10+</sup> | Aligned with both margins. | | JUSTIFY<sup>10+</sup> | Aligned with both margins. |
## TextOverflow ## TextOverflow
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------------------- | -------------------------------------- | | --------------------- | ------------------- |
| None | Extra-long text is clipped. | | None | Extra-long text is clipped. |
| Clip | Extra-long text is clipped. | | Clip | Extra-long text is clipped. |
| Ellipsis | An ellipsis (...) is used to represent text overflow.| | Ellipsis | An ellipsis (...) is used to represent text overflow.|
| Marquee<sup>10+</sup> | Text continuously scrolls when text overflow occurs. | | MARQUEE<sup>10+</sup> | Text continuously scrolls when text overflow occurs. |
## TextDecorationType ## TextDecorationType
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | ------------------ | | ----------- | --------- |
| Underline | Line under the text. | | Underline | Line under the text. |
| LineThrough | Line through the text.| | LineThrough | Line through the text.|
| Overline | Line over the text. | | Overline | Line over the text. |
...@@ -435,7 +439,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -435,7 +439,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| --------- | -------------------- | | --------- | ---------- |
| Normal | The original case of the text is retained.| | Normal | The original case of the text is retained.|
| LowerCase | All letters in the text are in lowercase. | | LowerCase | All letters in the text are in lowercase. |
| UpperCase | All letters in the text are in uppercase. | | UpperCase | All letters in the text are in uppercase. |
...@@ -443,14 +447,14 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -443,14 +447,14 @@ Since API version 9, this API is supported in ArkTS widgets.
## ResponseType<sup>8+</sup> ## ResponseType<sup>8+</sup>
| Name | Description | | Name | Description |
| ---------- | -------------------------- | | ---------- | ------------- |
| LongPress | The menu is displayed when the component is long-pressed. | | LongPress | The menu is displayed when the component is long-pressed. |
| RightClick | The menu is displayed when the component is right-clicked.| | RightClick | The menu is displayed when the component is right-clicked.|
## HoverEffect<sup>8+</sup> ## HoverEffect<sup>8+</sup>
| Name | Description | | Name | Description |
| --------- | ---------------------------- | | --------- | -------------- |
| Auto | Default hover effect.| | Auto | Default hover effect.|
| Scale | Scale effect. | | Scale | Scale effect. |
| Highlight | Background fade-in and fade-out effect. | | Highlight | Background fade-in and fade-out effect. |
...@@ -459,7 +463,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -459,7 +463,7 @@ Since API version 9, this API is supported in ArkTS widgets.
## Placement<sup>8+</sup> ## Placement<sup>8+</sup>
| Name | Description | | Name | Description |
| ------------- | ------------------------------------------------------------ | | ------------- | -------------------------------------- |
| Left | The popup is on the left of the component, vertically aligned with the component on the left. | | Left | The popup is on the left of the component, vertically aligned with the component on the left. |
| Right | The popup is on the right of the component, vertically aligned with the component on the right. | | Right | The popup is on the right of the component, vertically aligned with the component on the right. |
| Top | The popup is at the top of the component, horizontally aligned with the component at the top. | | Top | The popup is at the top of the component, horizontally aligned with the component at the top. |
...@@ -478,7 +482,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -478,7 +482,7 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ----------- | -------------------- | | ----------- | -------- |
| None | Copy is not allowed. | | None | Copy is not allowed. |
| InApp | Intra-application copy is allowed.| | InApp | Intra-application copy is allowed.|
| LocalDevice | Intra-device copy is allowed.| | LocalDevice | Intra-device copy is allowed.|
...@@ -486,52 +490,54 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -486,52 +490,54 @@ Since API version 9, this API is supported in ArkTS widgets.
## HitTestMode<sup>9+</sup> ## HitTestMode<sup>9+</sup>
| Name | Description | | Name | Description |
| ----------- | -------------------- | | ----------- | ---------------------------------------- |
| Default | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test. | | Default | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test.|
| Block | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test. | | Block | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test.|
| Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.| | Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.|
| None | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.| | None | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test. |
## BlurStyle<sup>9+</sup> ## BlurStyle<sup>9+</sup>
This API is supported in ArkTS widgets. This API is supported in ArkTS widgets.
| Name| Description| | Name | Description |
| ------- | ---------- | | -------------------- | --------- |
| Thin | Thin material. | | Thin | Thin material. |
| Regular | Regular material. | | Regular | Regular material.|
| Thick | Thick material. | | Thick | Thick material. |
| BackgroundThin | Material that creates the minimum depth of field effect.| | BACKGROUND_THIN | Material that creates the minimum depth of field effect. |
| BackgroundRegular | Material that creates a medium shallow depth of field effect.| | BACKGROUND_REGULAR | Material that creates a medium shallow depth of field effect. |
| BackgroundThick | Material that creates a high shallow depth of field effect.| | BACKGROUND_THICK | Material that creates a high shallow depth of field effect. |
| BackgroundUltraThick | Material that creates the maximum depth of field effect.| | BACKGROUND_ULTRA_THICK | Material that creates the maximum depth of field effect. |
## ThemeColorMode<sup>10+</sup> ## ThemeColorMode<sup>10+</sup>
| Name | Description | | Name | Description |
| ------- | ---------- | | ------ | ---------- |
| System | Following the system color mode.| | SYSTEM | Following the system color mode.|
| Light | Light color mode.| | LIGHT | Light color mode. |
| Dark | Dark color mode.| | DARK | Dark color mode. |
## AdaptiveColor<sup>10+</sup> ## AdaptiveColor<sup>10+</sup>
| Name | Description | | Name | Description |
| ------- | ----------- | | ------- | ------------------------- |
| Default | Adaptive color mode is not used. The default color is used as the mask color.| | DEFAULT | Adaptive color mode is not used. The default color is used as the mask color. |
| Average | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.| | AVERAGE | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.|
## TextHeightAdaptivePolicy<sup>10+</sup> ## TextHeightAdaptivePolicy<sup>10+</sup>
| Name | Description | | Name | Description |
| ----------------------- | ------------------------------------------------ | | ----------------------- | ------------------------ |
| MAX_LINES_FIRST | Prioritize the **maxLines** settings. | | MAX_LINES_FIRST | Prioritize the **maxLines** settings.|
| MIN_FONT_SIZE_FIRST | Prioritize the **minFontSize** settings. | | MIN_FONT_SIZE_FIRST | Prioritize the **minFontSize** settings. |
| LAYOUT_CONSTRAINT_FIRST | Prioritize the layout constraint settings in terms of height.| | LAYOUT_CONSTRAINT_FIRST | Prioritize the layout constraint settings in terms of height.|
## TransitionEdge<sup>10+<sup> ## TransitionEdge<sup>10+<sup>
| Name| Description|
| -------- | -------- | | Name | Description |
| ------ | ------ |
| TOP | Top edge of the window.| | TOP | Top edge of the window.|
| BOTTOM | Bottom edge of the window.| | BOTTOM | Bottom edge of the window.|
| START | Left edge of the window.| | START | Left edge of the window.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 7732f06b
...@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| ------------- | ------- | ---- | -------- | | ------------- | ------- | ---- | -------- |
| closeEffect | boolean | Yes| Whether to disable the rotation and shadow effects for the component.<br>Default value: **false**<br>**NOTE**<br> This attribute enables or disables the shadow effect only when **trackShadow** is not set.<br> The shadow effect enabled through this attribute is in the default style.| | closeEffect | boolean | Yes| Whether to disable the rotation and shadow effects for the component.<br>Default value: **false**<br>**NOTE**<br> This attribute enables or disables the shadow effect only when **trackShadow** is not set.<br> The shadow effect enabled through this attribute is in the default style.|
| valueColors<sup>10+</sup> | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | Yes| Array of data segment colors. A value of the **ResourceColor** type indicates a solid color, and A value of the **LinearGradient** type indicates a color gradient.| | valueColors<sup>10+</sup> | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | Yes| Array of data segment colors. A value of the **ResourceColor** type indicates a solid color, and A value of the **LinearGradient** type indicates a color gradient.|
| trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.<br>Default value: **'#081824'**| | trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.<br>The value is in hexadecimal ARGB notation. The first two digits indicate opacity.<br>Default value: **'#08182431'**|
| strokeWidth<sup>10+</sup> | [Length](ts-types.md#Length) | Yes| Stroke width of the border.<br>Default value: **24**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>This attribute does not take effect when the data panel type is **DataPanelType.Line**.| | strokeWidth<sup>10+</sup> | [Length](ts-types.md#Length) | Yes| Stroke width of the border.<br>Default value: **24**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>This attribute does not take effect when the data panel type is **DataPanelType.Line**.|
| trackShadow<sup>10+</sup> | [DataPanelShadowOption](#datapanelshadowoption10) | Yes| Shadow style.<br>**NOTE**<br>If this attribute is set to **null**, the shadow effect is disabled.| | trackShadow<sup>10+</sup> | [DataPanelShadowOption](#datapanelshadowoption10) | Yes| Shadow style.<br>**NOTE**<br>If this attribute is set to **null**, the shadow effect is disabled.|
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md 0 → 100644
浏览文件 @ 7732f06b
# CanvasPattern
**CanvasPattern** represents an object, created by the [createPattern](ts-canvasrenderingcontext2d.md#createpattern) API, describing an image filling pattern based on the image and repetition mode.
> **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.
## Methods
### setTransform
setTransform(transform?: Matrix2D): void
Uses a **Matrix2D** object as a parameter to perform matrix transformation on the current **CanvasPattern** object.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name | Type | Mandatory| Default Value| Description |
| --------- | ----------------------------------------------------- | ---- | ------ | ---------- |
| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No | null | Transformation matrix.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct CanvasPatternPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private matrix: Matrix2D = new Matrix2D()
private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
private pattern : CanvasPattern
build() {
Column() {
Button("Click to set transform")
.onClick(() => {
this.matrix.scaleY = 1
this.matrix.scaleX = 1
this.matrix.translateX = 50
this.matrix.translateY = 200
this.pattern.setTransform(this.matrix)
this.context.fillRect(0, 0, 480, 720)
})
.width("45%")
.margin("5px")
Canvas(this.context)
.width('100%')
.height('80%')
.backgroundColor('#FFFFFF')
.onReady(() => {
this.pattern = this.context.createPattern(this.img, 'no-repeat')
this.context.fillStyle = this.pattern
this.matrix.scaleY = 0.5
this.matrix.scaleX = 0.5
this.matrix.translateX = 50
this.matrix.translateY = 50
this.pattern.setTransform(this.matrix)
this.context.fillRect(0, 0, 480, 720)
})
}
.width('100%')
.height('100%')
}
}
```
![CanvasPattern](./figures/canvas_pattern.gif)
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 7732f06b
...@@ -65,6 +65,6 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -65,6 +65,6 @@ Since API version 9, this API is supported in ArkTS widgets.
close() close()
Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API. Releases all graphics resources associated with this **ImageBitmap** object and sets its width and height to **0**.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md 已删除 100644 → 0
浏览文件 @ b6833871
# Lottie
**Lottie** allows you to implement animation-specific operations.
> **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.
## Modules to Import
```
import lottie from '@ohos/lottieETS'
```
> **NOTE**
>
> To use **Lottie**, download it first by running the **ohpm install @ohos/lottieETS** command in the Terminal window.
## lottie.loadAnimation
loadAnimation(
path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
Loads an animation. Before calling this API, declare the **Animator('__lottie_ets')** object and make sure the canvas layout is complete. This API can be used together with the lifecycle callback **onReady()** of the **Canvas** component.
**Parameters**
| 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"**|
| 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"**. |
| 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. 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.<br>Default value: **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. <br>Default value: **""** |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy
destroy(name: string): void
Destroys the animation. This API must be called when a page exits. This API can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** API. By default, all animations are destroyed.|
**Example**
```ts
// xxx.ets
import lottie from '@ohos/lottieETS'
@Entry
@Component
struct Index {
private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
private animateName: string = "animate"
private animatePath: string = "common/lottie/data.json"
private animateItem: any = null
onPageHide(): void {
console.log('onPageHide')
lottie.destroy()
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.controller)
.width('30%')
.height('20%')
.backgroundColor('#0D9FFB')
.onReady(() => {
console.log('canvas onAppear');
this.animateItem = lottie.loadAnimation({
container: this.controller,
renderer: 'canvas',
loop: true,
autoplay: true,
name: this.animateName,
path: this.animatePath,
})
})
Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie
Button('load animation')
.onClick(() => {
if (this.animateItem != null) {
this.animateItem.destroy()
this.animateItem = null
}
this.animateItem = lottie.loadAnimation({
container: this.controller,
renderer: 'canvas',
loop: true,
autoplay: true,
name: this.animateName,
path: this.animatePath,
initialSegment: [10, 50],
})
})
Button('destroy animation')
.onClick(() => {
lottie.destroy(this.animateName)
this.animateItem = null
})
}
.width('100%')
.height('100%')
}
}
```
![en-us_image_0000001194352468](figures/en-us_image_0000001194352468.gif)
## lottie.play
play(name: string): void
Plays a specified animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** API. By default, all animations are played.|
**Example**
```ts
lottie.play(this.animateName)
```
## lottie.pause
pause(name: string): void
Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** API. By default, all animations are paused.|
**Example**
```ts
lottie.pause(this.animateName)
```
## lottie.togglePause
togglePause(name: string): void
Pauses or plays a specified animation. This API is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are paused or played.|
**Example**
```ts
lottie.togglePause(this.animateName)
```
## lottie.stop
stop(name: string): void
Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are stopped.|
**Example**
```ts
lottie.stop(this.animateName)
```
## lottie.setSpeed
setSpeed(speed: number, name: string): void
Sets the playback speed of the specified animation.
**Parameters**
| 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.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are set.|
**Example**
```ts
lottie.setSpeed(5, this.animateName)
```
## lottie.setDirection
setDirection(direction: AnimationDirection, name: string): void
Sets the direction in which the specified animation plays.
**Parameters**
| 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 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are set.|
**Example**
```ts
lottie.setDirection(-1, this.animateName)
```
## AnimationItem
Defines an **AnimationItem** object, which is returned by the **loadAnimation** API and has attributes and APIs. The attributes are described as follows:
| Name | Type | Description |
| ----------------- | ---------------------------------------- | ---------------------------------------- |
| name | string | Animation name. |
| isLoaded | boolean | Whether the animation is loaded. |
| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points.|
| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. |
| firstFrame | number | First frame of the animation segment that is being played. |
| totalFrames | number | Total number of frames in the animation segment that is being played. |
| frameRate | number | Frame rate (frame/s). |
| frameMult | number | Frame rate (frame/ms). |
| playSpeed | number | 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.|
| playDirection | number | Playback direction.<br>**1**: forward.<br/>**-1**: backward. |
| playCount | number | Number of times the animation plays. |
| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. |
| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** API needs to be called to start playing.|
| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. 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. |
| renderer | any | Animation rendering object, which depends on the rendering type. |
| animationID | string | Animation ID. |
| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**.|
| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. |
| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. |
| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
## AnimationItem.play
play(name?: string): void
Plays an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation.<br>Default value: **""** |
**Example**
```ts
this.animateItem.play()
```
## AnimationItem.destroy
destroy(name?: string): void
Destroys an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.destroy()
```
## AnimationItem.pause
pause(name?: string): void
Pauses an animation. When the **play** API is called next time, the animation is played from the current frame.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.pause()
```
## AnimationItem.togglePause
togglePause(name?: string): void
Pauses or plays an animation. This API is equivalent to the switching between **play** and **pause**.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.togglePause()
```
## AnimationItem.stop
stop(name?: string): void
Stops an animation. When the **play** API is called next time, the animation is played from the first frame.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.stop()
```
## AnimationItem.setSpeed
setSpeed(speed: number): void
Sets the playback speed of an animation.
**Parameters**
| 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.|
**Example**
```ts
this.animateItem.setSpeed(5);
```
## AnimationItem.setDirection
setDirection(direction: AnimationDirection): void
Sets the playback direction of an animation.
**Parameters**
| 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.|
**Example**
```ts
this.animateItem.setDirection(-1)
```
## AnimationItem.goToAndStop
goToAndStop(value: number, isFrame?: boolean): void
Sets the animation to stop at the specified frame or time.
**Parameters**
| 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. |
| 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. |
**Example**
```ts
// Set the animation to stop at the specified frame.
this.animateItem.goToAndStop(25, true)
// Set the animation to stop at the specified time progress.
this.animateItem.goToAndStop(300, false, this.animateName)
```
## AnimationItem.goToAndPlay
goToAndPlay(value: number, isFrame: boolean, name?: string): void
Sets the animation to start from the specified frame or time progress.
**Parameters**
| 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. |
| 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.<br>Default value: **""** |
**Example**
```ts
// Set the animation to stop at the specified frame.
this.animateItem.goToAndPlay(25, true)
// Set the animation to stop at the specified time progress.
this.animateItem.goToAndPlay(300, false, this.animateName)
```
## AnimationItem.playSegments
playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean): void
Sets the animation to play only the specified segment.
**Parameters**
| 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.|
| 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**
```ts
// Set the animation to play the specified segment.
this.animateItem.playSegments([10, 20], false)
// Set the animation to play the specified segment list.
this.animateItem.playSegments([[0, 5], [20, 30]], true)
```
## AnimationItem.resetSegments
resetSegments(forceFlag: boolean): void
Resets the settings configured by the **playSegments** API to play all the frames.
**Parameters**
| 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.|
**Example**
```ts
this.animateItem.resetSegments(true)
```
## AnimationItem.resize
resize(): void
Resizes the animation layout.
**Example**
```ts
this.animateItem.resize()
```
## AnimationItem.setSubframe
setSubframe(useSubFrame: boolean): void
Sets the precision of the **currentFrame** attribute to display floating-point numbers.
**Parameters**
| 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.|
**Example**
```ts
this.animateItem.setSubframe(false)
```
## AnimationItem.getDuration
getDuration(inFrames?: boolean): void
Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** API.
**Parameters**
| 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**|
**Example**
```ts
this.animateItem.getDuration(true)
```
## AnimationItem.addEventListener
addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEventCallback&lt;T&gt;): () =&gt; void
Adds an event listener. After the event is complete, the specified callback is triggered. This API returns the function object that can delete the event listener.
**Parameters**
| 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'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
**Example**
```ts
private callbackItem: any = function() {
console.log("grunt loopComplete")
}
let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName)
// Delete the event listener.
delFunction()
```
## AnimationItem.removeEventListener
removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: AnimationEventCallback&lt;T&gt;): void
Removes an event listener.
**Parameters**
| 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'|
| callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
**Example**
```ts
this.animateItem.removeEventListener('loopComplete', this.animateName)
```
## AnimationItem.triggerEvent
triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
Directly triggers all configured callbacks of a specified event.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters.|
**Example**
```ts
private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name)
}
this.animateItem.addEventListener('loopComplete', this.triggerCallBack)
this.animateItem.triggerEvent('loopComplete', this.animateItem)
this.animateItem.removeEventListener('loopComplete', this.triggerCallBack)
```
en/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md 0 → 100644
浏览文件 @ 7732f06b
# Matrix2D
**Matrix2D** allows you to perform matrix transformation, such as scaling, rotating, and translating.
> **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.
## APIs
Matrix2D()
Since API version 9, this API is supported in ArkTS widgets.
## Attributes
| Name | Type | Description |
| ------------------------- | ------ | ------------------------------------------------------------ |
| [scaleX](#scalex) | number | Horizontal scale factor. Since API version 9, this API is supported in ArkTS widgets.|
| [scaleY](#scaley) | number | Vertical scale factor. Since API version 9, this API is supported in ArkTS widgets.|
| [rotateX](#rotatex) | number | Horizontal tilt coefficient. Since API version 9, this API is supported in ArkTS widgets.|
| [rotateY](#rotatey) | number | Vertical tilt coefficient. Since API version 9, this API is supported in ArkTS widgets.|
| [translateX](#translatex) | number | Horizontal translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets.|
| [translateY](#translatey) | number | Vertical translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets.|
> **NOTE**
>
> You can use the [px2vp](ts-pixel-units.md) API to convert the unit.
### scaleX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScaleX {
@State message: string = 'Matrix2D ScaleX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### scaleY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScaleY {
@State message: string = 'Matrix2D ScaleY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleY = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotateX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotateX {
@State message: string = 'Matrix2D RotateX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.rotateX = Math.sin(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotateY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotateY {
@State message: string = 'Matrix2D RotateY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.rotateY = Math.cos(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translateX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateX {
@State message: string = 'Matrix2D TranslateX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.translateX = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translateY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateY {
@State message: string = 'Matrix2D TranslateY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.translateY = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
## Methods
### identity
identity(): Matrix2D
Creates an identity matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Return value**
| Type | Description |
| --------------------- | ---------- |
| [Matrix2D](#matrix2d) | Identity matrix.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DIdentity {
@State message: string = 'Matrix2D Identity'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix identity")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix = matrix.identity()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### invert
invert(): Matrix2D
Obtains an inverse of this matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Return value**
| Type | Description |
| --------------------- | ------------ |
| [Matrix2D](#matrix2d) | Inverse of the current matrix.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DInvert {
@State message: string = 'Matrix2D Invert'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix invert")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 2
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 10
matrix.translateY = 20
matrix.invert()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### multiply<sup>(deprecated) </sup>
multiply(other?: Matrix2D): Matrix2D
Multiplies this matrix by the target matrix.
Since API version 9, this API is supported in ArkTS widgets. This API is a null API.
This API is deprecated since API version 10.
**Parameters**
| Parameter | Type | Mandatory| Default Value| Description |
| ----- | -------- | ---- | ------ | ---------- |
| other | Matrix2D | No | null | Target matrix.|
**Return value**
| Type | Description |
| --------------------- | -------------- |
| [Matrix2D](#matrix2d) | Matrix of the multiplication result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DMultiply {
@State message: string = 'Matrix2D Multiply'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix multiply")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
var other: Matrix2D = new Matrix2D()
other.scaleX = 2
other.scaleY = 2
other.rotateX = 0
other.rotateY = 0
other.translateX = 10
other.translateY = 10
other.multiply(other)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotate<sup>10+</sup>
rotate(degree: number, rx?: number, ry?: number): Matrix2D
Performs a right multiplication rotation operation on this matrix, with the specified rotation point as the transform origin.
Since API version 10, this API is supported in ArkTS widgets.
**Parameters**
| Parameter | Type | Mandatory| Default Value| Description |
| ------ | ------ | ---- | ------ | ------------------------------------------------------------ |
| degree | number | Yes | 0 | Rotation angle, in radians. A positive angle denotes a clockwise rotation. You can use **Math.PI& / 180** to convert the angle to a radian value.|
| rx | number | No | 0 | Horizontal coordinate (in vp) of the rotation point. |
| ry | number | No | 0 | Vertical coordinate (in vp) of the rotation point. |
**Return value**
| Type | Description |
| --------------------- | -------------------- |
| [Matrix2D](#matrix2d) | Matrix of the rotation result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.rotate(90 / Math.PI, 10, 10)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translate
translate(tx?: number, ty?: number): Matrix2D
Performs a left multiplication translation operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Parameter| Type | Mandatory| Default Value| Description |
| ---- | ------ | ---- | ------ | ---------------------------- |
| tx | number | No | 0 | Horizontal translation distance, in vp.|
| ty | number | No | 0 | Vertical translation distance, in vp.|
**Return value**
| Type | Description |
| --------------------- | -------------------- |
| [Matrix2D](#matrix2d) | Matrix of the translation result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslate {
@State message: string = 'Matrix2D Translate'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix translate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.translate(100, 100)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### scale
scale(sx?: number, sy?: number): Matrix2D
Performs a right multiplication scaling operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Parameter| Type | Mandatory| Default Value| Description |
| ---- | ------ | ---- | ------ | ------------------ |
| sx | number | No | 1 | Horizontal scale factor.|
| sy | number | No | 1 | Vertical scale factor.|
**Return value**
| Type | Description |
| --------------------- | ------------------ |
| [Matrix2D](#matrix2d) | Matrix of the scale result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScale {
@State message: string = 'Matrix2D Scale'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix scale")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.scale(0.5, 0.5)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
en/application-dev/reference/arkui-ts/ts-container-gridrow.md
浏览文件 @ 7732f06b
...@@ -130,7 +130,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -130,7 +130,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| ----------------------- | ----------------------------------- | ------------------------------------------- | | ----------------------- | ----------------------------------- | ------------------------------------------- |
| alignItems<sup>10+</sup> | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the **\<GridCol>** cross axis.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>In **ItemAlign**, only the enumerated values **Start**, **Center**, **End**, and **Stretch** are supported.<br>The alignment mode of the **\<GridCol>** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.<br>Since API version 10, this API is supported in ArkTS widgets.| | alignItems<sup>10+</sup> | ItemAlign | Alignment mode of the **\<GridCol>** cross axis.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>**ItemAlign** supports the following enums: **ItemAlign.Start**, **ItemAlign.Center**, **ItemAlign.End**, and **ItemAlign.Stretch**.<br>The alignment mode of the **\<GridCol>** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.<br>Since API version 10, this API is supported in ArkTS widgets.|
## Events ## Events
......
en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
浏览文件 @ 7732f06b
...@@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| controlButton | [ButtonStyle](#buttonstyle) | Attributes of the sidebar control button.| | controlButton | [ButtonStyle](#buttonstyle) | Attributes of the sidebar control button.|
| showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**| | showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**|
| sideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.<br>When set, the width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the width of the sidebar child component takes precedence.| | sideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.<br>The width of the sidebar, whether it is specified or kept at the default, takes precedence over that of the sidebar child components.|
| minSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.| | minSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.|
| maxSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.| | maxSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.|
| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**<br>**NOTE**<br>The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.<br>Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).| | autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**<br>**NOTE**<br>The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.<br>Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).|
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 7732f06b
...@@ -45,18 +45,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -45,18 +45,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).|
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** | | disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**| | curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator.<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.| | indicatorStyle<sup>(deprecated)</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 9. You are advised to use [indicator](#indicator10) instead.|
| displayCount<sup>8+</sup> | number \| string | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.| | displayCount<sup>8+</sup> | number \| string | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.|
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.| | effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
| nextMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the next item is displayed, but child components cannot be loaded. |
| prevMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Previous margin, used to reveal a small part of the previous item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the previous item is displayed, but child components cannot be loaded. |
## SwiperDisplayMode ## SwiperDisplayMode
| Name| Description| | Name| Description|
| ----------- | ------------------------------------------ | | ----------- | ------------------------------------------ |
| Stretch | The slide width of the **\<Swiper>** component is equal to the width of the component.| | Stretch<sup>(deprecated)</sup> | The slide width of the **\<Swiper>** component is equal to the width of the component.<br>This API is deprecated since API version 10. You are advised to use **STRETCH** instead.|
| AutoLinear | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.| | AutoLinear<sup>(deprecated)</sup> | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.<br>This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.|
## SwiperController ## SwiperController
...@@ -92,10 +90,10 @@ Sets the distance between the navigation point indicator and the **\<Swiper>** c ...@@ -92,10 +90,10 @@ Sets the distance between the navigation point indicator and the **\<Swiper>** c
| Name| Type| Mandatory.| Description | | Name| Type| Mandatory.| Description |
| ------ | -------- | ------ | ------------------------------------ | | ------ | -------- | ------ | ------------------------------------ |
| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.| | left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.| | top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.| | right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.| | bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
### DotIndicator ### DotIndicator
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 7732f06b
...@@ -10,30 +10,30 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text o ...@@ -10,30 +10,30 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text o
## APIs ## APIs
OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: RenderingContextSettings)
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ | | -------- | ---------------------------------------- | ---- | ------------------------------ |
| width | number | Yes | Width of the offscreen canvas. | | width | number | Yes | Width of the offscreen canvas. |
| height | number | Yes | Height of the offscreen canvas. | | height | number | Yes | Height of the offscreen canvas. |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | See RenderingContextSettings.| | settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No | See RenderingContextSettings.|
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string \|number<sup>10+</sup> \|[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 filling area.<br>- When the type is **number**, this attribute indicates the color of the filling 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.<br>Since API version 9, this API is supported in ArkTS widgets.| | [fillStyle](#fillstyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.<br>- When the type is **string**, this attribute indicates the color of the filling area.<br>- When the type is **number**, this attribute indicates the color of the filling 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [lineWidth](#linewidth) | number | Line width.<br>Since API version 9, this API is supported in ArkTS widgets.| | [lineWidth](#linewidth) | number | Line width.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [strokeStyle](#strokestyle) | string \|number<sup>10+</sup> \|[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 **number**, 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.<br>Since API version 9, this API is supported in ArkTS widgets.| | [strokeStyle](#strokestyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.<br>- When the type is **string**, this attribute indicates the stroke color.<br>- When the type is **number**, 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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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'**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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'**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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 line height. The unit must be specified and can only be px or vp.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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><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'**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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><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'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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'**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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. |
...@@ -44,6 +44,9 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -44,6 +44,9 @@ Since API version 9, this API is supported in ArkTS widgets.
| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.| | [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.| | [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
| [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**<br>Since API version 9, this API is supported in ArkTS widgets.| | [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**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**. Available values are as follows:<br>- **'low'**: low quality.<br>- **'medium'**: medium quality.<br>- **'high'**: high quality.<br>Default value: **'low'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [direction](#direction) | CanvasDirection | Text direction used for drawing text. Available values are as follows:<br>- **'inherit'**: The text direction is inherited from the **\<Canvas>** component.<br>- **'ltr'**: The text direction is from left to right.<br>- **'rtl'**: The text direction is from right to left.<br>Default value: **'inherit'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| [filter](#filter) | string | Filter effect. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**<br>Since API version 9, this API is supported in ArkTS widgets.|
> **NOTE** > **NOTE**
> For **fillStyle**, **shadowColor**, and **strokeStyle**, the value format of the string type is 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', '\#FFFFFF'. > For **fillStyle**, **shadowColor**, and **strokeStyle**, the value format of the string type is 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', '\#FFFFFF'.
...@@ -962,7 +965,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -962,7 +965,7 @@ Since API version 9, this API is supported in ArkTS widgets.
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----------- | ------------------------------------------------------------ | | ----------- | ---------------------------------------- |
| TextMetrics | **TextMetrics** object.<br>Since API version 9, this API is supported in ArkTS widgets.| | TextMetrics | **TextMetrics** object.<br>Since API version 9, this API is supported in ArkTS widgets.|
**TextMetrics** attributes **TextMetrics** attributes
...@@ -1276,8 +1279,8 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -1276,8 +1279,8 @@ Since API version 9, this API is supported in ArkTS widgets.
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------------------------------- | ----------------------- | | ---------------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| | [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
**Example** **Example**
...@@ -1536,15 +1539,15 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -1536,15 +1539,15 @@ Since API version 9, this API is supported in ArkTS widgets.
**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. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| 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 counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise. | | counterclockwise | boolean | No | false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.|
**Example** **Example**
...@@ -1791,7 +1794,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -1791,7 +1794,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| 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**
...@@ -1841,15 +1844,77 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -1841,15 +1844,77 @@ Since API version 9, this API is supported in ArkTS widgets.
filter(filter: string): void filter(filter: string): void
Sets a filter for the image on the canvas. This API is a void API. Sets a filter for the image on the canvas.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
**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. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct FilterDemoOff {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let offctx = this.offContext
let img = this.img
offctx.drawImage(img, 0, 0, 100, 100);
offctx.filter = 'grayscale(50%)';
offctx.drawImage(img, 100, 0, 100, 100);
offctx.filter = 'sepia(60%)';
offctx.drawImage(img, 200, 0, 100, 100);
offctx.filter = 'saturate(30%)';
offctx.drawImage(img, 0, 100, 100, 100);
offctx.filter = 'hue-rotate(90degree)';
offctx.drawImage(img, 100, 100, 100, 100);
offctx.filter = 'invert(100%)';
offctx.drawImage(img, 200, 100, 100, 100);
offctx.filter = 'opacity(25%)';
offctx.drawImage(img, 0, 200, 100, 100);
offctx.filter = 'brightness(0.4)';
offctx.drawImage(img, 100, 200, 100, 100);
offctx.filter = 'contrast(200%)';
offctx.drawImage(img, 200, 200, 100, 100);
offctx.filter = 'blur(5px)';
offctx.drawImage(img, 0, 300, 100, 100);
var image = offctx.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
![filterDemo](figures/filterDemo.jpeg)
### getTransform ### getTransform
...@@ -1860,6 +1925,11 @@ Obtains the current transformation matrix being applied to the context. This API ...@@ -1860,6 +1925,11 @@ Obtains the current transformation matrix being applied to the context. This API
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
**Return value**
| Type | Description |
| ---------------------------------------- | ----- |
| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | Matrix object.|
### resetTransform ### resetTransform
...@@ -1874,10 +1944,48 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -1874,10 +1944,48 @@ Since API version 9, this API is supported in ArkTS widgets.
direction(direction: CanvasDirection): void direction(direction: CanvasDirection): void
Sets the text direction for drawing text. This API is a void API. Sets the text direction for drawing text.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
**Example**
```ts
// xxx.ets
@Entry
@Component
struct DirectionDemoOff {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let offctx = this.offContext
offctx.font = '48px serif';
offctx.textAlign = 'start'
offctx.fillText("Hi ltr!", 200, 50);
offctx.direction = "rtl";
offctx.fillText("Hi rtl!", 200, 100);
var image = offctx.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
![directionDemo](figures/directionDemo.jpeg)
### rotate ### rotate
...@@ -1985,7 +2093,6 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1985,7 +2093,6 @@ Defines a transformation matrix. To transform a graph, you only need to set para
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
> **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
...@@ -2343,9 +2450,9 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -2343,9 +2450,9 @@ Since API version 9, this API is supported in ArkTS widgets.
### putImageData ### putImageData
putImageData(imageData: Object, dx: number, dy: number): void putImageData(imageData: Object, dx: number | string, dy: number | string): void
putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void putImageData(imageData: Object, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth?: number | string, dirtyHeight: number | string): void
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.
...@@ -2354,14 +2461,14 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -2354,14 +2461,14 @@ Since API version 9, this API is supported in ArkTS widgets.
**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 \| string<sup>10+</sup> | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
| dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. | | dy | number \| string<sup>10+</sup> | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
| dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.| | dirtyX | number \| string<sup>10+</sup> | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
| dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.| | dirtyY | number \| string<sup>10+</sup> | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
| dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. | | dirtyWidth | number \| string<sup>10+</sup> | 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 \| string<sup>10+</sup> | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. |
**Example** **Example**
...@@ -2558,7 +2665,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -2558,7 +2665,7 @@ Since API version 9, this API is supported in ArkTS widgets.
imageSmoothingQuality(quality: imageSmoothingQuality) imageSmoothingQuality(quality: imageSmoothingQuality)
Sets the quality of image smoothing. This API is a void API. Sets the quality of image smoothing.
Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets.
...@@ -2566,8 +2673,42 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -2566,8 +2673,42 @@ Since API version 9, this API is supported in ArkTS widgets.
| 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.<br>- **'low'**: low quality.<br>- **'medium'**: medium quality.<br>- **'high'**: high quality.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct ImageSmoothingQualityDemoOff {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let offctx = this.offContext
offctx.imageSmoothingEnabled = true
offctx.imageSmoothingQuality = 'high'
offctx.drawImage(this.img, 0, 0, 400, 200)
var image = offctx.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg)
### transferToImageBitmap ### transferToImageBitmap
...@@ -2822,8 +2963,8 @@ Creates a conic gradient. ...@@ -2822,8 +2963,8 @@ Creates a conic gradient.
**Parameters** **Parameters**
| Name | Type | Mandatory| Default Value| Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ | | ---------- | ------ | ---- | ---- | ----------------------------------- |
| startAngle | number | Yes | 0 | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.| | startAngle | number | Yes | 0 | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
| x | number | Yes | 0 | X-coordinate of the center of the conic gradient, in vp. | | x | number | Yes | 0 | X-coordinate of the center of the conic gradient, in vp. |
| y | number | Yes | 0 | Y-coordinate of the center of the conic gradient, in vp. | | y | number | Yes | 0 | Y-coordinate of the center of the conic gradient, in vp. |
...@@ -2864,9 +3005,3 @@ struct OffscreenCanvasConicGradientPage { ...@@ -2864,9 +3005,3 @@ struct OffscreenCanvasConicGradientPage {
``` ```
![en-us_image_0000001239032419](figures/en-us_image_0000001239032420.png) ![en-us_image_0000001239032419](figures/en-us_image_0000001239032420.png)
## CanvasPattern
Defines an object created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或