Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
You need to sign in or sign up before continuing.
提交 bc8d7477 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 0564e5e7
展开全部 显示空白变更内容
内联 并排
Showing with 751 addition and 696 deletion
en/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ bc8d7477
......@@ -15,21 +15,21 @@ None
## 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
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|
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | No| Unique ID of the component.|
| width | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component width.|
| 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. |
| 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. |
| Name | Type | Default Value | Mandatory | Description |
| ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- |
| id | string | - | No | Unique ID of the component. |
| width | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component width. |
| 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. |
| 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. |
## Example
......
en/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ bc8d7477
......@@ -18,52 +18,52 @@ Grid(scroller?: Scroller)
**Parameters**
| 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
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| 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'**|
| 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**|
| rowsGap | Length | Gap between rows.<br>Default value: **0**|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
| scrollBarColor | string \| number \| Color | Color 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**|
| 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**|
| 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**|
| 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.|
| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation.<br>Default value: **false**|
| 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'** |
| 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** |
| rowsGap | Length | Gap between rows.<br>Default value: **0** |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off** |
| scrollBarColor | string \| number \| Color | Color 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** |
| 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** |
| 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** |
| 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. |
| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation.<br>Default value: **false** |
## GridDirection<sup>8+</sup>
| Name | Description |
| ------ | -------------------------------------- |
| 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.|
| 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.|
| ------------- | ---------------------------------------- |
| 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. |
| 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. |
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| 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.|
| 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).|
| 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.|
| 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.|
| 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. |
| 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). |
| 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. |
| 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
......@@ -78,7 +78,7 @@ The keywords **repeat** and **auto-fill** are used. **track-size** indicates the
## ItemDragInfo
| Name | Type | Description |
| ---------- | ---------- | ---------- |
| ---- | ------ | --------------------------------- |
| x | number | X-coordinate of the dragged item. |
| y | number | Y-coordinate of the dragged item. |
......@@ -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**
......
en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ bc8d7477
......@@ -17,44 +17,44 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
**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** |
| 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
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| 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).|
| 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.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| 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.|
| 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.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the stroke.|
| strokeWidth | Length | 1 | No| Width of the stroke.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| ---------------- | ---------------------------------------- | ------------------- | --------- | ---------------------------------------- |
| 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. |
| 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. |
| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dashes. |
| 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. |
| 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. |
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Opacity of the stroke. |
| strokeWidth | Length | 1 | No | Width of the stroke. |
| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
The supported commands are as follows:
| 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).|
| 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.|
| 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.|
| 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.|
| 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.|
| ------- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
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
@Component
struct PathExample {
build() {
Column({ space: 5 }) {
Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Draw a straight line with a length of 900px and a width of 3vp.
Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3)
Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z')
Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z')
Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
Column({ space: 10 }) {
Text('Straight line')
.fontSize(11)
.fontColor(0xCCCCCC)
.width('90%')
Path()
.width(300)
.height(10)
.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%')
Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z")
Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
Row({ space: 20 }) {
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
浏览文件 @ bc8d7477
......@@ -17,38 +17,38 @@ Not supported
Polygon(value?: {width?: string | number, height?: string | number})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width.|
| height | string \| number | No| 0 | Height.|
| Name | Type | Mandatory | Default Value | Description |
| ------ | ---------------- | --------- | ------------- | ----------- |
| width | string \| number | No | 0 | Width. |
| height | string \| number | No | 0 | Height. |
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| 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.|
| 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.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| 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.|
| 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.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name | Type | Default Value | Mandatory | Description |
| ---------------- | ---------------------------------------- | ------------------- | --------- | ---------------------------------------- |
| 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. |
| 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. |
| strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dashes. |
| 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. |
| 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. |
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Stroke opacity. |
| strokeWidth | Length | 1 | No | Stroke width. |
| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
## Point
Describes the coordinates of a point.
| 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
......@@ -59,18 +59,22 @@ Describes the coordinates of a point.
@Component
struct PolygonExample {
build() {
Column({ space: 5 }) {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// 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).
Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]])
// 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]])
// 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).
Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
}.width('100%')
}.margin({ top: 5 })
Column({ space: 10 }) {
Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green)
Polygon().width(100).height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
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
浏览文件 @ bc8d7477
......@@ -23,20 +23,20 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
**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] |
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | 4x4 matrix object created based on the input parameter.|
| -------------- | ---------------------------------------- |
| Matrix4Transit | 4x4 matrix object created based on the input parameter. |
**array**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------------------- |
| ---- | ------ | --------- | ---------------------------------------- |
| 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. |
| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. |
......@@ -49,9 +49,9 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para
| 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. |
| m23 | number | Yes | Meaningless. |
| 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.|
| m32 | number | Yes | Translation value of the z-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. |
| 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. |
**Example**
......@@ -88,8 +88,8 @@ Matrix initialization function. Can return an identity matrix object.
**Return value**
| Type | Description |
| -------------- | -------------- |
| Matrix4Transit | Identity matrix object.|
| -------------- | ----------------------- |
| Matrix4Transit | Identity matrix object. |
**Example**
......@@ -131,8 +131,8 @@ Matrix copy function, which is used to copy the current matrix object.
**Return value**
| Type | Description |
| -------------- | -------------------- |
| Matrix4Transit | Copy object of the current matrix.|
| -------------- | ---------------------------------- |
| Matrix4Transit | Copy object of the current matrix. |
**Example**
......@@ -176,15 +176,15 @@ Matrix overlay function, which is used to overlay the effects of two matrices to
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------ |
| matrix | Matrix4 | Yes | Matrix object to be overlaid.|
| Name | Type | Mandatory | Description |
| ------ | ------- | --------- | ----------------------------- |
| matrix | Matrix4 | Yes | Matrix object to be overlaid. |
**Return value**
| Type | Description |
| -------------- | ------------------ |
| Matrix4Transit | Object after matrix overlay.|
| -------------- | ---------------------------- |
| Matrix4Transit | Object after matrix overlay. |
**Example**
......@@ -228,8 +228,8 @@ Matrix inverse function. Can return an inverse matrix of the current matrix obje
**Return value**
| Type | Description |
| -------------- | ---------------------- |
| Matrix4Transit | Inverse matrix object of the current matrix.|
| -------------- | ---------------------------------------- |
| Matrix4Transit | Inverse matrix object of the current matrix. |
**Example**
......@@ -268,17 +268,17 @@ Matrix translation function, which is used to add the translation effect to the
**Parameter**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------- |
| 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**|
| z | number | No | Translation distance of the z-axis, in px.<br>Default value: **0**|
| Name | Type | Mandatory | Description |
| ---- | ------ | --------- | ---------------------------------------- |
| 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** |
| z | number | No | Translation distance of the z-axis, in px.<br>Default value: **0** |
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the translation effect is added.|
| -------------- | ---------------------------------------- |
| Matrix4Transit | Matrix object after the translation effect is added. |
**Example**
......@@ -312,19 +312,19 @@ Matrix scaling function, which is used to add the scaling effect to the x, y, an
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | --------------------------------- |
| Name | Type | Mandatory | Description |
| ------- | ------ | --------- | ---------------------------------------- |
| 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** |
| 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**|
| centerY | number | No | Y 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** |
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the scaling effect is added.|
| -------------- | ---------------------------------------- |
| Matrix4Transit | Matrix object after the scaling effect is added. |
**Example**
......@@ -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
......@@ -358,20 +358,20 @@ Matrix rotation function, which is used to add the rotation effect to the x, y,
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | --------------------------------- |
| Name | Type | Mandatory | Description |
| ------- | ------ | --------- | ---------------------------------------- |
| 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** |
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1** |
| angle | number | No | Rotation angle.<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**|
| 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** |
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the rotation effect is added.|
| -------------- | ---------------------------------------- |
| Matrix4Transit | Matrix object after the rotation effect is added. |
**Example**
......@@ -405,15 +405,15 @@ Matrix point transformation function, which is used to apply the current transfo
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ----- | ---- | ------------------ |
| point | Point | Yes | Point to be transformed.|
| Name | Type | Mandatory | Description |
| ----- | ----- | --------- | ------------------------ |
| point | Point | Yes | Point to be transformed. |
**Return value**
| Type | Description |
| ----- | ---------------- |
| Point | Point object after matrix transformation|
| ----- | ---------------------------------------- |
| Point | Point object after matrix transformation |
**Example**
......
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ bc8d7477
......@@ -18,21 +18,21 @@ show(options?: TextPickerDialogOptions)
Shows a text picker in the given settings.
- TextPickerDialogOptions
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](../../ui/ts-types.md#resource)| Yes| - | Data selection range of the picker.|
| 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.|
| 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.|
| 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.|
| Name | Type | Mandatory | Default Value | Description |
| ----------------------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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. |
| 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. |
| onChange | (value: TextPickerResult) => void | No | - | Callback invoked when the selected item in the picker changes. |
- TextPickerResult
| Name| Type| Description|
| -------- | -------- | -------- |
| value | string | Value of the selected item.|
| index | number | Index of the selected item in the range.|
| Name | Type | Description |
| ----- | ------ | ---------------------------------------- |
| value | string | Value of the selected item. |
| index | number | Index of the selected item in the range. |
## Example
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ bc8d7477
......@@ -15,7 +15,7 @@
## 子组件
支持[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)。
## 属性
......@@ -23,7 +23,7 @@
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------- | ---- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| width | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置组件的宽度。 |
| height | &lt;length&gt;\|&lt;percentage&gt; | - | 否 | 设置组件的高度。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ bc8d7477
......@@ -10,7 +10,7 @@
## 事件
| 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| ---------------------------------------- | ---- | ---------------------------------------- |
| 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返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
......@@ -18,7 +18,7 @@
## MouseEvent对象说明
| 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- |
| ---------------------- | ---------------------------------------- | ---------------------------- |
| screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 |
| screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 |
| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 |
......@@ -109,8 +109,8 @@ struct MouseEventExample {
鼠标悬浮时改变文本内容与背景颜色：
![mouse](/figures/mouse.png)
![mouse](figures/mouse.png)
鼠标点击时：
![mouse1](/figures/mouse1.png)
\ No newline at end of file
![mouse1](figures/mouse1.png)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或