diff --git a/en/application-dev/application-models/accessibilityextensionability.md b/en/application-dev/application-models/accessibilityextensionability.md index c14b4b95921f8adef52c83b20253d26b774b16fa..42968456fe88c836e5befe9c096eb2f3892729e1 100644 --- a/en/application-dev/application-models/accessibilityextensionability.md +++ b/en/application-dev/application-models/accessibilityextensionability.md @@ -1,4 +1,4 @@ -# 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. @@ -10,14 +10,6 @@ The **AccessibilityExtensionAbility** module provides accessibility extension ca > > 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 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. diff --git a/en/application-dev/reference/arkui-ts/figures/ImageSmoothingQualityDemo.jpeg b/en/application-dev/reference/arkui-ts/figures/ImageSmoothingQualityDemo.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..01ae362e6ae3e7df6dbd029ceed14e6838720e16 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/ImageSmoothingQualityDemo.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/canvas_pattern.gif b/en/application-dev/reference/arkui-ts/figures/canvas_pattern.gif new file mode 100644 index 0000000000000000000000000000000000000000..98acc8dbefc1e6e93a7679e0787d2be007943668 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/canvas_pattern.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/directionDemo.jpeg b/en/application-dev/reference/arkui-ts/figures/directionDemo.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..0d98af05dcd866c23dcc9a15298b4fd67048504a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/directionDemo.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png new file mode 100644 index 0000000000000000000000000000000000000000..589059ee8bf53b736cdadfc79ee44bbfd9d3db02 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png new file mode 100644 index 0000000000000000000000000000000000000000..c9d63dc6b6ff97b2b0ff3ae4599b787db8dd096f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/filterDemo.jpeg b/en/application-dev/reference/arkui-ts/figures/filterDemo.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..4f3321de2bd30afc4f4fa369d769aab4bb5d20a3 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/filterDemo.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/offscreen_canvas.png b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas.png new file mode 100644 index 0000000000000000000000000000000000000000..6408dcb81dc4e02287e5bf7b714534a4a48de12a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_height.png b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_height.png new file mode 100644 index 0000000000000000000000000000000000000000..69818ec80dd321547d5dfc97333409512f1e83d3 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_height.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_transferToImageBitmap.png b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_transferToImageBitmap.png new file mode 100644 index 0000000000000000000000000000000000000000..774081139d8c0e38406966a718b394584ded9b01 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_transferToImageBitmap.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_width.png b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_width.png new file mode 100644 index 0000000000000000000000000000000000000000..d920c43bb9215e144b1bf5ac4362999a41da22c0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/offscreen_canvas_width.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index bf4d48665a378934f14c413db9408fa09fb5705f..4c47e6d98b583759004186a044718455b57ad148 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -1,113 +1,117 @@ # 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 Since API version 9, this API is supported in ArkTS widgets. -| Color | Value | Illustration | -| ------------------------ | -------- | ------------------------------------------------------------ | -| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.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) | -| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) | -| Grey | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) | -| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) | -| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) | -| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) | -| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) | -| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) | -| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) | -| Transparent9+ | rgba(0,0,0,0) | Transparent | +| Color | Value | Illustration | +| ------------------------ | ------------- | ---------------------------------------- | +| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.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) | +| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) | +| Grey | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) | +| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) | +| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) | +| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) | +| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) | +| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) | +| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) | +| Transparent9+ | rgba(0,0,0,0) | Transparent | ## ImageFit 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. | | 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. | -| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. | -| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. | -| None | The original size is retained. | +| Auto | The image is scaled automatically to fit the display area. | +| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. | +| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. | +| None | The original size is retained. | ## BorderStyle 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**.| -| Dashed | Dashed border. | -| Solid | Solid border. | +| Dashed | Dashed border. | +| Solid | Solid border. | ## LineJoinStyle Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ----- | -------------------- | +| Name | Description | +| ----- | ---------- | | Bevel | Bevel is used to connect paths.| | Miter | Miter is used to connect paths.| | Round | Round is used to connect paths.| ## TouchType -| Name | Description | -| ------ | ------------------------------ | -| Down | A finger is pressed. | -| Up | A finger is lifted. | +| Name | Description | +| ------ | --------------- | +| Down | A finger is pressed. | +| Up | A finger is lifted. | | Move | A finger moves on the screen in pressed state.| -| Cancel | A touch event is canceled. | +| Cancel | A touch event is canceled. | ## MouseButton -| Name | Description | -| ------- | ---------------- | -| Left | Left button on the mouse. | -| Right | Right button on the mouse. | -| Middle | Middle button on the mouse. | +| Name | Description | +| ------- | -------- | +| Left | Left button on the mouse. | +| Right | Right button on the mouse. | +| Middle | Middle button on the mouse. | | Back | Back button on the left of the mouse.| | Forward | Forward button on the left of the mouse.| -| None | No button. | +| None | No button. | ## MouseAction -| Name | Description | -| ------- | -------------- | +| Name | Description | +| ------- | ------- | | Press | The mouse button is pressed.| | Release | The mouse button is released.| -| Move | The mouse cursor moves. | -| Hover | The mouse pointer is hovered on an element. | +| Move | The mouse cursor moves. | +| Hover | The mouse pointer is hovered on an element. | ## Curve Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------------------- | ------------------------------------------------------------ | -| Linear | The animation speed keeps unchanged. | +| Name | Description | +| ------------------- | ---------------------------------------- | +| 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.| -| 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. | +| 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.| | 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). | -| 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). | -| 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). | -| 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). | -| Friction | The animation uses the friction cubic-bezier curve (0.2, 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). | +| 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). | +| 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). | +| 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). | ## AnimationStatus Since API version 10, this API is supported in ArkTS widgets. -| Name | Description | -| ------- | ------------------ | -| Initial | The animation is in the initial state. | +| Name | Description | +| ------- | --------- | +| Initial | The animation is in the initial state. | | Running | The animation is being played.| | Paused | The animation is paused.| | Stopped | The animation is stopped.| @@ -116,10 +120,10 @@ Since API version 10, this API is supported in ArkTS widgets. Since API version 10, this API is supported in ArkTS widgets. -| 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.| -| Forwards | The target component retains the state set by the last keyframe encountered during execution of the animation. | +| 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. | +| 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.| | Both | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.| @@ -127,140 +131,140 @@ Since API version 10, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ---------------- | ------------------------------------------------------------ | -| Normal | The animation is played forwards. | -| Reverse | The animation is played backwards. | +| Name | Description | +| ---------------- | ---------------------------------------- | +| Normal | The animation is played forwards. | +| 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...).| | AlternateReverse | The animation is played backwards for an odd number of times (1, 3, 5...) and forwards for an even number of times (2, 4, 6...).| ## KeyType -| Name| Description | -| ---- | ---------- | +| Name | Description | +| ---- | ----- | | Down | The key is pressed.| | Up | The key is released.| ## KeySource -| Name | Description | -| -------- | -------------------- | -| Unknown | Unknown input device. | +| Name | Description | +| -------- | ---------- | +| Unknown | Unknown input device. | | Keyboard | The input device is a keyboard.| ## Edge -| Name | Description | -| -------- | ---------------------- | -| Top | Top edge in the vertical direction.
Since API version 9, this API is supported in ArkTS widgets.| -| Center(deprecated) | Center position in the vertical direction.
This API is deprecated since API version 9.| -| Bottom | Bottom edge in the vertical direction.
Since API version 9, this API is supported in ArkTS widgets.| -| Baseline(deprecated) | Text baseline position in the cross axis direction.
This API is deprecated since API version 9.| -| Start | Start position in the horizontal direction.
Since API version 9, this API is supported in ArkTS widgets.| -| Middle(deprecated) | Center position in the horizontal direction.
This API is deprecated since API version 9.| -| End | End position in the horizontal direction.
Since API version 9, this API is supported in ArkTS widgets.| +| Name | Description | +| -------------------------------- | ---------------------------------------- | +| Top | Top edge in the vertical direction.
Since API version 9, this API is supported in ArkTS widgets.| +| Center(deprecated) | Center position in the vertical direction.
This API is deprecated since API version 9. | +| Bottom | Bottom edge in the vertical direction.
Since API version 9, this API is supported in ArkTS widgets.| +| Baseline(deprecated) | Text baseline position in the cross axis direction.
This API is deprecated since API version 9. | +| Start | Start position in the horizontal direction.
Since API version 9, this API is supported in ArkTS widgets.| +| Middle(deprecated) | Center position in the horizontal direction.
This API is deprecated since API version 9. | +| End | End position in the horizontal direction.
Since API version 9, this API is supported in ArkTS widgets.| ## Week -| Name | Description | -| -------- | ---------------------- | -| Mon | Monday. | -| Tue | Tuesday. | -| Wed | Wednesday. | -| Thur | Thursday. | -| Fri | Friday. | -| Sat | Saturday. | -| Sun | Sunday. | +| Name | Description | +| ---- | ---- | +| Mon | Monday. | +| Tue | Tuesday. | +| Wed | Wednesday. | +| Thur | Thursday. | +| Fri | Friday. | +| Sat | Saturday. | +| Sun | Sunday. | ## Direction Since API version 9, this API is supported in ArkTS widgets. -| Name| Description | -| ---- | ---------------------- | -| Ltr | Components are arranged from left to right. | -| Rtl | Components are arranged from right to left. | +| Name | Description | +| ---- | ----------- | +| Ltr | Components are arranged from left to right. | +| Rtl | Components are arranged from right to left. | | Auto | The default layout direction is used.| ## BarState Since API version 9, this API is supported in ArkTS widgets. -| Name| Description | -| ---- | -------------------------------- | -| Off | Not displayed. | -| On | Always displayed. | +| Name | Description | +| ---- | ------------------ | +| Off | Not displayed. | +| On | Always displayed. | | Auto | Displayed when the screen is touched and hidden after 2s.| ## EdgeEffect 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.| | 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. | ## Alignment Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ----------- | ---------------- | -| TopStart | Top start. | -| Top | Horizontally centered on the top. | -| TopEnd | Top end. | +| Name | Description | +| ----------- | -------- | +| TopStart | Top start. | +| Top | Horizontally centered on the top. | +| TopEnd | Top end. | | Start | Vertically centered start.| | Center | Horizontally and vertically centered.| -| End | Vertically centered end. | -| BottomStart | Bottom start. | -| Bottom | Horizontally centered on the bottom. | -| BottomEnd | Bottom end. | +| End | Vertically centered end. | +| BottomStart | Bottom start. | +| Bottom | Horizontally centered on the bottom. | +| BottomEnd | Bottom end. | ## TransitionType Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------ | -------------------------------------------------- | +| Name | Description | +| ------ | ------------------------------ | | All | The transition takes effect in all scenarios.| | Insert | The transition takes effect when a component is inserted or displayed.| | Delete | The transition takes effect when a component is deleted or hidden.| ## RelateType -| Name | Description | -| ------ | ------------------------------- | -| 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. | +| Name | Description | +| ---- | -------------- | +| 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.| ## Visibility Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------- | -------------------------------- | -| Hidden | The component is hidden, and a placeholder is used for it in the layout. | -| Visible | The component is visible. | +| Name | Description | +| ------- | ---------------- | +| Hidden | The component is hidden, and a placeholder is used for it in the layout. | +| Visible | The component is visible. | | None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.| ## LineCapStyle Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------ | -------------------- | -| 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.| +| Name | Description | +| ------ | ----------------------------- | +| 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. | | 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 Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ---------- | ------------ | +| Name | Description | +| ---------- | ------ | | Vertical | Vertical direction.| | Horizontal | Horizontal direction.| @@ -268,21 +272,21 @@ 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.| | 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. | ## FlexAlign Since API version 9, this API is supported in ArkTS widgets. -| 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.| -| 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.| +| 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. | +| 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. | | 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.| | 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.| @@ -291,96 +295,96 @@ Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| -------- | ------------------------------------------------------------ | -| Auto | The default configuration of the flex container is used. | -| 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. | -| End | The items in the flex container are aligned with the cross-end edge. | +| Name | Description | +| -------- | ---------------------------------------- | +| Auto | The default configuration of the flex container is used. | +| 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. | +| End | The items in the flex container are aligned with the cross-end edge. | | Stretch | The items in the flex container are stretched and padded along the cross axis. If the flex container has the **Wrap** attribute set to **FlexWrap.Wrap** or **FlexWrap.WrapReverse**, the items are stretched to the cross size of the widest element on the current row or column. In other cases, the items with no size set are stretched to the container size.| -| Baseline | The items in the flex container are aligned in such a manner that their text baselines are aligned along the cross axis. | +| Baseline | The items in the flex container are aligned in such a manner that their text baselines are aligned along the cross axis. | ## FlexDirection Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------------- | ------------------------------ | -| 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. | -| 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. | +| Name | Description | +| ------------- | ---------------- | +| 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. | +| 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.| ## FlexWrap Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ----------- | ------------------------------------------------- | -| 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. | +| Name | Description | +| ----------- | --------------------------- | +| 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. | | WrapReverse | The child components in the flex container are reversely arranged in multiple lines, and they may overflow.| ## VerticalAlign Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------ | ------------------------ | -| Top | Top aligned. | +| Name | Description | +| ------ | ------------ | +| Top | Top aligned. | | Center | Center aligned. This is the default alignment mode.| -| Bottom | Bottom aligned. | +| Bottom | Bottom aligned. | ## ImageRepeat 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.| | Y | The image is repeatedly drawn only along the vertical axis.| -| XY | The image is repeatedly drawn along both axes. | -| NoRepeat | The image is not repeatedly drawn. | +| XY | The image is repeatedly drawn along both axes. | +| NoRepeat | The image is not repeatedly drawn. | ## ImageSize 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.| -| 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. | +| 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. | ## GradientDirection Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ----------- | ---------- | +| Name | Description | +| ----------- | ----- | | Left | The gradient direction is from right to left.| | Top | The gradient direction is from bottom to top.| | Right | The gradient direction is from left to right.| | Bottom | The gradient direction is from top to bottom.| -| LeftTop | The gradient direction is upper left. | -| LeftBottom | The gradient direction is lower left. | -| RightTop | The gradient direction is upper right. | -| RightBottom | The gradient direction is lower right. | -| None | No gradient. | +| LeftTop | The gradient direction is upper left. | +| LeftBottom | The gradient direction is lower left. | +| RightTop | The gradient direction is upper right. | +| RightBottom | The gradient direction is lower right. | +| None | No gradient. | ## SharedTransitionEffectType -| 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.| -| Exchange | The element is relocated and scaled properly on the target page.| +| 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.| +| Exchange | The element is relocated and scaled properly on the target page. | ## FontStyle Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------ | ---------------- | +| Name | Description | +| ------ | -------- | | Normal | Standard font style.| | Italic | Italic font style.| @@ -388,151 +392,153 @@ Since API version 9, this API is supported in ArkTS widgets. Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ------- | -------------- | -| Lighter | The font weight is lighter. | +| Name | Description | +| ------- | ------- | +| Lighter | The font weight is lighter. | | Normal | The font weight is normal.| | Regular | The font weight is regular.| | Medium | The font weight is medium.| -| Bold | The font weight is bold. | -| Bolder | The font weight is bolder. | +| Bold | The font weight is bold. | +| Bolder | The font weight is bolder. | ## TextAlign Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| --------------------- | -------------- | +| Name | Description | +| --------------------- | ------- | | Start | Aligned with the start.| | Center | Horizontally centered.| | End | Aligned with the end.| -| Justify10+ | Aligned with both margins. | +| JUSTIFY10+ | Aligned with both margins. | ## TextOverflow Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| --------------------- | -------------------------------------- | -| None | Extra-long text is clipped. | -| Clip | Extra-long text is clipped. | +| Name | Description | +| --------------------- | ------------------- | +| None | Extra-long text is clipped. | +| Clip | Extra-long text is clipped. | | Ellipsis | An ellipsis (...) is used to represent text overflow.| -| Marquee10+ | Text continuously scrolls when text overflow occurs. | +| MARQUEE10+ | Text continuously scrolls when text overflow occurs. | ## TextDecorationType Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ----------- | ------------------ | -| Underline | Line under the text. | +| Name | Description | +| ----------- | --------- | +| Underline | Line under the text. | | LineThrough | Line through the text.| -| Overline | Line over the text. | +| Overline | Line over the text. | | None | No decorative lines.| ## TextCase Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| --------- | -------------------- | +| Name | Description | +| --------- | ---------- | | Normal | The original case of the text is retained.| -| LowerCase | All letters in the text are in lowercase. | -| UpperCase | All letters in the text are in uppercase. | +| LowerCase | All letters in the text are in lowercase. | +| UpperCase | All letters in the text are in uppercase. | ## ResponseType8+ -| Name | Description | -| ---------- | -------------------------- | -| LongPress | The menu is displayed when the component is long-pressed. | +| Name | Description | +| ---------- | ------------- | +| LongPress | The menu is displayed when the component is long-pressed. | | RightClick | The menu is displayed when the component is right-clicked.| ## HoverEffect8+ -| Name | Description | -| --------- | ---------------------------- | +| Name | Description | +| --------- | -------------- | | Auto | Default hover effect.| -| Scale | Scale effect. | -| Highlight | Background fade-in and fade-out effect. | -| None | No effect. | +| Scale | Scale effect. | +| Highlight | Background fade-in and fade-out effect. | +| None | No effect. | ## Placement8+ -| Name | Description | -| ------------- | ------------------------------------------------------------ | -| 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. | -| Top | The popup is at the top of the component, horizontally aligned with the component at the top. | -| Bottom | The popup is at the bottom of the component, horizontally aligned with the component at the bottom. | +| Name | Description | +| ------------- | -------------------------------------- | +| 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. | +| Top | The popup is at the top of the component, horizontally aligned with the component at the top. | +| Bottom | The popup is at the bottom of the component, horizontally aligned with the component at the bottom. | | TopLeft | The popup is at the top of the component and, since API version 9, aligned with the left of the component.| | TopRight | The popup is at the top of the component and, since API version 9, aligned with the right of the component.| | BottomLeft | The popup is at the bottom of the component and, since API version 9, aligned with the left of the component.| | BottomRight | The popup is at the bottom of the component and, since API version 9, aligned with the right of the component.| -| LeftTop9+ | The popup is on the left of the component and aligned with the top of the component. | -| LeftBottom9+ | The popup is on the left of the component and aligned with the bottom of the component. | -| RightTop9+ | The popup is on the right of the component and aligned with the top of the component. | -| RightBottom9+ | The popup is on the right of the component and aligned with the bottom of the component. | +| LeftTop9+ | The popup is on the left of the component and aligned with the top of the component. | +| LeftBottom9+ | The popup is on the left of the component and aligned with the bottom of the component. | +| RightTop9+ | The popup is on the right of the component and aligned with the top of the component. | +| RightBottom9+ | The popup is on the right of the component and aligned with the bottom of the component. | ## CopyOptions9+ Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| ----------- | -------------------- | -| None | Copy is not allowed. | +| Name | Description | +| ----------- | -------- | +| None | Copy is not allowed. | | InApp | Intra-application copy is allowed.| | LocalDevice | Intra-device copy is allowed.| ## HitTestMode9+ -| 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. | -| 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. | +| 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.| +| 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.| -| 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. | ## BlurStyle9+ This API is supported in ArkTS widgets. -| Name| Description| -| ------- | ---------- | -| Thin | Thin material. | -| Regular | Regular material. | -| Thick | Thick material. | -| BackgroundThin | Material that creates the minimum depth of field effect.| -| BackgroundRegular | Material that creates a medium shallow depth of field effect.| -| BackgroundThick | Material that creates a high shallow depth of field effect.| -| BackgroundUltraThick | Material that creates the maximum depth of field effect.| +| Name | Description | +| -------------------- | --------- | +| Thin | Thin material. | +| Regular | Regular material.| +| Thick | Thick material. | +| BACKGROUND_THIN | Material that creates the minimum depth of field effect. | +| BACKGROUND_REGULAR | Material that creates a medium shallow depth of field effect. | +| BACKGROUND_THICK | Material that creates a high shallow depth of field effect. | +| BACKGROUND_ULTRA_THICK | Material that creates the maximum depth of field effect. | ## ThemeColorMode10+ -| Name | Description | -| ------- | ---------- | -| System | Following the system color mode.| -| Light | Light color mode.| -| Dark | Dark color mode.| +| Name | Description | +| ------ | ---------- | +| SYSTEM | Following the system color mode.| +| LIGHT | Light color mode. | +| DARK | Dark color mode. | ## AdaptiveColor10+ -| Name | Description | -| ------- | ----------- | -| 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.| +| Name | Description | +| ------- | ------------------------- | +| 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.| ## TextHeightAdaptivePolicy10+ -| Name | Description | -| ----------------------- | ------------------------------------------------ | -| MAX_LINES_FIRST | Prioritize the **maxLines** settings. | -| MIN_FONT_SIZE_FIRST | Prioritize the **minFontSize** settings. | +| Name | Description | +| ----------------------- | ------------------------ | +| MAX_LINES_FIRST | Prioritize the **maxLines** settings.| +| MIN_FONT_SIZE_FIRST | Prioritize the **minFontSize** settings. | | LAYOUT_CONSTRAINT_FIRST | Prioritize the layout constraint settings in terms of height.| + ## TransitionEdge10+ -| Name| Description| -| -------- | -------- | -| TOP | Top edge of the window.| + +| Name | Description | +| ------ | ------ | +| TOP | Top edge of the window.| | BOTTOM | Bottom edge of the window.| -| START | Left edge of the window.| -| END | Right edge of the window.| +| START | Left edge of the window.| +| END | Right edge of the window.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 3a56d0d8d44bc724a4290556f25d3366e5e7c339..e3681f6afdac7edc34bed701c1905c30857480d8 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -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.
Default value: **false**
**NOTE**
This attribute enables or disables the shadow effect only when **trackShadow** is not set.
The shadow effect enabled through this attribute is in the default style.| | valueColors10+ | 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.| -| trackBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.
Default value: **'#081824'**| +| trackBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.
The value is in hexadecimal ARGB notation. The first two digits indicate opacity.
Default value: **'#08182431'**| | strokeWidth10+ | [Length](ts-types.md#Length) | Yes| Stroke width of the border.
Default value: **24**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
This attribute does not take effect when the data panel type is **DataPanelType.Line**.| | trackShadow10+ | [DataPanelShadowOption](#datapanelshadowoption10) | Yes| Shadow style.
**NOTE**
If this attribute is set to **null**, the shadow effect is disabled.| diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md new file mode 100644 index 0000000000000000000000000000000000000000..1f8db24177ef3ea58305d278751cb588f3a90cc0 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md @@ -0,0 +1,72 @@ +# 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) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index d6bc06bd61f2de584dc111bdc51a46ea44a94778..cdaa515a7bafb897390e0ec555b07e9937d89d18 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -65,6 +65,6 @@ Since API version 9, this API is supported in ArkTS widgets. 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. diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md deleted file mode 100644 index 58cefdf784cd120789a842d5ec794258dd89ed2a..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ /dev/null @@ -1,611 +0,0 @@ -# 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.
Default value: **true**| -| autoplay | boolean | No | Whether to automatically play the animation
Default value: **true** | -| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation.
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.
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.
**1**: forward.
**-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.
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.
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.
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.
Default value: **false**| -| name | string | No | Name of the target animation.
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.
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.
**true**: The **currentFrame** attribute displays floating-point numbers.
**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.
**true**: number of frames.
**false**: duration, in ms.
Default value: **false**| - -**Example** - - ```ts - this.animateItem.getDuration(true) - ``` - - -## AnimationItem.addEventListener - -addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => 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:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| -| callback | AnimationEventCallback<T> | 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<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void - -Removes an event listener. - -**Parameters** - -| Name | Type | Mandatory | Description | -| -------- | ------------------------------- | ---- | ---------------------------------------- | -| name | AnimationEventName | Yes | Animation event type. The available options are as follows:
'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| -| callback | AnimationEventCallback<T> | 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<T = any>(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) - ``` diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md new file mode 100644 index 0000000000000000000000000000000000000000..4099142bfb7494bdc335036322eb67f7bb3127a7 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md @@ -0,0 +1,601 @@ +# 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(deprecated) + +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%') + } +} +``` + +### rotate10+ + +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%') + } +} +``` diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md index aa0a7d654527ca5e079636ec370d88139a51fc2e..8d225a3aa65a057ae5e7a2a07990c98edfc5fba2 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md @@ -130,7 +130,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ----------------------- | ----------------------------------- | ------------------------------------------- | -| alignItems10+ | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the **\** cross axis.
Default value: **ItemAlign.Start**
**NOTE**
In **ItemAlign**, only the enumerated values **Start**, **Center**, **End**, and **Stretch** are supported.
The alignment mode of the **\** 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.
Since API version 10, this API is supported in ArkTS widgets.| +| alignItems10+ | ItemAlign | Alignment mode of the **\** cross axis.
Default value: **ItemAlign.Start**
**NOTE**
**ItemAlign** supports the following enums: **ItemAlign.Start**, **ItemAlign.Center**, **ItemAlign.End**, and **ItemAlign.Stretch**.
The alignment mode of the **\** 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.
Since API version 10, this API is supported in ArkTS widgets.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index c095761bafda868074d0c4dc1a2ccb8a55829ddf..52fbd9e3d32589538b10f699b209a7f00c9dc5fb 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | showSideBar | boolean | Whether to display the sidebar.
Default value: **true**
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.| | showControlButton | boolean | Whether to display the sidebar control button.
Default value: **true**| -| sideBarWidth | number \| [Length](ts-types.md#length)9+ | Width of the sidebar.
Default value: **200**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
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.
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)9+ | Width of the sidebar.
Default value: **200**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
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.
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)9+ | Minimum width of the sidebar.
Default value: **200**, in vp
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
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)9+ | Maximum width of the sidebar.
Default value: **280**, in vp
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
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.| | autoHide9+ | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.
Default value: **true**
**NOTE**
The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.
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).| diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index 6900431ed2d867680b5f6135325a1c6565b9a430..b3c747c566bb35f47b1c7a5a4e110cfb439a3aa6 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -45,18 +45,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | cachedCount8+ | number | Number of child components to be cached.
Default value: **1**
**NOTE**
**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | | curve8+ | [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.
Default value: **Curve.Linear**| -| indicatorStyle8+ | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator.
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.| -| displayCount8+ | number \| string | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
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.| +| indicatorStyle(deprecated) | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.
This API is supported since API version 8 and is deprecated since API version 9. You are advised to use [indicator](#indicator10) instead.| +| displayCount8+ | number \| string | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
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.| | effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**
**NOTE**
The spring effect does not take effect when the controller API is called.| -| nextMargin10+ |
[Length](ts-types.md#length)
| Next margin, used to reveal a small part of the next item.
Default value: **0**
**NOTE**
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. | -| prevMargin10+ |
[Length](ts-types.md#length)
| Previous margin, used to reveal a small part of the previous item.
Default value: **0**
**NOTE**
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 | Name| Description| | ----------- | ------------------------------------------ | -| Stretch | The slide width of the **\** component is equal to the width of the component.| -| AutoLinear | The slide width of the **\** component is equal to that of the child component with the maximum width.| +| Stretch(deprecated) | The slide width of the **\** component is equal to the width of the component.
This API is deprecated since API version 10. You are advised to use **STRETCH** instead.| +| AutoLinear(deprecated) | The slide width of the **\** component is equal to that of the child component with the maximum width.
This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.| ## SwiperController @@ -92,10 +90,10 @@ Sets the distance between the navigation point indicator and the **\** c | Name| Type| Mandatory.| Description | | ------ | -------- | ------ | ------------------------------------ | -| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\** component.| -| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\** component.| -| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\** component.| -| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\** component.| +| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\** component.
Default value: **0**
Unit: vp| +| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\** component.
Default value: **0**
Unit: vp| +| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\** component.
Default value: **0**
Unit: vp| +| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\** component.
Default value: **0**
Unit: vp| ### DotIndicator diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index f513d46ae5849a33ed8c1eb8c4b7255e4c8403cf..1ba996fc0ef670359687c3e94bb6cadf704f92c5 100644 --- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -3,47 +3,50 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency. > **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 -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. **Parameters** -| Name | Type | Mandatory| Description | -| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ | -| width | number | Yes | Width of the offscreen canvas. | -| height | number | Yes | Height of the offscreen canvas. | -| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | See RenderingContextSettings.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ------------------------------ | +| width | number | Yes | Width of the offscreen canvas. | +| height | number | Yes | Height of the offscreen canvas. | +| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No | See RenderingContextSettings.| ## Attributes -| Name | Type | Description | -| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| [fillStyle](#fillstyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.
- When the type is **string**, this attribute indicates the color of the filling area.
- When the type is **number**, this attribute indicates the color of the filling area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| -| [lineWidth](#linewidth) | number | Line width.
Since API version 9, this API is supported in ArkTS widgets.| -| [strokeStyle](#strokestyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.
- When the type is **string**, this attribute indicates the stroke color.
- When the type is **number**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| -| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **butt**: The endpoints of the line are squared off.
- **round**: The endpoints of the line are rounded.
- **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.
- Default value: **'butt'**
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:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **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**.
- Default value: **'miter'**
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.
- Default value: **10**
Since API version 9, this API is supported in ArkTS widgets.| -| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
(Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.
Default value: **'normal normal 14px sans-serif'**
Since API version 9, this API is supported in ArkTS widgets.| -| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
**NOTE**

In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
- Default value: **'left'**
Since API version 9, this API is supported in ArkTS widgets.| -| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
**'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.
- **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.
- Default value: **'alphabetic'**
Since API version 9, this API is supported in ArkTS widgets.| -| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | -| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
- Default value: **0.0**
Since API version 9, this API is supported in ArkTS widgets.| -| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.
- Default value: **'source-over'**
Since API version 9, this API is supported in ArkTS widgets.| -| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
- Default value: **0.0**
Since API version 9, this API is supported in ArkTS widgets.| -| [shadowColor](#shadowcolor) | string | Shadow color.
Since API version 9, this API is supported in ArkTS widgets.| -| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object.
Since API version 9, this API is supported in ArkTS widgets.| -| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object.
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.
- Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| +| Name | Type | Description | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| [fillStyle](#fillstyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.
- When the type is **string**, this attribute indicates the color of the filling area.
- When the type is **number**, this attribute indicates the color of the filling area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| +| [lineWidth](#linewidth) | number | Line width.
Since API version 9, this API is supported in ArkTS widgets.| +| [strokeStyle](#strokestyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.
- When the type is **string**, this attribute indicates the stroke color.
- When the type is **number**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| +| [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **butt**: The endpoints of the line are squared off.
- **round**: The endpoints of the line are rounded.
- **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.
- Default value: **'butt'**
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:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **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**.
- Default value: **'miter'**
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.
- Default value: **10**
Since API version 9, this API is supported in ArkTS widgets.| +| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
(Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and line height. The unit must be specified and can only be px or vp.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.
Default value: **'normal normal 14px sans-serif'**
Since API version 9, this API is supported in ArkTS widgets.| +| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
**NOTE**

In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
- Default value: **'left'**
Since API version 9, this API is supported in ArkTS widgets.| +| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
**'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.
- **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.
- Default value: **'alphabetic'**
Since API version 9, this API is supported in ArkTS widgets.| +| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | +| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
- Default value: **0.0**
Since API version 9, this API is supported in ArkTS widgets.| +| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.
- Default value: **'source-over'**
Since API version 9, this API is supported in ArkTS widgets.| +| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
- Default value: **0.0**
Since API version 9, this API is supported in ArkTS widgets.| +| [shadowColor](#shadowcolor) | string | Shadow color.
Since API version 9, this API is supported in ArkTS widgets.| +| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object.
Since API version 9, this API is supported in ArkTS widgets.| +| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object.
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.
- Default value: **true**
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:
- **'low'**: low quality.
- **'medium'**: medium quality.
- **'high'**: high quality.
Default value: **'low'**
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:
- **'inherit'**: The text direction is inherited from the **\** component.
- **'ltr'**: The text direction is from left to right.
- **'rtl'**: The text direction is from right to left.
Default value: **'inherit'**
Since API version 9, this API is supported in ArkTS widgets.| +| [filter](#filter) | string | Filter effect. Available values are as follows:
- **'none'**: no filter effect.
- **'blur'**: applies the Gaussian blur for the image.
- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.
- **'contrast'**: adjusts the image contrast.
- **'grayscale'**: converts the image to a grayscale image.
- **'hue-rotate'**: applies hue rotation to the image.
- **'invert'**: inverts the input image.
- **'opacity'**: sets the opacity of the image.
- **'saturate'**: sets the saturation of the image.
- **'sepia'**: converts the image to dark brown.
Default value: **'none'**
Since API version 9, this API is supported in ArkTS widgets.| > **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'. @@ -706,7 +709,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------- | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| @@ -755,7 +758,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------ | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| @@ -804,7 +807,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------- | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| @@ -855,7 +858,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | "" | Text to draw. | | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| @@ -905,7 +908,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | "" | Text to draw. | | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| @@ -955,14 +958,14 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ---------- | | text | string | Yes | "" | Text to be measured.| **Return value** -| Type | Description | -| ----------- | ------------------------------------------------------------ | +| Type | Description | +| ----------- | ---------------------------------------- | | TextMetrics | **TextMetrics** object.
Since API version 9, this API is supported in ArkTS widgets.| **TextMetrics** attributes @@ -1027,7 +1030,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ---------------------------------------- | ---- | ---- | ------------ | | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.| @@ -1123,7 +1126,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | | x | number | Yes | 0 | X-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.| @@ -1173,7 +1176,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | | x | number | Yes | 0 | X-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position.| @@ -1268,16 +1271,16 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | | repetition | string | Yes | "" | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.| **Return value** -| Type | Description | -| ------------------------------- | ----------------------- | -| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| +| Type | Description | +| ---------------------------------------- | ----------------------- | +| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| **Example** @@ -1324,7 +1327,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------- | | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.| | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.| @@ -1378,7 +1381,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.| | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.| @@ -1430,7 +1433,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ---------- | | x | number | Yes | 0 | X-coordinate of the center point of the arc.| | y | number | Yes | 0 | Y-coordinate of the center point of the arc.| @@ -1483,7 +1486,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | --------------- | | x1 | number | Yes | 0 | X-coordinate of the first point on the arc.| | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.| @@ -1535,16 +1538,16 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| ---------------- | ------- | ---- | ----- | ----------------- | -| x | number | Yes | 0 | X-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. | -| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | -| 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.| -| 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.
**true**: Draw the ellipse counterclockwise.
**false**: Draw the ellipse clockwise. | +| Name | Type | Mandatory | Default Value | Description | +| ---------------- | ------- | ---- | ----- | ---------------------------------------- | +| x | number | Yes | 0 | X-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. | +| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | +| 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. | +| 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.
**true**: Draw the ellipse counterclockwise.
**false**: Draw the ellipse clockwise.| **Example** @@ -1589,7 +1592,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| @@ -1639,7 +1642,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.
The options are **"nonzero"** and **"evenodd"**.| @@ -1682,7 +1685,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | path | Path2D | Yes | | A **Path2D** path to fill. | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.
The options are **"nonzero"** and **"evenodd"**.| @@ -1741,7 +1744,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.
The options are **"nonzero"** and **"evenodd"**.| @@ -1789,9 +1792,9 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | -------- | -------------- | ---- | --------- | ---------------------------------------- | -| path | Path2D | Yes | | A **Path2D** path to clip.| +| path | Path2D | Yes | | A **Path2D** path to clip. | | fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.
The options are **"nonzero"** and **"evenodd"**.| **Example** @@ -1841,15 +1844,77 @@ Since API version 9, this API is supported in ArkTS widgets. 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. **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| ------ | ------ | ---- | ---- | ------------ | -| filter | string | Yes | - | Functions that accept various filter effects.| +| Name | Type | Mandatory | Default Value | Description | +| ------ | ------ | ---- | ---- | ---------------------------------------- | +| filter | string | Yes | - | Functions that accept various filter effects. Available values are as follows:
- **'none'**: no filter effect.
- **'blur'**: applies the Gaussian blur for the image.
- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.
- **'contrast'**: adjusts the image contrast.
- **'grayscale'**: converts the image to a grayscale image.
- **'hue-rotate'**: applies hue rotation to the image.
- **'invert'**: inverts the input image.
- **'opacity'**: sets the opacity of the image.
- **'saturate'**: sets the saturation of the image.
- **'sepia'**: converts the image to dark brown.
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 @@ -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. +**Return value** + +| Type | Description | +| ---------------------------------------- | ----- | +| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | Matrix object.| ### resetTransform @@ -1874,10 +1944,48 @@ Since API version 9, this API is supported in ArkTS widgets. 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. +**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 @@ -1889,7 +1997,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----- | ------ | ---- | ---- | ---------------------------------------- | | angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| @@ -1936,7 +2044,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | | x | number | Yes | 0 | Horizontal scale factor.| | y | number | Yes | 0 | Vertical scale factor.| @@ -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. > **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. > > - x' = scaleX \* x + skewY \* y + translateX @@ -1994,7 +2101,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------------- | | a | number | Yes | 0 | X-axis scale. | | b | number | Yes | 0 | X-axis skew. | @@ -2052,7 +2159,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------------- | | a | number | Yes | 0 | X-axis scale. | | b | number | Yes | 0 | X-axis skew. | @@ -2107,7 +2214,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | | x | number | Yes | 0 | X-axis translation.| | y | number | Yes | 0 | Y-axis translation.| @@ -2160,7 +2267,7 @@ Since API version 9, this API is supported in ArkTS widgets, except that **Pixel **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ----- | ---------------------------------------- | ---- | ---- | ----------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.| | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | @@ -2229,7 +2336,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | --------- | ---------------------------------------- | ---- | ---- | ---------------- | | imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object to copy.| @@ -2247,7 +2354,7 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2268,7 +2375,7 @@ Draws the input [PixelMap](../apis/js-apis-image.md#pixelmap7) object on the can **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2292,7 +2399,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| @@ -2343,9 +2450,9 @@ Since API version 9, this API is supported in ArkTS widgets. ### 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. @@ -2353,15 +2460,15 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | -| ----------- | ------ | ---- | ------------ | ----------------------------- | -| 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. | -| dy | number | 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.| -| dirtyY | number | 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. | -| dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. | +| Name | Type | Mandatory | Default Value | Description | +| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- | +| imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. | +| dx | number \| string10+ | Yes | 0 | X-axis offset of the rectangular area on the canvas. | +| dy | number \| string10+ | Yes | 0 | Y-axis offset of the rectangular area on the canvas. | +| dirtyX | number \| string10+ | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.| +| dirtyY | number \| string10+ | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.| +| dirtyWidth | number \| string10+ | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. | +| dirtyHeight | number \| string10+ | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. | **Example** @@ -2410,7 +2517,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Description | +| Name | Type | Description | | -------- | -------- | ------------------- | | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.| @@ -2558,16 +2665,50 @@ Since API version 9, this API is supported in ArkTS widgets. 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. **Parameters** -| Name | Type | Description | +| Name | Type | Description | | ------- | --------------------- | ---------------------------------------- | -| quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.| +| quality | imageSmoothingQuality | Quality of image smoothing.
- **'low'**: low quality.
- **'medium'**: medium quality.
- **'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 @@ -2715,7 +2856,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | | x0 | number | Yes | 0 | X-coordinate of the start point.| | y0 | number | Yes | 0 | Y-coordinate of the start point.| @@ -2769,7 +2910,7 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory | Default Value | Description | +| Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------------- | | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | @@ -2822,11 +2963,11 @@ Creates a conic gradient. **Parameters** -| 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.| -| 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. | +| 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.| +| 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. | **Example** @@ -2864,9 +3005,3 @@ struct OffscreenCanvasConicGradientPage { ``` ![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.