diff --git a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md index a55cb9cd17cda67cc2989e5916db19c5cf36cc47..3fb83498972a425ef11821c3292a74bbdb81016d 100644 --- a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md +++ b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md @@ -1,12 +1,12 @@ # Applying Custom Drawing in the Widget -You can apply custom drawing in your ArkTS widget to create a more vibrant experience. Use the [Canvas](../reference/arkui-ts/ts-components-canvas-canvas.md) component to create a canvas on the widget, and then use the [CanvasRenderingContext2D](../reference/arkui-ts/ts-canvasrenderingcontext2d.md) object to draw custom graphics on the canvas. The following code snippet draws a smiling face in the center of a canvas. +You can apply custom drawing in your ArkTS widget to create a more vibrant experience. Use the [\](../reference/arkui-ts/ts-components-canvas-canvas.md) component to create a canvas on the widget, and then use the [CanvasRenderingContext2D](../reference/arkui-ts/ts-canvasrenderingcontext2d.md) object to draw custom graphics on the canvas. The following code snippet draws a smiling face in the center of a canvas. ```ts @Entry @Component -struct Card { +struct WidgetCard { private canvasWidth: number = 0; private canvasHeight: number = 0; // Initialize CanvasRenderingContext2D and RenderingContextSettings. @@ -26,9 +26,9 @@ struct Card { this.canvasWidth = this.context.width; this.canvasHeight = this.context.height; // Draw the background of the canvas. - this.context.fillStyle = 'rgba(203, 154, 126, 1.00)'; + this.context.fillStyle = '#EEF0FF'; this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight); - // Draw a red circle in the center of the canvas. + // Draw a circle in the center of the canvas. this.context.beginPath(); let radius = this.context.width / 3; let circleX = this.context.width / 2; @@ -36,35 +36,48 @@ struct Card { this.context.moveTo(circleX - radius, circleY); this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true); this.context.closePath(); - this.context.fillStyle = 'red'; + this.context.fillStyle = '#5A5FFF'; this.context.fill(); // Draw the left eye of the smiling face. - let leftR = radius / 4; - let leftX = circleX - (radius / 2); - let leftY = circleY - (radius / 3.5); + let leftR = radius / 13; + let leftX = circleX - (radius / 2.3); + let leftY = circleY - (radius / 4.5); this.context.beginPath(); - this.context.arc(leftX, leftY, leftR, 0, Math.PI, true); - this.context.strokeStyle = '#ffff00'; - this.context.lineWidth = 10; + this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true); + this.context.strokeStyle = '#FFFFFF'; + this.context.lineWidth = 15; this.context.stroke(); // Draw the right eye of the smiling face. - let rightR = radius / 4; - let rightX = circleX + (radius / 2); - let rightY = circleY - (radius / 3.5); + let rightR = radius / 13; + let rightX = circleX + (radius / 2.3); + let rightY = circleY - (radius / 4.5); this.context.beginPath(); - this.context.arc(rightX, rightY, rightR, 0, Math.PI, true); - this.context.strokeStyle = '#ffff00'; - this.context.lineWidth = 10; + this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true); + this.context.strokeStyle = '#FFFFFF'; + this.context.lineWidth = 15; + this.context.stroke(); + // Draw the nose of the smiling face. + let startX = circleX; + let startY = circleY - 20; + this.context.beginPath(); + this.context.moveTo(startX, startY); + this.context.lineTo(startX - 8, startY + 40); + this.context.lineTo(startX + 8, startY + 40); + this.context.strokeStyle = '#FFFFFF'; + this.context.lineWidth = 15; + this.context.lineCap = 'round' + this.context.lineJoin = 'round' this.context.stroke(); // Draw the mouth of the smiling face. - let mouthR = radius / 2.5; + let mouthR = radius / 2; let mouthX = circleX; - let mouthY = circleY + (radius / 3); + let mouthY = circleY + 10; this.context.beginPath(); - this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true); - this.context.strokeStyle = '#ffff00'; - this.context.lineWidth = 10; + this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true); + this.context.strokeStyle = '#FFFFFF'; + this.context.lineWidth = 15; this.context.stroke(); + this.context.closePath(); }) } }.height('100%').width('100%') @@ -74,4 +87,4 @@ struct Card { The figure below shows the effect. -![WidgetCanvasDemo](figures/WidgetCanvasDemo.png) \ No newline at end of file +![WidgetCanvasDemo](figures/WidgetCanvasDemo.jpeg) \ No newline at end of file diff --git a/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg b/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..3961eba1947c74229e43af53d1ad525af414028f Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg differ diff --git a/en/application-dev/application-models/figures/WidgetCanvasDemo.png b/en/application-dev/application-models/figures/WidgetCanvasDemo.png deleted file mode 100644 index c09c82dd88cf002020990b5b8327701c445eeaaf..0000000000000000000000000000000000000000 Binary files a/en/application-dev/application-models/figures/WidgetCanvasDemo.png and /dev/null differ diff --git a/en/application-dev/reference/apis/js-apis-settings.md b/en/application-dev/reference/apis/js-apis-settings.md index e888b0ef9b89fcad43556e271db6e5a6fceaeea0..2acac025ffeffe32677f5af17b1e1cabfeb6655b 100644 --- a/en/application-dev/reference/apis/js-apis-settings.md +++ b/en/application-dev/reference/apis/js-apis-settings.md @@ -249,7 +249,7 @@ Sets the value for a data item. This API uses a promise to return the result. ```js import featureAbility from '@ohos.ability.featureAbility'; -// Update the value of SCREEN_BRIGHTNESS_STATUS. (As this data item exists in the database, the setValue API will update the value of the data item.) +// Update the value of SCREEN_BRIGHTNESS_STATUS. (As this data item exists in the database, the setValue API will update its value.) let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS); let helper = featureAbility.acquireDataAbilityHelper(uri); // @ts-ignore @@ -265,6 +265,8 @@ enableAirplaneMode(enable: boolean, callback: AsyncCallback\): void Enables or disables airplane mode. This API uses an asynchronous callback to return the result. +This API is not supported currently. + **System capability**: SystemCapability.Applications.settings.Core **Parameters** @@ -293,6 +295,8 @@ enableAirplaneMode(enable: boolean): Promise\ Enables or disables airplane mode. This API uses a promise to return the result. +This API is not supported currently. + **System capability**: SystemCapability.Applications.settings.Core **Parameters** diff --git a/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif b/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif deleted file mode 100644 index 6b5dd0f0ca7d09218af2641e4ae2900eb394623d..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index 403bce55ad683f76315967c1c563c044d324631b..00095beb0f5a5739de8a9ab62da63a1807e475c5 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -14,14 +14,18 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | -| duration | number | No | Animation duration, in ms.
Default value: **1000**
Unit: ms
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms.
- A value less than 1 evaluates to the value **0**.
- If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| -| tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**
**NOTE**
A value less than 1 evaluates to the value **1**.| +| duration | number | No | Animation duration, in ms.
Default value: **1000**
Unit: ms
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms.
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| +| tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**
**NOTE**
A value less than 0 evaluates to the value **1**.| | curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)9+ | No | Animation curve. The default curve is linear.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| -| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0**
Value range: [0, +∞)
**NOTE**
A value less than 1 evaluates to the value **0**. If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| +| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0**
Value range: [0, +∞)
**NOTE**
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| | iterations | number | No | Number of times that the animation is played.
Default value: **1**
Value range: [-1, +∞)
**NOTE**
The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that no animation is applied.| -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.
For details about the restrictions, see **Notes about PlayMode**.| | onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This callback is not invoked when **iterations** is set to **-1**.| +> **Notes about PlayMode**: +> - **PlayMode.Normal** and **PlayMode.Alternate** are recommended. Under these settings, the first round of the animation is played forwards. If **PlayMode.Reverse** or **PlayMode.AlternateReverse** is used, the first round of the animation is played backwards. In this case, the animation jumps to the end state and then starts from there. +> - When using **PlayMode.Alternate** or **PlayMode.AlternateReverse**, make sure the final state of the animation is the same as the value of the state variable. In other words, make sure the last round of the animation is played forwards. When **PlayMode.Alternate** is used, **iterations** must be set to an odd number. When **PlayMode.AlternateReverse** is used, **iterations** must be set to an even number. +> - **PlayMode.Reverse** is not recommended. Under this setting, the animation jumps to the end state at the beginning, and its final state will be different from the value of the state variable. ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-stack.md b/en/application-dev/reference/arkui-ts/ts-container-stack.md index 0bfa204dd223123bd5a1ef98cfc45eb1136b42b8..fb8b772e1eaaa265d15b9a38140ff77e7d629577 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-stack.md +++ b/en/application-dev/reference/arkui-ts/ts-container-stack.md @@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ------------ | ------------------------------------------- | ------------------------------------------------------------ | -| alignContent | [Alignment](ts-appendix-enums.md#alignment) | Alignment of child components in the container.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When this attribute and the universal attribute [align](ts-universal-attributes-location.md) are both set, only the **align** setting takes effect.| +| alignContent | [Alignment](ts-appendix-enums.md#alignment) | Alignment of child components in the container.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When both this attribute and the universal attribute [align](ts-universal-attributes-location.md) are set, whichever is set last takes effect.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index 47c8c41f78db5961fb831835c0b73fd8b91e129e..9adcb73285ee60ea5ab75832b6c7e404e8e523e2 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -22,8 +22,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| width | string \| number | No| Width of the circle.
Default value: **0**| -| height | string \| number | No| Height of the circle.
Default value: **0**| +| width | string \| number | No| Width of the circle.
Default value: **0**
**NOTE**
An invalid value is handled as the default value.| +| height | string \| number | No| Height of the circle.
Default value: **0**
**NOTE**
An invalid value is handled as the default value.| ## Attributes @@ -31,19 +31,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md) | Color of the fill area.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | Stroke dashes.
Default value: **[]**
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color of the fill area.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | Stroke dashes.
Default value: **[]**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.
Default value: **LineCapStyle.Butt**
Since API version 9, this API is supported in ArkTS widgets.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not work for the **\** component, which does not have corners.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**
Since API version 9, this API is supported in ArkTS widgets.| | strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Default value: **4**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | Stroke width.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | Length | Stroke width.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| | antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| + ## Example ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 95d6e04adb6cdac5a36d57cc6013c3eb98434491..210728ef5116708567ce98e41db1d08ae228d88e 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -22,8 +22,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| width | string \| number | No| Width.
Default value: **0**| -| height | string \| number | No| Height.
Default value: **0**| +| width | string \| number | No| Width.
Default value: **0**
**NOTE**
An invalid value is handled as the default value.| +| height | string \| number | No| Height.
Default value: **0**
**NOTE**
An invalid value is handled as the default value.| + + ## Attributes @@ -31,19 +33,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not work for the **\** component, which does not have corners.| | strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| + ## Example ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md index f17d6856796e158066f4cbe1e20e046fa8d562ff..258fafdf9b7bbb003be35567cbf4aefbfd30f27d 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -21,8 +21,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | -| width | string \| number | No| 0 | Width.| -| height | string \| number | No| 0 | Height.| +| width | string \| number | No| 0 | Width.
**NOTE**
An invalid value is handled as the default value.| +| height | string \| number | No| 0 | Height.
**NOTE**
An invalid value is handled as the default value.| + ## Attributes @@ -31,20 +32,22 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| startPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.
Since API version 9, this API is supported in ArkTS widgets.| -| endPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.
Since API version 9, this API is supported in ArkTS widgets.| +| startPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| endPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not work for the **\** component, which does not have corners.| | strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a shape with a sharp angle.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| -| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| + + ## Example ### Example 1 diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md index 25ba06a014b013ed97219d21cca40cca8f8e90c3..5cb272b6f3d39ac9394ff3e60384a9c41f8a50fc 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -19,11 +19,13 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name | Type | Mandatory| Description | -| -------- | ---------------- | ---- | ----------------------------------- | -| width | number \| string | No | Width of the rectangle where the path is located.
Default value: **0** | -| height | number \| string | No | Height of the rectangle where the path is located.
Default value: **0** | -| commands | string | No | Command for drawing the path.
Default value: **''**| +| Name | Type | Mandatory| Description | +| -------- | ---------------- | ---- | ------------------------------------------------------------ | +| width | number \| string | No | Width of the rectangle where the path is located.
Default value: **0**
**NOTE**
An invalid value is handled as the default value.| +| height | number \| string | No | Height of the rectangle where the path is located.
Default value: **0**
**NOTE**
An invalid value is handled as the default value.| +| commands | string | No | Command for drawing the path.
Default value: **''**
**NOTE**
An invalid value is handled as the default value.| + + ## Attributes @@ -31,17 +33,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Default Value | Description | | -------- | ----------------------------------- | ---- | ---------------------------------------- | -| commands | string | '' | Command for drawing the path. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).
Since API version 9, this API is supported in ArkTS widgets.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| commands | string | '' | Command for drawing the path. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | Length | 1 | Width of the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | Length | 1 | Width of the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| The supported commands are as follows: diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index 8a0450ff17a692d98170a9dca96d7acb65250660..eda62dee5b2e3e5e5d50ddc2e42d1ae2944b8b93 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -22,8 +22,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | -| width | string \| number | No| 0 | Width.| -| height | string \| number | No| 0 | Height.| +| width | string \| number | No| 0 | Width.
**NOTE**
An invalid value is handled as the default value.| +| height | string \| number | No| 0 | Height.
**NOTE**
An invalid value is handled as the default value.| + ## Attributes @@ -32,17 +33,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | Vertex coordinates of the polygon.
Since API version 9, this API is supported in ArkTS widgets.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| points | Array<Point> | [] | Vertex coordinates of the polygon.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Point diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index 6681e790aeb02e3bcfb706cf0162e9c0376e7906..a8cf8ca7ccfef77b5a17e7e4326fabfc49ba1506 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -22,8 +22,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | -| width | string \| number | No| 0 | Width.| -| height | string \| number | No| 0 | Height.| +| width | string \| number | No| 0 | Width.
**NOTE**
An invalid value is handled as the default value.| +| height | string \| number | No| 0 | Height.
**NOTE**
An invalid value is handled as the default value.| + ## Attributes @@ -32,18 +33,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | List of coordinates that the polyline passes through.
Since API version 9, this API is supported in ArkTS widgets.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| points | Array<Point> | [] | List of coordinates that the polyline passes through.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| + + ## Point diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index c7fac4fa35067c4e9be6e6e7aca05f0d7e25bdb1..879805a6635cb0decefa842036bae5b2c88ba896 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -23,12 +23,11 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | -| width | string \| number | No| 0 | Width.| -| height | string \| number | No| 0 | Height.| -| radius | string \| number \| Array<string \| number> | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| -| radiusWidth | string \| number | No| 0 | Width of the rounded corner.| -| radiusHeight | string \| number | No| 0 | Height of the rounded corner.| - +| width | string \| number | No| 0 | Width.
**NOTE**
An invalid value is handled as the default value.| +| height | string \| number | No| 0 | Height.
**NOTE**
An invalid value is handled as the default value.| +| radius | string \| number \| Array<string \| number> | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.
This attribute works in a similar manner as **radiusWidth**/**radiusHeight**. When they are used together, it takes precedence over **radiusWidth**/**radiusHeight**.
**NOTE**
An invalid value is handled as the default value.| +| radiusWidth | string \| number | No| 0 | Width of the rounded corner.
**NOTE**
An invalid value is handled as the default value.| +| radiusHeight | string \| number | No| 0 | Height of the rounded corner.
**NOTE**
An invalid value is handled as the default value.| ## Attributes @@ -36,21 +35,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.
Since API version 9, this API is supported in ArkTS widgets.| -| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.
Since API version 9, this API is supported in ArkTS widgets.| -| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.
Since API version 9, this API is supported in ArkTS widgets.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| - +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | Length | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value cannot be a percentage.
An invalid value is handled as the default value.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index c1d54675e22bf4d55b17ccde9727b318c028186f..c9506bbbf823f263f8675fc0329eb5d51f5f2f0c 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -2,7 +2,6 @@ The **\** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components. - 1. Drawing components use **\** as their parent to implement the effect similar to SVG. 2. The **\** component is used independently to draw a specific shape. @@ -36,17 +35,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | View port of the shape.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If of the string type, the value cannot be a percentage.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.| +| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | View port of the shape.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If of the string type, the value cannot be a percentage.
An invalid value is handled as the default value.| +| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If the value is invalid, no stroke will be drawn.| +| strokeDashArray | Array<Length> | [] | Stroke dashes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| +| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
An invalid value is handled as the default value.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | number \| string | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If of the string type, the value cannot be a percentage.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**. The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.| +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.| +| strokeWidth | number \| string | 1 | Stroke width.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If of the string type, the value cannot be a percentage.
An invalid value is handled as the default value.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| | mesh8+ | Array<number>,number,number | [],0,0 | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.
Since API version 9, this API is supported in ArkTS widgets.| diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index 3e756f519e74b7f851b3af2401e7272eb133a4a9..cbc04498d8233ee5fac3f7cef621efe885388131 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -19,14 +19,18 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Description| | -------- | -------- | -------- | -| duration | number | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.| -| tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.
Default value: **1.0**| +| duration | number | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| +| tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.
Default value: **1.0**
**NOTE**
A value less than 0 evaluates to the value **1**.| | curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| -| delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.
Default value: **0**| +| delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.
Default value: **0**
**NOTE**
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| | iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.
For details about the restrictions, see **Notes about PlayMode**.| | onFinish | () => void | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| +> **Notes about PlayMode**: +> - **PlayMode.Normal** and **PlayMode.Alternate** are recommended. Under these settings, the first round of the animation is played forwards. If **PlayMode.Reverse** or **PlayMode.AlternateReverse** is used, the first round of the animation is played backwards. In this case, the animation jumps to the end state and then starts from there. +> - When using **PlayMode.Alternate** or **PlayMode.AlternateReverse**, make sure the final state of the animation is the same as the value of the state variable. In other words, make sure the last round of the animation is played forwards. When **PlayMode.Alternate** is used, **iterations** must be set to an odd number. When **PlayMode.AlternateReverse** is used, **iterations** must be set to an even number. +> - **PlayMode.Reverse** is not recommended. Under this setting, the animation jumps to the end state at the beginning, and its final state will be different from the value of the state variable. ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 8018ee5d626d0fcb04dd36f3d70e2081736b189d..abf39f4dc607abdb37dedea6ed2407e22fb9f94c 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -12,23 +12,8 @@ You can configure the component transition animations through the **transition** | Name| Type| Description| | -------- | -------- | -------- | -| transition | TransitionOptions \| TransitionEffect10+ | Transition effects when the component is inserted, displayed, deleted, or hidden.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details, see the description of **TransitionOptions** and **TransitionEffect**.| +| transition | TransitionOptions(deprecated) \| TransitionEffect10+ | Transition effects when the component is inserted, displayed, deleted, or hidden.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details, see the descriptions of **TransitionOptions** and **TransitionEffect**.| -## TransitionOptions -Defines the transition effect by setting parameters in the struct. -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, the default value **TransitionType.All** is used, which means that the transition effect works for both component addition and deletion.| -| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.
Since API version 9, this API is supported in ArkTS widgets.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| -| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: X-component of the rotation vector.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| - -> **NOTE** -> -> 1. When set to a value of the **TransitionOptions** type, the **transition** attribute must work with [animateTo](ts-explicit-animation.md). The animation duration, curve, and delay follow the settings in **animateTo**. -> 2. If the value of the **TransitionOptions** type has only **type** specified, the transition effect will take on the default opacity. For example, **{type: TransitionType.Insert}** produces the same effect as **{type: TransitionType.Insert, opacity: 0}**. If a specific style is specified, the transition effect will not take on the default opacity. -> 3. For details about the scale and rotate effects, see [Transformation](ts-universal-attributes-transformation.md). ## TransitionEffect10+ Defines the transition effect by using the provided APIs, as listed below. @@ -37,7 +22,7 @@ Defines the transition effect by using the provided APIs, as listed below. | opacity | number | Yes| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Value range: [0, 1]
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| | translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | Yes| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.| | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | Yes| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| -| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Yes| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Yes| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: X-component of the rotation vector.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| | move | [TransitionEdge](ts-appendix-enums.md#transitionedge10) | Yes| Slide-in and slide-out of the component from the screen edge during transition. It is essentially a translation effect, which is the value of the start point of insertion and the end point of deletion.| | asymmetric | appear: TransitionEffect,
disappear: TransitionEffect
| Yes| Asymmetric transition effect.
The first parameter indicates the transition effect for appearance, and the second parameter indicates the transition effect for disappearance.
If the **asymmetric** function is not used for **TransitionEffect**, the transition effect takes effect for both appearance and disappearance of the component.| | combine | TransitionEffect | No| Combination of transition effects.| @@ -49,7 +34,7 @@ The static functions listed in the preceding table are used to create a **Transi | -------- | -------- | | IDENTITY | Disables the transition effect.| | OPACITY | Applies a transition effect with the opacity of 0. It is equivalent to **TransitionEffect.opacity(0)**.| -| SLIDE | Applies a transition effect of sliding in from the left when the component appears and sliding out from the right when the component disappears. It is equivalent to **TransitionEffect.asymmetric(TransitionEffect.START, TrasitionEffect.END)**.| +| SLIDE | Applies a transition effect of sliding in from the left when the component appears and sliding out from the right when the component disappears. It is equivalent to **TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START), TransitionEffect.move(TransitionEdge.END))**.| > **NOTE** > @@ -57,47 +42,26 @@ The static functions listed in the preceding table are used to create a **Transi > 2. The animation settings take effect in the following sequence: animation settings specified in the current **TransitionEffect** > animation settings specified in the previous **TransitionEffect** > animation settings specified in **animateTo** that triggers the component to appear and disappear. > 3. If **animateTo** is not used and **TransitionEffect** does not have the **animation** parameter specified, the component will appear or disappear without any transition animation. > 4. If the value of an attribute specified in **TransitionEffect** is the same as the default value, no transition animation is applied for the attribute. For example, with **TransitionEffect.opacity(1).animation({duration:1000})**, because the default value of **opacity** is also **1**, no opacity animation will be applied, and the component appears or disappears without any transition animation. +> 5. For details about the scale and rotate effects, see [Transformation](ts-universal-attributes-transformation.md). -## Example -The following is an example of using **TransitionOptions** for appearance and disappearance of the component. -```ts -// xxx.ets -@Entry -@Component -struct TransitionExample { - @State flag: boolean = true - @State show: string = 'show' +## TransitionOptions(deprecated) +Defines the transition effect by setting parameters in the struct. - build() { - Column() { - Button(this.show).width(80).height(30).margin(30) - .onClick(() => { - // Click the button to show or hide the image. - if (this.flag) { - this.show = 'hide'; - } else { - this.show = 'show'; - } - // When set to a value of the TransitionOptions type, the transition attribute must work with animateTo. - animateTo({ duration: 1000 }, () => { - this.flag = !this.flag - }) - }) - if (this.flag) { - // Apply different transition effects to the appearance and disappearance of the image. - // When the image appears, it changes from the state where the scale factor is 0 along the x-axis and 1 along the y-axis to the state where the scale factor is both 1 along x-axis and y-axis. - // When the image disappears, it rotates from 0° to 180° clockwise around the z-axis. - Image($r('app.media.testImg')).width(200).height(200) - .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) - .transition({ type: TransitionType.Delete, rotate: { z: 1, angle: 180 } }) - } - }.width('100%') - } -} -``` +This API is deprecated since API version 10. You are advised to use [TransitionEffect](#transitioneffect10) instead. +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, the default value **TransitionType.All** is used, which means that the transition effect works for both component addition and deletion.| +| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.
Since API version 9, this API is supported in ArkTS widgets.| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: X-component of the rotation vector.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| -Below you can see the example in action.
-![transitionComponent1](figures/transitionComponent1.gif) +> **NOTE** +> +> 1. When set to a value of the **TransitionOptions** type, the **transition** attribute must work with [animateTo](ts-explicit-animation.md). The animation duration, curve, and delay follow the settings in **animateTo**. +> 2. If the value of the **TransitionOptions** type has only **type** specified, the transition effect will take on the default opacity. For example, **{type: TransitionType.Insert}** produces the same effect as **{type: TransitionType.Insert, opacity: 0}**. If a specific style is specified, the transition effect will not take on the default opacity. + +## Example The following is an example of using the same transition effect for the appearance and disappearance (which are inverse processes) of the component. ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index 2fcbfe67f010ea80ca278932bf4210074d438878..c741d2973743543c25e430e7575c8162053780bf 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -12,7 +12,7 @@ A shared element transition is a transition animation applied to a component tha | Name | Parameter | Description | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.
- **id**: component ID.
- **duration**: animation duration.
Default value: **1000**
Unit: ms
Value range: [0, +∞)
The value **0** indicates that no animation is applied. A value less than 0 evaluates to the value **0**.
- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).
- **delay**: animation delay.
Default value: **0**
Unit: ms
Value range: [0, +∞)
A value less than 0 evaluates to the value **0**.
- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).
- **path**: path.
- **from**: start value.
- **to**: end value.
- **rotatable**: whether to rotate.
- **zIndex**: z-axis.
- **type**: animation type.| +| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.
- **id**: component ID.
- **duration**: animation duration.
Default value: **1000**
Unit: ms
Value range: [0, +∞)
The value **0** indicates that no animation is applied. A value less than 0 evaluates to the default value **1000**.
- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).
- **delay**: animation delay.
Default value: **0**
Unit: ms
Value range: [0, +∞)
A value less than 0 evaluates to the value **0**.
- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).
- **path**: path.
- **from**: start value.
- **to**: end value.
- **rotatable**: whether to rotate.
- **zIndex**: z-axis.
- **type**: animation type.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 76855375443264f0e2552db2b0df1fd339d8a53b..3ed88228f7e2ab9f68b61479f027f03b6b26c4cd 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -55,7 +55,7 @@ struct AspectRatioExample { Text(item) .backgroundColor(0xbbb2cb) .fontSize(40) - .height(160) + .width('100%') .aspectRatio(1.5) } }, item => item) @@ -70,10 +70,12 @@ struct AspectRatioExample { } ``` -**Figure 1** Portrait display
+**Figure 1** Portrait display + ![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif) -**Figure 2** Landscape display
+**Figure 2** Landscape display + ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif) ```ts @@ -133,4 +135,6 @@ struct DisplayPriorityExample { ``` +Landscape display in containers of different sizes + ![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)