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 ecc026e3fd2d4613e5b3fb0e48533e29d6f1a941..967d9a0f35c6e5ee71a4ebe8a09ceaed21305c53 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -2,6 +2,8 @@ ## 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) | @@ -19,6 +21,8 @@ ## ImageFit +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ------------------------------------------------------------ | | Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. | @@ -30,6 +34,8 @@ ## BorderStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ----------------------------------------------- | | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| @@ -38,6 +44,8 @@ ## LineJoinStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----- | -------------------- | | Bevel | Bevel is used to connect paths.| @@ -46,6 +54,8 @@ ## TouchType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------------ | | Down | A finger is pressed. | @@ -55,6 +65,8 @@ ## MouseButton +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | ---------------- | | Left | Left button on the mouse. | @@ -66,6 +78,8 @@ ## MouseAction +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | -------------- | | Press | The mouse button is pressed.| @@ -75,6 +89,8 @@ ## Curve +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------------------- | ------------------------------------------------------------ | | Linear | The animation speed keeps unchanged. | @@ -93,6 +109,8 @@ ## AnimationStatus +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | ------------------ | | Initial | The animation is in the initial state. | @@ -102,6 +120,8 @@ ## FillMode +Since API version 9, 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.| @@ -111,6 +131,8 @@ ## PlayMode +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ---------------- | ------------------------------------------------------------ | | Normal | The animation is played forwards. | @@ -120,6 +142,8 @@ ## KeyType +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description | | ---- | ---------- | | Down | The key is pressed.| @@ -127,6 +151,8 @@ ## KeySource +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | -------------------- | | Unknown | Unknown input device. | @@ -136,16 +162,18 @@ | Name | Description | | -------- | ---------------------- | -| Top | Top edge in the vertical direction. | -| Center(deprecated) | Center position in the vertical direction.
This API is deprecated since API version 9. | -| Bottom | Bottom edge in the vertical direction. | +| 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. | -| Middle(deprecated) | Center position in the horizontal direction.
This API is deprecated since API version 9. | -| End | End position in the horizontal direction. | +| 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 +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | ---------------------- | | Mon | Monday. | @@ -158,6 +186,8 @@ ## Direction +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description | | ---- | ---------------------- | | Ltr | Components are arranged from left to right. | @@ -166,6 +196,8 @@ ## BarState +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description | | ---- | -------------------------------- | | Off | Not displayed. | @@ -174,6 +206,8 @@ ## EdgeEffect +Since API version 9, this API is supported in ArkTS widgets. + | 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.| @@ -182,6 +216,8 @@ ## Alignment +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ---------------- | | TopStart | Top start. | @@ -196,6 +232,8 @@ ## TransitionType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------------------------------------------- | | All | The transition takes effect in all scenarios.| @@ -204,6 +242,8 @@ ## RelateType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------------- | | FILL | The current child component is scaled to fill the parent component. | @@ -211,6 +251,8 @@ ## 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. | @@ -219,6 +261,8 @@ ## 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.| @@ -227,6 +271,8 @@ ## Axis +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ---------- | ------------ | | Vertical | Vertical direction.| @@ -234,6 +280,8 @@ ## HorizontalAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------ | | Start | Aligned with the start edge in the same direction as the language in use.| @@ -242,6 +290,8 @@ ## 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.| @@ -253,6 +303,8 @@ ## ItemAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | ------------------------------------------------------------ | | Auto | The default configuration in the flex container is used. | @@ -264,6 +316,8 @@ ## 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.| @@ -273,6 +327,8 @@ ## 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. | @@ -281,6 +337,8 @@ ## VerticalAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------ | | Top | Top aligned. | @@ -289,6 +347,8 @@ ## ImageRepeat +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | -------------------------- | | X | The image is repeatedly drawn only along the horizontal axis.| @@ -298,6 +358,8 @@ ## ImageSize +Since API version 9, this API is supported in ArkTS widgets. + | 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.| @@ -306,6 +368,8 @@ ## GradientDirection +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ---------- | | Left | The gradient direction is from right to left.| @@ -320,6 +384,8 @@ ## SharedTransitionEffectType +Since API version 9, this API is supported in ArkTS widgets. + | 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.| @@ -327,6 +393,8 @@ ## FontStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ---------------- | | Normal | Standard font style.| @@ -334,6 +402,8 @@ ## FontWeight +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | -------------- | | Lighter | The font weight is lighter. | @@ -345,6 +415,8 @@ ## TextAlign +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | -------------- | | Start | Aligned with the start.| @@ -353,6 +425,8 @@ ## TextOverflow +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | -------------------------------------- | | Clip | Extra-long text is clipped. | @@ -361,6 +435,8 @@ ## TextDecorationType +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | ------------------ | | Underline | Line under the text. | @@ -370,6 +446,8 @@ ## TextCase +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | -------------------- | | Normal | The original case of the text is retained.| @@ -378,6 +456,8 @@ ## ResponseType8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ---------- | -------------------------- | | LongPress | The menu is displayed when the component is long-pressed. | @@ -385,6 +465,8 @@ ## HoverEffect8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | --------- | ---------------------------- | | Auto | Default hover effect.| @@ -394,6 +476,8 @@ ## Placement8+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------------- | ------------------------------------------------------------ | | Left | The popup is on the left of the component, vertically aligned with the component on the left. | @@ -411,6 +495,8 @@ ## CopyOptions9+ +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ----------- | -------------------- | | None | Copy is not allowed. | @@ -419,6 +505,8 @@ ## HitTestMode9+ +Since API version 9, this API is supported in ArkTS widgets. + | 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. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md index c624d6b2c04cf07d34927f0e7c02ed9668136bbb..7a046d68f40f64d8dbb085c3c51d6451c3550290 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -16,6 +16,8 @@ Not supported Blank(min?: number | string) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -28,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -88,6 +90,6 @@ struct BlankExample { } } ``` -If the width of the parent container is not set, set **min** to specify the minimum width of the **\** component. +If the width of the parent container is not set, set **min** to specify the minimum width of the **\** component. ![blankmin](figures/blankmin.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index c135dc560cff44bde103d3f7808705124938520d..75d67936b62bf0ac72456673ef1474e4840cb9fd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -16,6 +16,8 @@ This component can contain only one child component. **API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | @@ -28,6 +30,8 @@ This component can contain only one child component. Creates a button component based on text content. In this case, the component cannot contain child components. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | @@ -40,10 +44,13 @@ This component can contain only one child component. | Name | Type | Description | | ----------- | ----------- | --------------------------------- | -| type | ButtonType | Button type.
Default value: **ButtonType.Capsule** | -| stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**| +| type | ButtonType | Button type.
Default value: **ButtonType.Capsule**
Since API version 9, this API is supported in ArkTS widgets.| +| stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| ## ButtonType enums + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------- | ------------------ | | Capsule | Capsule-type button (the round corner is half of the height by default).| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md index 95fa03d4b2f7f94a02c450e37fca071a8db47d11..7bb73dc7db50b38fee5e68bd44a254291d27a8fc 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -14,6 +14,8 @@ Not supported Checkbox(options?: {name?: string, group?: string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type| Mandatory | Description| @@ -28,16 +30,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type| Description| | ------------- | ------- | -------- | -| select | boolean | Whether the check box is selected.
Default value: **false**| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.| +| select | boolean | Whether the check box is selected.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the check box when it is selected.
Since API version 9, this API is supported in ArkTS widgets.| ## Events In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. -| Name | Description| -| ----------| -------- | -|onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected. | +| Name | Description | +| -------------------------------------------- | ------------------------------------------------------------ | +| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes due to a manual operation.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index 64b116778047e73a49f79c4b4d859cab089fb6b4..0ff6c9dcf8bdf3c8e0cf55aaf3f68c439bdec48f 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -16,9 +16,9 @@ CheckboxGroup(options?: { group?: string }) Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group. -**Parameters** - +Since API version 9, this API is supported in ArkTS widgets. +**Parameters** | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | @@ -30,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| selectAll | boolean | Whether to select all.
Default value: **false**
If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.| +| selectAll | boolean | Whether to select all.
Default value: **false**
If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.
Since API version 9, this API is supported in ArkTS widgets.| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.
Since API version 9, this API is supported in ArkTS widgets.| ## Events @@ -39,9 +39,12 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name| Description| | -------- | -------- | -| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.| +| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.
Since API version 9, this API is supported in ArkTS widgets.| ## CheckboxGroupResult + +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | ------ | ------ | ------- | | name | Array<string> | Names of all the selected check boxes in the group.| @@ -49,6 +52,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ## SelectStatus +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description| | ----- | -------------------- | | All | All check boxes in the group are selected.| 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 a661b6abc36a1820fbcd634178d5cf2654911336..08d913698286ee0cb2cbfbc66386cd4a52a45bc9 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 @@ -18,6 +18,8 @@ Not supported DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description| @@ -26,8 +28,10 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) | max | number | No | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.
- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion.
Default value: **100**| | type8+ | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).
Default value: **DataPanelType.Circle**| - ## DataPanelType + +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------| ------------ | | Line | Line data panel.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md index e49501637b426dddbc21258651ba5ae556544d3d..cee85008404560b115d9dc021ed98e59da47d36a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -16,16 +16,18 @@ Not supported Divider() +Since API version 9, this API is supported in ArkTS widgets. + ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. | Name | Type | Description | | ----------- | ---------- | ------------------ | -| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**| -| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.| -| strokeWidth | number \| string | Width of the divider.
Default value: **1**| -| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**| +| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | number \| string | Width of the divider.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**
Since API version 9, this API is supported in ArkTS widgets.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index 5b4387a8c137fd14e9866238aef6785300f93918..2fe773177813164169dc35eddeba176a95fa4f89 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -17,6 +17,8 @@ Not supported Gauge(options:{value: number, min?: number, max?: number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -31,16 +33,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| value | number | Value of the chart. It can be dynamically changed.
Default value: **0**| -| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **0**| -| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **360**| -| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.| -| strokeWidth | Length | Stroke width of the chart.| +| value | number | Value of the chart. It can be dynamically changed.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **360**
Since API version 9, this API is supported in ArkTS widgets.| +| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | Stroke width of the chart.
Since API version 9, this API is supported in ArkTS widgets.| ## ColorStop Describes a gradient stop. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | | ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index 8ce5b933f607f7d26180efaef79e938fba6ce1fe..1562815bc640f37d2c83043be7d4c45bf0de2c8b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -23,11 +23,13 @@ Image(src: string | PixelMap | Resource) Obtains an image from the specified source for subsequent rendering and display. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type | Mandatory| Description | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability. Before loading images, the application must [request the required permissions](../../file-management/medialibrary-overview.md#requesting-permissions).
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission.| +| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://** path prefix are supported, which are used to access the image path provided by a Data ability. Before loading images, the application must [request the required permissions](../../file-management/medialibrary-overview.md#requesting-permissions).
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.
- ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.
- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.| ## Attributes @@ -35,20 +37,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ | -| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported. | -| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.
Default value: **ImageFit.Cover** | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **ImageRepeat.NoRepeat**
**NOTE**
This attribute is not applicable to SVG images.| -| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
**NOTE**
This attribute is not applicable to SVG images.
This attribute is not applicable to **PixelMap** objects.| -| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.
Default value: **ImageRenderMode.Original**
**NOTE**
This attribute is not applicable to SVG images.| -| sourceSize | {
width: number,
height: number
} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects or SVG images.| -| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.
Default value: **false** | -| fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.
Default value: **false** | -| fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.| -| autoResize | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.
Default value: **true**| -| syncLoad8+ | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.
Default value: **false**| -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)
When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.
Default value: **CopyOptions.None**| -| colorFilter9+ | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.| -| draggable9+ | boolean | Whether the image is draggable. This attribute cannot be used together with the [onDragStart](ts-universal-events-drag-drop.md) event.
Default value: **false**| +| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported.
Since API version 9, this API is supported in ArkTS widgets.| +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.
Default value: **ImageFit.Cover**
Since API version 9, this API is supported in ArkTS widgets.| +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **ImageRepeat.NoRepeat**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to SVG images.| +| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to SVG images.
This attribute is not applicable to **PixelMap** objects.| +| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.
Default value: **ImageRenderMode.Original**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to SVG images.| +| sourceSize | {
width: number,
height: number
} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is not applicable to **PixelMap** objects or SVG images.| +| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.
Since API version 9, this API is supported in ArkTS widgets.| +| autoResize | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| +| syncLoad8+ | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)
When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.
Default value: **CopyOptions.None**
This API is supported in ArkTS widgets.| +| colorFilter9+ | [ColorFilter](ts-types.md#colorfilter9) | Color filter of the image.
This API is supported in ArkTS widgets.| +| draggable9+ | boolean | Whether the image is draggable. This attribute cannot be used together with the [onDragStart](ts-universal-events-drag-drop.md) event.
Default value: **false**
This API is supported in ArkTS widgets.| > **NOTE** > @@ -57,6 +59,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ### ImageInterpolation +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | ------ | ------------------------- | | None | Interpolation image data is not used. | @@ -66,6 +70,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ### ImageRenderMode +Since API version 9, this API is supported in ArkTS widgets. + | Name | Description | | -------- | --------------------- | | Original | The image is rendered based on the original image, including the color. | @@ -77,9 +83,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
| -| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.| -| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.| +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
Since API version 9, this API is supported in ArkTS widgets.| +| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -157,7 +163,7 @@ struct ImageExample1 { ### Loading Online Images -The default network timeout period is 5 minutes for loading online images. When using an online image, you are advised to use **alt** to configure the placeholder image displayed during loading. If more flexible network configuration is required, use the [HTTP](../../connectivity/http-request.md) module in the SDK to send a network request, and then decode the returned data into a `PixelMap` in the **\** component. For details about image development, see [Image Development](../../media/image.md). The code snippet is as follows: +The default network timeout period is 5 minutes for loading online images. When using an online image, you are advised to use **alt** to configure the placeholder image displayed during loading. If more flexible network configuration is required, use the [HTTP](../../connectivity/http-request.md) module in the SDK to send a network request, and then decode the returned data into a **PixelMap** in the **\** component. For details about image development, see [Image Development](../../media/image.md). The code snippet is as follows: ```tsx // @ts-nocheck @@ -358,18 +364,14 @@ struct ImageExample3 { ```ts import fileio from '@ohos.fileio'; import fs from '@ohos.file.fs'; -import context from '@ohos.app.ability.context'; +import context from '@ohos.app.ability.common'; @Entry @Component struct LoadImageExample { @State resourcesPath: string = '' @State sandboxPath: string = '' - context: context.AbilityContext - - aboutToAppear() { - this.context = getContext(this) as context.AbilityContext - } + context: context.UIAbility = getContext(this) as context.UIAbilityContext build() { Column() { diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index f0fa614ed3781273928998927cf1bccd4c965efc..c79c37a1f2f89c290c2ea5b4d933ee02f61c3af5 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1923,7 +1923,7 @@ setTransform(transform?: Matrix2D): void Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a void API. -Since API version 9, this API can be used for ArkTS widgets. +Since API version 9, this API is supported in ArkTS widgets. ### translate diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index 82628d7048635b4d907c1b933130abc44a40f938..769ac6cfbc8cef5eb1d07376e29f79fea3794915 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -14,6 +14,8 @@ Not supported Canvas(context?: CanvasRenderingContext2D) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Default Value | Description | @@ -30,7 +32,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name | Parameter | Description | | ----------------------------- | ---- | -------------------- | -| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.| +| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.
Since API version 9, this API is supported in ArkTS widgets.| **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index 7c8b95655a9470ea7fd1951132f7b2c7974a45da..3dfd9e208ee1de61b82e2509041469caeef030a9 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -14,6 +14,8 @@ addColorStop(offset: number, color: string): void Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** 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 2de092ebab7c87d6e21d5fede32ec6c7e7a0f9b5..d6bc06bd61f2de584dc111bdc51a46ea44a94778 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 @@ -2,9 +2,21 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. -> **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. +> **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 + +ImageBitmap(src: string) + +Since API version 9, this API is supported in ArkTS widgets. + +**Parameters** + +| Name| Type| Mandatory| Default Value| Description | +| ------ | -------- | ---- | ------ | ------------------------------------------------------------ | +| src | string | Yes | - | Image source.
**NOTE**
ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.| @@ -12,8 +24,8 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. | Name| Type| Description| | -------- | -------- | -------- | -| width | number | Pixel width of the **ImageBitmap** object.| -| height | number | Pixel height of the **ImageBitmap** object.| +| width | number | Pixel width of the **ImageBitmap** object.
Since API version 9, this API is supported in ArkTS widgets.| +| height | number | Pixel height of the **ImageBitmap** object.
Since API version 9, this API is supported in ArkTS widgets.| **Example** @@ -54,3 +66,5 @@ An **ImageBitmap** object stores pixel data rendered on a canvas. close() Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API. + +Since API version 9, this API is supported in ArkTS widgets. diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md index a0e91d8853652b63091559dc7cea73df658a2920..7e03641e1383e7df649a64c9a579808840953650 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -12,9 +12,9 @@ An **ImageData** object stores pixel data rendered on a canvas. | Name| Type| Description| | -------- | -------- | -------- | -| width | number | Actual width of the rectangle on the canvas, in pixels.| -| height | number | Actual height of the rectangle on the canvas, in pixels.| -| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.| +| width | number | Actual width of the rectangle on the canvas, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| +| height | number | Actual height of the rectangle on the canvas, in pixels.
Since API version 9, this API is supported in ArkTS widgets.| +| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.
Since API version 9, this API is supported in ArkTS widgets.| > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index 9e783167f160f8cdb627d33abaad0ac4212be081..eedbf1762231bd583008cc4ed96bbc544bbb2a63 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -14,13 +14,15 @@ addPath(path: path2D, transform?:Matrix2D): void Adds a path to this path. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** - | Name| Type| Mandatory| Default Value| Description| - | -------- | -------- | -------- | -------- | -------- | - | path | path2D | Yes| - | Path to be added to this path.| - | transform | Matrix2D | No| null | Transformation matrix of the new path.| - +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| path | path2D | Yes| - | Path to be added to this path.| +| transform | Matrix2D | No| null | Transformation matrix of the new path.| + **Example** @@ -61,6 +63,8 @@ closePath(): void Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing. +Since API version 9, this API is supported in ArkTS widgets. + **Example** ```ts @@ -101,12 +105,14 @@ moveTo(x: number, y: number): void Moves the current coordinate point of the path to the target point, without drawing a line during the movement. +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 target point.| - | y | number | Yes| 0 | Y-coordinate of the target point.| +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes| 0 | X-coordinate of the target point.| +| y | number | Yes| 0 | Y-coordinate of the target point.| **Example** @@ -148,12 +154,14 @@ lineTo(x: number, y: number): void Draws a straight line from the current point to the target point. +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 target point.| - | y | number | Yes| 0 | Y-coordinate of the target point.| +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes| 0 | X-coordinate of the target point.| +| y | number | Yes| 0 | Y-coordinate of the target point.| **Example** @@ -196,16 +204,18 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** - | 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.| - | cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.| - | cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.| - | x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| - | y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| +| 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.| +| cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.| +| cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.| +| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| +| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| **Example** @@ -245,14 +255,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void Draws a quadratic curve on the canvas. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** - | 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.| - | x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| - | y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| +| 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.| +| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| +| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| **Example** @@ -292,16 +304,18 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, Draws an arc on the canvas. +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 center point of the arc.| - | y | number | Yes| 0 | Y-coordinate of the center point of the arc.| - | radius | number | Yes| 0 | Radius of the arc.| - | startAngle | number | Yes| 0 | Start radian of the arc.| - | endAngle | number | Yes| 0 | End radian of the arc.| - | counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.| +| 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.| +| radius | number | Yes| 0 | Radius of the arc.| +| startAngle | number | Yes| 0 | Start radian of the arc.| +| endAngle | number | Yes| 0 | End radian of the arc.| +| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.| **Example** @@ -340,15 +354,17 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void Draws an arc based on the radius and points on the arc. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** - | 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.| - | x2 | number | Yes| 0 | X-coordinate of the second point on the arc.| - | y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.| - | radius | number | Yes| 0 | Radius of the arc.| +| 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.| +| x2 | number | Yes| 0 | X-coordinate of the second point on the arc.| +| y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.| +| radius | number | Yes| 0 | Radius of the arc.| **Example** @@ -387,18 +403,20 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region on the canvas. +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** @@ -437,14 +455,16 @@ rect(x: number, y: number, w: number, h: number): void Creates a rectangle on the canvas. +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 upper left corner of the rectangle.| - | y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.| - | w | number | Yes| 0 | Width of the rectangle.| - | h | number | Yes| 0 | Height of the rectangle.| +| 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.| +| w | number | Yes| 0 | Width of the rectangle.| +| h | number | Yes| 0 | Height of the rectangle.| **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 91e41e1a16163adb8ccd9f1d2fdb00d59ebd903f..83529bd0aee34fc253b3d8f46da5fe2cce6b98cc 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -18,6 +18,8 @@ This component supports only one child component. Creates a badge. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -31,6 +33,8 @@ Creates a badge. Creates a badge based on the given string. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -41,6 +45,8 @@ Creates a badge based on the given string. ## BadgePosition +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | RightTop | The badge is displayed in the upper right corner of the parent component.| @@ -49,6 +55,8 @@ Creates a badge based on the given string. ## BadgeStyle +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory| Default Value | Description | | ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | | color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md index 3f39abc38c116009f358d0470200798c7a51bc2c..5f5cf16fe27d23978db2abf3d1ca58c74f926db4 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-column.md +++ b/en/application-dev/reference/arkui-ts/ts-container-column.md @@ -16,6 +16,8 @@ Supported Column(value?: {space?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -28,8 +30,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.
Default value: **HorizontalAlign.Center**| -| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the vertical direction.
Default value: **FlexAlign.Start**| +| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.
Default value: **HorizontalAlign.Center**
Since API version 9, this API is supported in ArkTS widgets.| +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the vertical direction.
Default value: **FlexAlign.Start**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-counter.md b/en/application-dev/reference/arkui-ts/ts-container-counter.md index fe9baa47e05b60a067545c3d6759373b524ee416..69869ef7610fb7359c194afc45da866d5c96df08 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/en/application-dev/reference/arkui-ts/ts-container-counter.md @@ -16,6 +16,8 @@ Supported Counter() +Since API version 9, this API is supported in ArkTS widgets. + ## Events @@ -23,8 +25,8 @@ The universal events and gestures are not supported. Only the following events a | Name| Description| | -------- | -------- | -| onInc(event: () => void) | Invoked when the number of monitored objects is increased.| -| onDec(event: () => void) | Invoked when the number of monitored objects is decreased.| +| onInc(event: () => void) | Invoked when the number of monitored objects is increased.
Since API version 9, this API is supported in ArkTS widgets.| +| onDec(event: () => void) | Invoked when the number of monitored objects is decreased.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md index e29fd91fd85ab9142191700d2b73042fe7f77440..6a5908578950850fbedda096b33f03c858097cd0 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md @@ -3,7 +3,7 @@ The **\** component allows for flexible layout of child components. > **NOTE** -> +> > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\](ts-container-column.md)** or **[\](ts-container-row.md)** instead under scenarios where consistently high performance is required. @@ -19,11 +19,13 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle Creates a standard **\** component. +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Default Value | Description | | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | -| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | +| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. | | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. | | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. | | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-gridcol.md b/en/application-dev/reference/arkui-ts/ts-container-gridcol.md index 33870e0f047cd048aad3f5e1e049da82cbe1202c..cff58a0505258230f3bb60a45ffba2a2c2553c7a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridcol.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridcol.md @@ -13,6 +13,8 @@ This component can contain only one child component. GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type | Mandatory| Description | @@ -25,12 +27,14 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC | Name| Type | Mandatory| Description | | ------ | ----------------------------- | ---- | ------------------------------------------------------------ | -| span | number \| GridColColumnOption | No | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.
Default value: **1**| -| offset | number \| GridColColumnOption | No | Number of offset columns relative to the previous child component of the grid
Default value: **0** | -| order | number \| GridColColumnOption | No | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.
Default value: **0**| +| span | number \| GridColColumnOption | No | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.
Default value: **1**
Since API version 9, this API is supported in ArkTS widgets.| +| offset | number \| GridColColumnOption | No | Number of offset columns relative to the previous child component of the grid
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| +| order | number \| GridColColumnOption | No | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| ## GridColColumnOption +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | number | No | Device of the minimum size. | @@ -38,7 +42,7 @@ GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColC | md | number | No | Medium-sized device. | | lg | number | No | Large-sized device. | | xl | number | No | Extra-large-sized device. | -| xxl | number | No | Ultra-large-sized device. | +| xxl | number | No | Ultra-large-sized device. | The values of `span`, `offset`, and `order` attributes are inherited in the sequence of `xs`, `sm`, `md`, `lg`, `xl`, and `xxl`. If no value is set for a breakpoint, the value is obtained from the previous breakpoint. 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 8522382eb79c938150837fae77a8067f63f19517..9b246e8755e9df19c31546666cc74720f9cc3798 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-gridrow.md +++ b/en/application-dev/reference/arkui-ts/ts-container-gridrow.md @@ -15,6 +15,8 @@ This component can contain the **\** child component. ## APIs GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name|Type|Mandatory|Description| @@ -26,6 +28,8 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt ## GutterOption +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | x | Length \| GridRowSizeOption | No | Gutter in the horizontal direction. | @@ -35,50 +39,62 @@ GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | Gutt Describes the numbers of grid columns for different device width types. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | number | No | Device of the minimum size. | -| sm | number | No | Small-sized device. | -| md | number | No | Medium-sized device. | -| lg | number | No | Large-sized device. | -| xl | number | No | Extra-large-sized device. | -| xxl | number | No | Ultra-large-sized device. | +| sm | number | No | Small-sized device. | +| md | number | No | Medium-sized device. | +| lg | number | No | Large-sized device. | +| xl | number | No | Extra-large-sized device. | +| xxl | number | No | Ultra-large-sized device. | ## GridRowSizeOption Describes the gutter sizes for different device width types. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | | xs | Length | No | Device of the minimum size. | -| sm | Length | No | Small-sized device. | -| md | Length | No | Medium-sized device. | -| lg | Length | No | Large-sized device. | -| xl | Length | No | Extra-large-sized device. | -| xxl | Length | No | Ultra-large-sized device. | +| sm | Length | No | Small-sized device. | +| md | Length | No | Medium-sized device. | +| lg | Length | No | Large-sized device. | +| xl | Length | No | Extra-large-sized device. | +| xxl | Length | No | Ultra-large-sized device. | ## BreakPoints +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | -| value | Array<string> | No | Array of monotonically increasing breakpoints.
Default value: **["320vp", "520vp", "840vp"]** | +| value | Array<string> | No | Array of monotonically increasing breakpoints.
Default value: **["320vp", "600vp", "840vp"]** | | reference | BreakpointsReference | No | Breakpoint switching reference.| ```ts // Enable the xs, sm, and md breakpoints. breakpoints: {value: ["100vp", "200vp"]} // Enable four breakpoints: xs, sm, md, and lg. The breakpoint range must be monotonically increasing. - breakpoints: {value: ["320vp", "520vp", "840vp"]} + breakpoints: {value: ["320vp", "600vp", "840vp"]} // Enable five breakpoints: xs, sm, md, lg, and xl. The number of breakpoint ranges cannot exceed the number of breakpoints minus 1. - breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]} + breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]} ``` ## BreakpointsReference + +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | WindowSize | The window is used as a reference.| | ComponentSize | The container is used as a reference.| ## GridRowDirection + +Since API version 9, this API is supported in ArkTS widgets. + | Name| Description| | -------- | -------- | | Row | Grid elements are arranged in the row direction.| @@ -119,6 +135,8 @@ The [universal attributes](ts-universal-attributes-size.md) are supported. onBreakpointChange(callback: (breakpoints: string) => void) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory | Description | 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 1c17cda5d9d55a722cbf3351b3a72586d224c346..c69ca31dbccaa9f3246500d1b5baa92cc50718bc 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 @@ -16,6 +16,8 @@ Not supported Circle(options?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -29,17 +31,17 @@ 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**| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.
Default value: **1**| -| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | Stroke dashes.
Default value: **[]** | -| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.
Default value: **LineCapStyle.Butt**| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**| -| 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**
**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**
**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**| -| antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**| +| 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.| +| 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.| +| 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.| +| antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| ## Example 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 019f2f008a634f1aee6f1a90d1028b3c69cbd30f..c8249cf5a97811d42832fd262c1eee1d3bc2e985 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 @@ -16,6 +16,8 @@ Not supported Ellipse(options?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Description| @@ -29,17 +31,17 @@ 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.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
**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.
**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.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| 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.| +| 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.
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.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Example 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 724c976b06687a818a0456d9fdd4b845a4ea85ab..a8097c5e449d613a378643fef8902abe41be6bba 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 @@ -15,6 +15,8 @@ Not supported Line(value?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -29,19 +31,19 @@ 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.| -| endPoint | Array<Length> | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.| -| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.
**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.
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a closed shape.| -| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Stroke color.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.
**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.
**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.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| 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.| +| 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.| +| 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 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.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -58,6 +60,7 @@ struct LineExample { Line() .startPoint([0, 0]) .endPoint([50, 100]) + .stroke(Color.Black) .backgroundColor('#F5F5F5') Line() .width(200) @@ -72,6 +75,7 @@ struct LineExample { Line({ width: 50, height: 50 }) .startPoint([0, 0]) .endPoint([100, 100]) + .stroke(Color.Black) .strokeWidth(3) .strokeDashArray([10, 3]) .backgroundColor('#F5F5F5') @@ -79,6 +83,7 @@ struct LineExample { Line({ width: 50, height: 50 }) .startPoint([0, 0]) .endPoint([100, 100]) + .stroke(Color.Black) .strokeWidth(3) .strokeDashArray([10, 3]) .strokeDashOffset(5) @@ -105,6 +110,7 @@ struct LineExample1 { .height(200) .startPoint([50, 50]) .endPoint([50, 200]) + .stroke(Color.Black) .strokeWidth(20) .strokeLineCap(LineCapStyle.Butt) .backgroundColor('#F5F5F5').margin(10) @@ -114,6 +120,7 @@ struct LineExample1 { .height(200) .startPoint([50, 50]) .endPoint([50, 200]) + .stroke(Color.Black) .strokeWidth(20) .strokeLineCap(LineCapStyle.Round) .backgroundColor('#F5F5F5') @@ -123,6 +130,7 @@ struct LineExample1 { .height(200) .startPoint([50, 50]) .endPoint([50, 200]) + .stroke(Color.Black) .strokeWidth(20) .strokeLineCap(LineCapStyle.Square) .backgroundColor('#F5F5F5') @@ -145,29 +153,34 @@ struct LineExample { Line() .startPoint([50, 30]) .endPoint([300, 30]) + .stroke(Color.Black) .strokeWidth(10) // Set the interval for strokeDashArray to 50. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50]) // Set the interval for strokeDashArray to 50, 10. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50, 10]) // Set the interval for strokeDashArray to 50, 10, 20. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50, 10, 20]) // Set the interval for strokeDashArray to 50, 10, 20, 30. Line() .startPoint([50, 20]) .endPoint([300, 20]) + .stroke(Color.Black) .strokeWidth(10) .strokeDashArray([50, 10, 20, 30]) 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 f0645c5079ef86d29d848e059c5187bf76f5d8d3..313e416b8be00dff249f60ff55af2337a81c889c 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 @@ -15,6 +15,8 @@ Not supported Path(value?: { width?: number | string; height?: number | string; commands?: string }) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name | Type | Mandatory| Description | @@ -29,18 +31,18 @@ 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).| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**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**.| -| 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.| -| strokeWidth | Length | 1 | Width of the stroke.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| 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.| +| 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.| +| 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 9346997d798487071fd4b8c35a0932a45c554a9d..d126f92b224838ffb413cd58b0ad1f287300d184 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 @@ -16,6 +16,8 @@ Not supported Polygon(value?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -30,23 +32,25 @@ 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.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**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**.| -| 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.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| 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.| +| 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.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Point Describes the coordinates of a point. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| @@ -65,7 +69,6 @@ struct PolygonExample { Polygon({ width: 100, height: 100 }) .points([[0, 0], [50, 100], [100, 0]]) .fill(Color.Green) - .stroke(Color.Transparent) // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100). Polygon().width(100).height(100) .points([[0, 0], [0, 100], [100, 100], [100, 0]]) @@ -77,7 +80,6 @@ struct PolygonExample { .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) .fill(Color.Red) .fillOpacity(0.6) - .stroke(Color.Transparent) }.width('100%').margin({ top: 10 }) } } 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 739ca2b19aa78128b2154db9df778bb65dfe9ba9..4e5d746283be0023fe1951fa12a81d8cfdec398a 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 @@ -16,6 +16,8 @@ Not supported Polyline(value?: {width?: string | number, height?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -30,23 +32,25 @@ 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.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**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**.| -| 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.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| 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.| +| 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.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Point Describes the coordinates of a point. +Since API version 9, this API is supported in ArkTS widgets. + | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| 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 0a5c323b6abc45d44e5479d56b4a9952a1109c89..f6ce5646c2893449a91080a30eeb635949d42f50 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 @@ -17,6 +17,8 @@ Not supported Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) +Since API version 9, this API is supported in ArkTS widgets. + **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -34,20 +36,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.| -| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.| -| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| -| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes.| -| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**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**.| -| 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.| -| strokeWidth | Length | 1 | Stroke width.| -| antiAlias | boolean | true | Whether anti-aliasing is enabled.| +| 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.| +| 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.| +| antiAlias | boolean | true | Whether anti-aliasing is enabled.
Since API version 9, this API is supported in ArkTS widgets.| ## Example @@ -66,7 +68,6 @@ struct RectExample { // Draw a 90% x 50 rectangle. Rect({ width: '90%', height: 50 }) .fill(Color.Pink) - .stroke(Color.Transparent) // Draw a 90% x 50 rectangle. Rect() .width('90%') @@ -81,7 +82,6 @@ struct RectExample { .radiusHeight(20) .radiusWidth(40) .fill(Color.Pink) - .stroke(Color.Transparent) // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20. Rect({ width: '90%', height: 80 }) .radius(20) @@ -92,7 +92,6 @@ struct RectExample { Rect({ width: '90%', height: 80 }) .radius([[40, 40], [20, 20], [40, 40], [20, 20]]) .fill(Color.Pink) - .stroke(Color.Transparent) }.width('100%').margin({ top: 5 }) } }