Skip to content

D
Docs

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

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

!11538 3.2 beta3 报错处理，无需翻译 

Merge pull request !11538 from LiAn/OpenHarmony-3.2-Beta3
上级 576ac2fe 9580cf71
展开全部 隐藏空白更改
内联 并排
Showing with 755 addition and 781 deletion
en/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ 83cff0dc
...@@ -4,9 +4,9 @@ The **\<svg>** component is a basic container. It can be used as the root node o ...@@ -4,9 +4,9 @@ The **\<svg>** component is a basic container. It can be used as the root node o
> **NOTE** > **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> >
> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. > - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
## Required Permissions ## Required Permissions
...@@ -15,21 +15,21 @@ None ...@@ -15,21 +15,21 @@ None
## Child Components ## Child Components
The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animateTransform.md). The following are supported: [\<svg>](js-components-svg.md), [\<rect>](js-components-svg-rect.md), [\<circle>](js-components-svg-circle.md), [\<ellipse>](../arkui-js/js-components-svg-ellipse.md), [\<path>](js-components-svg-path.md), [\<line](../arkui-js/js-components-svg-line.md), [\<polygon>](../arkui-js/js-components-svg-polygon.md), [\<polyline>](js-components-svg-polyline.md), [\<text>](js-components-svg-text.md), [\<animate>](js-components-svg-animate.md), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## Attributes
The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components.
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- |
| id | string | - | No| Unique ID of the component.| | id | string | - | No | Unique ID of the component. |
| width | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component width.| | width | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component width. |
| height | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component height.| | height | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component height. |
| x | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. | | x | &lt;length&gt;\|&lt;percentage&gt; | - | No | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | &lt;length&gt;\|&lt;percentage&gt; | | No| Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. | | y | &lt;length&gt;\|&lt;percentage&gt; | | No | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| viewBox | string | - | No| View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. | | viewBox | string | - | No | View box of the current **\<svg>** component. The supported format is \<number number number number>. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\<svg>** component. The view box is scaled in center-aligned mode. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 83cff0dc
...@@ -17,53 +17,53 @@ This component contains the child component **[\<GridItem>](ts-container-gridite ...@@ -17,53 +17,53 @@ This component contains the child component **[\<GridItem>](ts-container-gridite
Grid(scroller?: Scroller) Grid(scroller?: Scroller)
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ----------------------- | | -------- | ---------------------------------------- | --------- | ---------------------------------------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | No | Scroller, which can be bound to scrollable components.| | scroller | [Scroller](ts-container-scroll.md#scroller) | No | Scroller, which can be bound to scrollable components. |
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description| | Name | Type | Description |
| -------- | -------- | -------- | | ----------------------------- | ---------------------------------------- | ---------------------------------------- |
| columnsTemplate | string | Number of columns in the current grid layout. If this attribute is not set, one column is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4. This attribute supports [auto-fill] (#auto-fill description).<br>Default value: **'1fr'**| | columnsTemplate | string | Number of columns in the current grid layout. If this attribute is not set, one column is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4. This attribute supports [auto-fill] (#auto-fill description).<br>Default value: **'1fr'** |
| rowsTemplate | string | Number of rows in the current grid layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4. This attribute supports [auto-fill] (#auto-fill description).<br>Default value: **'1fr'**| | rowsTemplate | string | Number of rows in the current grid layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4. This attribute supports [auto-fill] (#auto-fill description).<br>Default value: **'1fr'** |
| columnsGap | Length | Gap between columns.<br>Default value: **0**| | columnsGap | Length | Gap between columns.<br>Default value: **0** |
| rowsGap | Length | Gap between rows.<br>Default value: **0**| | rowsGap | Length | Gap between rows.<br>Default value: **0** |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**| | scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off** |
| scrollBarColor | string \| number \| Color | Color of the scrollbar.| | scrollBarColor | string \| number \| Color | Color of the scrollbar. |
| scrollBarWidth | string \| number | Width of the scrollbar.| | scrollBarWidth | string \| number | Width of the scrollbar. |
| cachedCount | number | Number of grid items to be preloaded. For details, see [Minimizing White Blocks During Swiping](../../ui/ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**| | cachedCount | number | Number of grid items to be preloaded. For details, see [Minimizing White Blocks During Swiping](../../ui/ts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1** |
| editMode <sup>8+</sup> | boolean | Whether to enter editing mode. In editing mode, the user can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.<br>Default value: **false**| | editMode <sup>8+</sup> | boolean | Whether to enter editing mode. In editing mode, the user can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.<br>Default value: **false** |
| layoutDirection<sup>8+</sup> | [GridDirection](#griddirection8) | Main axis direction of the grid.<br>Default value: **GridDirection.Row**| | layoutDirection<sup>8+</sup> | [GridDirection](#griddirection8) | Main axis direction of the grid.<br>Default value: **GridDirection.Row** |
| maxCount<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: maximum number of rows that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of columns that can be displayed.<br>Default value: **1**| | maxCount<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: maximum number of rows that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of columns that can be displayed.<br>Default value: **1** |
| minCount<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: minimum number of rows that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: minimum number of columns that can be displayed.<br>Default value: **1**| | minCount<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: minimum number of rows that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: minimum number of columns that can be displayed.<br>Default value: **1** |
| cellLength<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: fixed height per row.<br>When **layoutDirection** is **Column** or **ColumnReverse**: fixed width per column.<br>Default value: **0**| | cellLength<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: fixed height per row.<br>When **layoutDirection** is **Column** or **ColumnReverse**: fixed width per column.<br>Default value: **0** |
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.| | multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled. |
| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation.<br>Default value: **false**| | supportAnimation<sup>8+</sup> | boolean | Whether to enable animation.<br>Default value: **false** |
## GridDirection<sup>8+</sup> ## GridDirection<sup>8+</sup>
| Name | Description | | Name | Description |
| ------ | -------------------------------------- | | ------------- | ---------------------------------------- |
| Row | Horizontal layout, where the child components are arranged from left to right as the main axis runs along the rows.| | Row | Horizontal layout, where the child components are arranged from left to right as the main axis runs along the rows. |
| Column | Vertical layout, where the child components are arranged from top to bottom as the main axis runs down the columns.| | Column | Vertical layout, where the child components are arranged from top to bottom as the main axis runs down the columns. |
| RowReverse | Reverse horizontal layout, where the child components are arranged from right to left as the main axis runs along the rows.| | RowReverse | Reverse horizontal layout, where the child components are arranged from right to left as the main axis runs along the rows. |
| ColumnReverse | Reverse vertical layout, where the child components are arranged from bottom up as the main axis runs down the columns.| | ColumnReverse | Reverse vertical layout, where the child components are arranged from bottom up as the main axis runs down the columns. |
## Events ## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported. In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onScrollIndex(event: (first: number) => void) | Triggered when the start item of the grid changes.<br>- **first**: index of the start item of the grid.| | onScrollIndex(event: (first: number) => void) | Triggered when the start item of the grid changes.<br>- **first**: index of the start item of the grid. |
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | Triggered when a grid item starts to be dragged.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: index of the dragged element.| | onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | Triggered when a grid item starts to be dragged.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: index of the dragged element. |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).| | onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo). |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | Triggered when the dragged item moves over the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.| | onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | Triggered when the dragged item moves over the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped. |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | Triggered when the dragged item exits the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: index of the dragged item.| | onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | Triggered when the dragged item exits the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: index of the dragged item. |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | Triggered when the dragged item is dropped on the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.<br>- **isSuccess**: whether the dragged item is successfully dropped.| | onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | Triggered when the dragged item is dropped on the drop target of the grid.<br>- **event**: See [ItemDragInfo](#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.<br>- **isSuccess**: whether the dragged item is successfully dropped. |
## Notes About auto-fill ## Notes About auto-fill
...@@ -77,10 +77,10 @@ The keywords **repeat** and **auto-fill** are used. **track-size** indicates the ...@@ -77,10 +77,10 @@ The keywords **repeat** and **auto-fill** are used. **track-size** indicates the
## ItemDragInfo ## ItemDragInfo
| Name | Type | Description | | Name | Type | Description |
| ---------- | ---------- | ---------- | | ---- | ------ | --------------------------------- |
| x | number | X-coordinate of the dragged item. | | x | number | X-coordinate of the dragged item. |
| y | number | Y-coordinate of the dragged item. | | y | number | Y-coordinate of the dragged item. |
## Example ## Example
...@@ -144,7 +144,7 @@ struct GridExample { ...@@ -144,7 +144,7 @@ struct GridExample {
} }
``` ```
![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif) ![en-us_image_0000001219744183](figures/en-us_image_0000001219744183.gif)
**Example of auto-fill** **Example of auto-fill**
......
en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 83cff0dc
...@@ -17,45 +17,45 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str ...@@ -17,45 +17,45 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| -------- | ---------------- | ---- | ----------------------------------- | | -------- | ---------------- | --------- | ---------------------------------------- |
| width | number \| string | No | Width of the rectangle where the path is located.<br>Default value: **0** | | width | number \| string | No | Width of the rectangle where the path is located.<br>Default value: **0** |
| height | number \| string | No | Height of the rectangle where the path is located.<br>Default value: **0** | | height | number \| string | No | Height of the rectangle where the path is located.<br>Default value: **0** |
| commands | string | No | Command for drawing the path.<br>Default value: **''**| | commands | string | No | Command for drawing the path.<br>Default value: **''** |
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- | | ---------------- | ---------------------------------------- | ------------------- | --------- | ---------------------------------------- |
| commands | string | '' | No | Command for drawing the path. The unit is px. For details about how to convert the pixel units, see [Pixel Unit Conversion](../../ui/ts-pixel-units.md).| | commands | string | '' | No | Command for drawing the path. The unit is px. For details about how to convert the pixel units, see [Pixel Unit Conversion](../../ui/ts-pixel-units.md). |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| | fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No | Color of the fill area. |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Opacity of the fill area. |
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| | stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No | Stroke color. |
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dashes. |
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | No | Offset of the start point for drawing the stroke. |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No | Cap style of the stroke. |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No | Join style of the stroke. |
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| | strokeMiterLimit | number \| string | 4 | No | Limit value when the sharp angle is drawn as a miter. |
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the stroke.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Opacity of the stroke. |
| strokeWidth | Length | 1 | No| Width of the stroke.| | strokeWidth | Length | 1 | No | Width of the stroke. |
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| | antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
The supported commands are as follows: The supported commands are as follows:
| Command | Attribute | Parameter | Description | | Command | Attribute | Parameter | Description |
| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- | | ------- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| M | moveto | (x y) | Starts a new subpath at the point specified by the given (x, y) coordinates. For example, `M 0 0` starts a new subpath at point (0, 0).| | M | moveto | (x y) | Starts a new subpath at the point specified by the given (x, y) coordinates. For example, `M 0 0` starts a new subpath at point (0, 0). |
| L | lineto | (x y) | Draws a line from the current point to the point specified by the given (x, y) coordinates. The specified point becomes the start point of the new subpath. For example, `L 50 50` draws a line from the current point to point (50, 50), which is the start point of the new subpath.| | L | lineto | (x y) | Draws a line from the current point to the point specified by the given (x, y) coordinates. The specified point becomes the start point of the new subpath. For example, `L 50 50` draws a line from the current point to point (50, 50), which is the start point of the new subpath. |
| H | horizontal lineto | x | Draws a horizontal line from the current point. This command is equivalent to the **L** command where the y-coordinate is 0. For example, `H 50 ` draws a line from the current point to point (50, 0), which is the start point of the new subpath.| | H | horizontal lineto | x | Draws a horizontal line from the current point. This command is equivalent to the **L** command where the y-coordinate is 0. For example, `H 50 ` draws a line from the current point to point (50, 0), which is the start point of the new subpath. |
| V | vertical lineto | y | Draws a vertical line from the current point. This command is equivalent to the **L** command where the x-coordinate is 0. For example, `V 50 ` draws a line from the current point to point (0, 50), which is the start point of the new subpath.| | V | vertical lineto | y | Draws a vertical line from the current point. This command is equivalent to the **L** command where the x-coordinate is 0. For example, `V 50 ` draws a line from the current point to point (0, 50), which is the start point of the new subpath. |
| C | curveto | (x1 y1 x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point of the curve start point and (x2, y2) as the control point of the curve end point. For example, `C100 100 250 100 250 200 ` draws a cubic Bezier curve from the current point to point (250, 200), which is the start point of the new subpath.| | C | curveto | (x1 y1 x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point of the curve start point and (x2, y2) as the control point of the curve end point. For example, `C100 100 250 100 250 200 ` draws a cubic Bezier curve from the current point to point (250, 200), which is the start point of the new subpath. |
| S | smooth curveto | (x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x2, y2) as the control point of the curve end point. If the previous command is **C** or **S**, the control point of the curve start point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `C100 100 250 100 250 200 S400 300 400 200`, the second segment of the cubic Bezier curve uses point (250, 300) as the control point of the curve start point. If there is no previous command or the previous command is not **C** or **S**, the control point of the curve start point coincides with the current point.| | S | smooth curveto | (x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x2, y2) as the control point of the curve end point. If the previous command is **C** or **S**, the control point of the curve start point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `C100 100 250 100 250 200 S400 300 400 200`, the second segment of the cubic Bezier curve uses point (250, 300) as the control point of the curve start point. If there is no previous command or the previous command is not **C** or **S**, the control point of the curve start point coincides with the current point. |
| Q | quadratic Belzier curve | (x1 y1 x y) | Use (x1, y1) as the control point to draw a quadratic Bessel curve from the current point to (x, y). For example, Q400 50 600 300 indicates that a quadratic Bessel curve from the current point to the (600, 300) point is drawn, and the (600, 300) point is used as the starting point of the new subpath.| | Q | quadratic Belzier curve | (x1 y1 x y) | Use (x1, y1) as the control point to draw a quadratic Bessel curve from the current point to (x, y). For example, Q400 50 600 300 indicates that a quadratic Bessel curve from the current point to the (600, 300) point is drawn, and the (600, 300) point is used as the starting point of the new subpath. |
| T | smooth quadratic Belzier curveto | (x y) | Draw a quadratic Bessel curve from the current point to (x, y). If the previous command is Q or T, the control point is the mapping of the end point control point of the previous command relative to the start point. For example, a control point of the second Bessel curve segment of the Q400 50 600 300 T1000 300 is (800, 350). If there is no previous command or the previous command is not Q or T, the first control point coincides with the current point.| | T | smooth quadratic Belzier curveto | (x y) | Draw a quadratic Bessel curve from the current point to (x, y). If the previous command is Q or T, the control point is the mapping of the end point control point of the previous command relative to the start point. For example, a control point of the second Bessel curve segment of the Q400 50 600 300 T1000 300 is (800, 350). If there is no previous command or the previous command is not Q or T, the first control point coincides with the current point. |
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to (x, y). The size and direction of an ellipse are defined by two radiuses (rx, ry) and x-axis-rotation, indicating how the entire ellipse rotates relative to the current coordinate system (in degrees). large-arc-flag and sweep-flag determine an arc drawing manner.| | A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to (x, y). The size and direction of an ellipse are defined by two radiuses (rx, ry) and x-axis-rotation, indicating how the entire ellipse rotates relative to the current coordinate system (in degrees). large-arc-flag and sweep-flag determine an arc drawing manner. |
| Z | closepath | none | Closes the current subpath by connecting the current path back to the initial point of the current subpath. | | Z | closepath | none | Closes the current subpath by connecting the current path back to the initial point of the current subpath. |
For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts from position (0, 20), draws a straight line from point (0, 20) to point (50, 50), draws a straight line from point (50, 50) to point (50, 100), and draws a closed path from point (50, 100) to point (0, 20) to form a closed triangle. For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts from position (0, 20), draws a straight line from point (0, 20) to point (50, 50), draws a straight line from point (50, 50) to point (50, 100), and draws a closed path from point (50, 100) to point (0, 20) to form a closed triangle.
...@@ -67,26 +67,77 @@ For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts f ...@@ -67,26 +67,77 @@ For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts f
@Component @Component
struct PathExample { struct PathExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 10 }) {
Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Straight line')
// Draw a straight line with a length of 900px and a width of 3vp. .fontSize(11)
Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3) .fontColor(0xCCCCCC)
.width('90%')
Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) { Path()
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') .width(300)
Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') .height(10)
Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') .commands('M0 0 L900 0')
.stroke(Color.Black)
.strokeWidth(3)
Text('Straight line graph')
.fontSize(11)
.fontColor(0xCCCCCC)
.width('90%')
Row({ space: 20 }) {
Path()
.width(100)
.height(100)
.commands('M150 0 L300 300 L0 300 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 0 H300 V300 H0 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
}.width('100%') }.width('100%')
Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") Row({ space: 20 }) {
Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z') Path()
.width(100)
.height(100)
.commands("M0 300 S150 0 300 300 Z")
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 200 A30 20 20 0 0 250 200 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
} }
}.width('100%').margin({ top: 5 }) }.width('100%')
.margin({ top: 5 })
} }
} }
``` ```
![zh-cn_image_0000001219744193](figures/zh-cn_image_0000001219744193.png) ![en-us_image_0000001219744193.png](figures/en-us_image_0000001219744193.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 83cff0dc
...@@ -17,38 +17,38 @@ Not supported ...@@ -17,38 +17,38 @@ Not supported
Polygon(value?: {width?: string | number, height?: string | number}) Polygon(value?: {width?: string | number, height?: string | number})
- Parameters - Parameters
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ---------------- | --------- | ------------- | ----------- |
| width | string \| number | No| 0 | Width.| | width | string \| number | No | 0 | Width. |
| height | string \| number | No| 0 | Height.| | height | string \| number | No | 0 | Height. |
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ---------------------------------------- | ------------------- | --------- | ---------------------------------------- |
| points | Array&lt;Point&gt; | [] | No| Vertex coordinates of the polygon.| | points | Array&lt;Point&gt; | [] | No | Vertex coordinates of the polygon. |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.| | fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No | Color of the fill area. |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Opacity of the fill area. |
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.| | stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No | Stroke color. |
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.| | strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dashes. |
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| | strokeDashOffset | number \| string | 0 | No | Offset of the start point for drawing the stroke. |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No | Cap style of the stroke. |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No | Join style of the stroke. |
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| | strokeMiterLimit | number \| string | 4 | No | Limit value when the sharp angle is drawn as a miter. |
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Stroke opacity. |
| strokeWidth | Length | 1 | No| Stroke width.| | strokeWidth | Length | 1 | No | Stroke width. |
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| | antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
## Point ## Point
Describes the coordinates of a point. Describes the coordinates of a point.
| Name | Type | Description | | 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).| | Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate). |
## Example ## Example
...@@ -59,18 +59,22 @@ Describes the coordinates of a point. ...@@ -59,18 +59,22 @@ Describes the coordinates of a point.
@Component @Component
struct PolygonExample { struct PolygonExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 10 }) {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Polygon({ width: 100, height: 100 })
// Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100). .points([[0, 0], [50, 100], [100, 0]])
Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]]) .fill(Color.Green)
// 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)
Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]]) .points([[0, 0], [0, 100], [100, 100], [100, 0]])
// Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100). .fillOpacity(0)
Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) .strokeWidth(5)
}.width('100%') .stroke(Color.Blue)
}.margin({ top: 5 }) Polygon().width(100).height(100)
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
}.width('100%').margin({ top: 10 })
} }
} }
``` ```
![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.gif) ![en-us_image_0000001174582856.png](figures/en-us_image_0000001174582856.png)
en/application-dev/reference/arkui-ts/ts-matrix-transformation.md
浏览文件 @ 83cff0dc
...@@ -23,36 +23,36 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para ...@@ -23,36 +23,36 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ------------------- | ---- | ------------------------------------------------------------ | | ----- | ------------------- | --------- | ---------------------------------------- |
| array | Array&lt;number&gt; | Yes | A number array whose length is 16 (4 x 4). For details, see **array**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] | | array | Array&lt;number&gt; | Yes | A number array whose length is 16 (4 x 4). For details, see **array**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | -------------- | ---------------------------------------- |
| Matrix4Transit | 4x4 matrix object created based on the input parameter.| | Matrix4Transit | 4x4 matrix object created based on the input parameter. |
**array** **array**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------------------- | | ---- | ------ | --------- | ---------------------------------------- |
| m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the identity matrix. | | m00 | number | Yes | Scaling value of the x-axis. Defaults to **1** for the identity matrix. |
| m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. | | m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. |
| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | | m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
| m03 | number | Yes | Meaningless. | | m03 | number | Yes | Meaningless. |
| m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. | | m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. |
| m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the identity matrix. | | m11 | number | Yes | Scaling value of the y-axis. Defaults to **1** for the identity matrix. |
| m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | | m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. |
| m13 | number | Yes | Meaningless. | | m13 | number | Yes | Meaningless. |
| m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. | | m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. |
| m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. | | m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. |
| m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the identity matrix. | | m22 | number | Yes | Scaling value of the z-axis. Defaults to **1** for the identity matrix. |
| m23 | number | Yes | Meaningless. | | m23 | number | Yes | Meaningless. |
| m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the identity matrix.| | m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the identity matrix. |
| m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the identity matrix.| | m31 | number | Yes | Translation value of the y-axis, in px. Defaults to **0** for the identity matrix. |
| m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the identity matrix.| | m32 | number | Yes | Translation value of the z-axis, in px. Defaults to **0** for the identity matrix. |
| m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. | | m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. |
**Example** **Example**
...@@ -87,9 +87,9 @@ Matrix initialization function. Can return an identity matrix object. ...@@ -87,9 +87,9 @@ Matrix initialization function. Can return an identity matrix object.
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | -------------- | | -------------- | ----------------------- |
| Matrix4Transit | Identity matrix object.| | Matrix4Transit | Identity matrix object. |
**Example** **Example**
...@@ -130,9 +130,9 @@ Matrix copy function, which is used to copy the current matrix object. ...@@ -130,9 +130,9 @@ Matrix copy function, which is used to copy the current matrix object.
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | -------------------- | | -------------- | ---------------------------------- |
| Matrix4Transit | Copy object of the current matrix.| | Matrix4Transit | Copy object of the current matrix. |
**Example** **Example**
...@@ -176,15 +176,15 @@ Matrix overlay function, which is used to overlay the effects of two matrices to ...@@ -176,15 +176,15 @@ Matrix overlay function, which is used to overlay the effects of two matrices to
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ------- | ---- | ------------------ | | ------ | ------- | --------- | ----------------------------- |
| matrix | Matrix4 | Yes | Matrix object to be overlaid.| | matrix | Matrix4 | Yes | Matrix object to be overlaid. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ------------------ | | -------------- | ---------------------------- |
| Matrix4Transit | Object after matrix overlay.| | Matrix4Transit | Object after matrix overlay. |
**Example** **Example**
...@@ -227,9 +227,9 @@ Matrix inverse function. Can return an inverse matrix of the current matrix obje ...@@ -227,9 +227,9 @@ Matrix inverse function. Can return an inverse matrix of the current matrix obje
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------- | | -------------- | ---------------------------------------- |
| Matrix4Transit | Inverse matrix object of the current matrix.| | Matrix4Transit | Inverse matrix object of the current matrix. |
**Example** **Example**
...@@ -268,17 +268,17 @@ Matrix translation function, which is used to add the translation effect to the ...@@ -268,17 +268,17 @@ Matrix translation function, which is used to add the translation effect to the
**Parameter** **Parameter**
| Name| Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ------------------------------------- | | ---- | ------ | --------- | ---------------------------------------- |
| x | number | No | Translation distance of the x-axis, in px.<br>Default value: **0**| | x | number | No | Translation distance of the x-axis, in px.<br>Default value: **0** |
| y | number | No | Translation distance of the y-axis, in px.<br>Default value: **0**| | y | number | No | Translation distance of the y-axis, in px.<br>Default value: **0** |
| z | number | No | Translation distance of the z-axis, in px.<br>Default value: **0**| | z | number | No | Translation distance of the z-axis, in px.<br>Default value: **0** |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | -------------- | ---------------------------------------- |
| Matrix4Transit | Matrix object after the translation effect is added.| | Matrix4Transit | Matrix object after the translation effect is added. |
**Example** **Example**
...@@ -312,19 +312,19 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an ...@@ -312,19 +312,19 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------- | ------ | ---- | --------------------------------- | | ------- | ------ | --------- | ---------------------------------------- |
| x | number | No | Scaling multiple of the x-axis.<br>Default value: **1** | | x | number | No | Scaling multiple of the x-axis.<br>Default value: **1** |
| y | number | No | Scaling multiple of the y-axis.<br>Default value: **1** | | y | number | No | Scaling multiple of the y-axis.<br>Default value: **1** |
| z | number | No | Scaling multiple of the z-axis.<br>Default value: **1** | | z | number | No | Scaling multiple of the z-axis.<br>Default value: **1** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**| | centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**| | centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | -------------- | ---------------------------------------- |
| Matrix4Transit | Matrix object after the scaling effect is added.| | Matrix4Transit | Matrix object after the scaling effect is added. |
**Example** **Example**
...@@ -346,7 +346,7 @@ struct Test { ...@@ -346,7 +346,7 @@ struct Test {
} }
``` ```
![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png) ![en-us_image_0000001174422898.png](figures/en-us_image_0000001174422898.png)
### rotate ### rotate
...@@ -358,20 +358,20 @@ Matrix rotation function, which is used to add the rotation effect to the x, y, ...@@ -358,20 +358,20 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------- | ------ | ---- | --------------------------------- | | ------- | ------ | --------- | ---------------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1** | | x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1** |
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1** | | y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1** |
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1** | | z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1** |
| angle | number | No | Rotation angle.<br>Default value: **0** | | angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**| | centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**| | centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------------- | ---------------------------- | | -------------- | ---------------------------------------- |
| Matrix4Transit | Matrix object after the rotation effect is added.| | Matrix4Transit | Matrix object after the rotation effect is added. |
**Example** **Example**
...@@ -405,15 +405,15 @@ Matrix point transformation function, which is used to apply the current transfo ...@@ -405,15 +405,15 @@ Matrix point transformation function, which is used to apply the current transfo
**Parameters** **Parameters**
| Name| Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ----- | ---- | ------------------ | | ----- | ----- | --------- | ------------------------ |
| point | Point | Yes | Point to be transformed.| | point | Point | Yes | Point to be transformed. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----- | ---------------- | | ----- | ---------------------------------------- |
| Point | Point object after matrix transformation| | Point | Point object after matrix transformation |
**Example** **Example**
......
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 83cff0dc
...@@ -18,21 +18,21 @@ show(options?: TextPickerDialogOptions) ...@@ -18,21 +18,21 @@ show(options?: TextPickerDialogOptions)
Shows a text picker in the given settings. Shows a text picker in the given settings.
- TextPickerDialogOptions - TextPickerDialogOptions
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----------------------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| range | string[] \| [Resource](../../ui/ts-types.md#resource)| Yes| - | Data selection range of the picker.| | range | string[] \| [Resource](ts-types.md#resource) | Yes | - | Data selection range of the picker. |
| selected | number | No| 0 | Index of the selected item in the range.| | selected | number | No | 0 | Index of the selected item in the range. |
| value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.| | value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead. |
| defaultPickerItemHeight | number \| string | No| - | Default height of an item in the picker.| | defaultPickerItemHeight | number \| string | No | - | Default height of an item in the picker. |
| onAccept | (value: TextPickerResult) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.| | onAccept | (value: TextPickerResult) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. |
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.| | onCancel | () => void | No | - | Callback invoked when the Cancel button in the dialog box is clicked. |
| onChange | (value: TextPickerResult) => void | No| - | Callback invoked when the selected item in the picker changes.| | onChange | (value: TextPickerResult) => void | No | - | Callback invoked when the selected item in the picker changes. |
- TextPickerResult - TextPickerResult
| Name| Type| Description| | Name | Type | Description |
| -------- | -------- | -------- | | ----- | ------ | ---------------------------------------- |
| value | string | Value of the selected item.| | value | string | Value of the selected item. |
| index | number | Index of the selected item in the range.| | index | number | Index of the selected item in the range. |
## Example ## Example
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ 83cff0dc
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
> **说明：** > **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 > - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
## 权限列表 ## 权限列表
...@@ -15,21 +15,21 @@ ...@@ -15,21 +15,21 @@
## 子组件 ## 子组件
支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animateTransform.md)。 支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。 支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------- | ---- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| width | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置组件的宽度。 | | width | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置组件的宽度。 |
| height | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置组件的高度。 | | height | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置组件的高度。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置当前svg的x轴坐标，根svg节点无效。 | | x | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置当前svg的x轴坐标，根svg节点无效。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | | 否 | 设置当前svg的y轴坐标，根svg节点无效。 | | y | &lt;length&gt;\|&lt;percentage&gt; | | 否 | 设置当前svg的y轴坐标，根svg节点无效。 |
| viewBox | string | - | 否 | 设置当前svg的视口。支持的格式为&lt;number&nbsp;number&nbsp;number&nbsp;number&gt;，4个参数分别表示min-x,&nbsp;min-y,&nbsp;width&nbsp;and&nbsp;height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。 | | viewBox | string | - | 否 | 设置当前svg的视口。支持的格式为&lt;number&nbsp;number&nbsp;number&nbsp;number&gt;，4个参数分别表示min-x,&nbsp;min-y,&nbsp;width&nbsp;and&nbsp;height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md
浏览文件 @ 83cff0dc
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
为开发者提供4种像素单位，框架采用vp为基准数据单位。 为开发者提供4种像素单位，框架采用vp为基准数据单位。
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ------------------------------------------------------------ | | ---- | ---------------------------------------- |
| px | 屏幕物理像素单位。 | | px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。 | | vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。 |
| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | | fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 |
| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../../quick-start/package-structure.md)配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | | lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../../quick-start/package-structure.md)配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ 83cff0dc
...@@ -9,26 +9,26 @@ ...@@ -9,26 +9,26 @@
## 事件 ## 事件
| 名称 | 支持冒泡 | 描述 | | 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ---------------------------------------- | ---- | ---------------------------------------- |
| onHover(event:&nbsp;(isHover?:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 | | onHover(event:&nbsp;(isHover?:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 |
| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 | | onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
## MouseEvent对象说明 ## MouseEvent对象说明
| 名称 | 属性类型 | 描述 | | 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- | | ---------------------- | ---------------------------------------- | ---------------------------- |
| screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 | | screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 |
| screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 | | screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 |
| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 | | x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 |
| y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 | | y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 | | action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 |
## 示例 ## 示例
...@@ -109,8 +109,8 @@ struct MouseEventExample { ...@@ -109,8 +109,8 @@ struct MouseEventExample {
鼠标悬浮时改变文本内容与背景颜色： 鼠标悬浮时改变文本内容与背景颜色：
![mouse](/figures/mouse.png) ![mouse](figures/mouse.png)
鼠标点击时： 鼠标点击时：
![mouse1](/figures/mouse1.png) ![mouse1](figures/mouse1.png)
\ No newline at end of file \ No newline at end of file
zh-cn/application-dev/ui/ts-pixel-units.md 已删除 100644 → 0
浏览文件 @ 576ac2fe
# 像素单位
为开发者提供4种像素单位，框架采用vp为基准数据单位。
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。 |
| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 |
| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../quick-start/package-structure.md)配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 |
## 像素单位转换
提供其他单位与px单位互相转换的方法。
| 接口 | 描述 |
| ---------------------------------------- | ---------------------- |
| vp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将vp单位的数值转换为以px为单位的数值。 |
| px2vp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以vp为单位的数值。 |
| fp2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将fp单位的数值转换为以px为单位的数值。 |
| px2fp(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以fp为单位的数值。 |
| lpx2px(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将lpx单位的数值转换为以px为单位的数值。 |
| px2lpx(value&nbsp;:&nbsp;number)&nbsp;:&nbsp;number | 将px单位的数值转换为以lpx为单位的数值。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Example {
build() {
Column() {
Flex({ wrap: FlexWrap.Wrap }) {
Column() {
Text("width(220)")
.width(220).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("width('220px')")
.width('220px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
}.margin(5)
Column() {
Text("width('220vp')")
.width('220vp').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("width('220lpx') designWidth:720")
.width('220lpx').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("width(vp2px(220) + 'px')")
.width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("fontSize('12fp')")
.width(220).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp')
}.margin(5)
}.width('100%')
}
}
}
```
![zh-cn_image_0000001169582302](figures/zh-cn_image_0000001169582302.gif)
## 相关实例
基于像素转换，有以下相关实例可供参考：
- [像素转换（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/PixelUnitsDemo)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或