Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 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 ...@@ -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
浏览文件 @ bc8d7477
...@@ -18,52 +18,52 @@ Grid(scroller?: Scroller) ...@@ -18,52 +18,52 @@ 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
...@@ -78,7 +78,7 @@ The keywords **repeat** and **auto-fill** are used. **track-size** indicates the ...@@ -78,7 +78,7 @@ 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. |
...@@ -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
浏览文件 @ bc8d7477
...@@ -17,44 +17,44 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str ...@@ -17,44 +17,44 @@ 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
浏览文件 @ bc8d7477
...@@ -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
浏览文件 @ bc8d7477
...@@ -23,20 +23,20 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para ...@@ -23,20 +23,20 @@ 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. |
...@@ -49,9 +49,9 @@ Matrix constructor, which is used to create a 4x4 matrix by using the input para ...@@ -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. | | 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**
...@@ -88,8 +88,8 @@ Matrix initialization function. Can return an identity matrix object. ...@@ -88,8 +88,8 @@ 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**
...@@ -131,8 +131,8 @@ Matrix copy function, which is used to copy the current matrix object. ...@@ -131,8 +131,8 @@ 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**
...@@ -228,8 +228,8 @@ Matrix inverse function. Can return an inverse matrix of the current matrix obje ...@@ -228,8 +228,8 @@ 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
浏览文件 @ bc8d7477
...@@ -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
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ bc8d7477
...@@ -15,16 +15,16 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ...@@ -15,16 +15,16 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ | | ------- | ---------------------------------------- | --------- | ------------- | ------------------------------- |
| width | number | Yes | - | Width of the offscreen canvas. | | width | number | Yes | - | Width of the offscreen canvas. |
| height | number | Yes | - | Height of the offscreen canvas. | | height | number | Yes | - | Height of the offscreen canvas. |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | - | See RenderingContextSettings.| | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
## Attributes ## Attributes
| Name | Type | Description | | Name | Type | Description |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is **\<color>**, this parameter indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. | | [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is **\<color>**, this parameter indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. |
| [lineWidth](#linewidth) | number | Line width. | | [lineWidth](#linewidth) | number | Line width. |
| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is **\<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. | | [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is **\<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. |
...@@ -465,7 +465,7 @@ struct LineDashOffset { ...@@ -465,7 +465,7 @@ struct LineDashOffset {
### globalCompositeOperation ### globalCompositeOperation
| Name | Description | | Name | Description |
| ---------------- | ------------------------ | | ---------------- | ---------------------------------------- |
| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. | | source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
| source-atop | Displays the new drawing on the top of the existing drawing. | | source-atop | Displays the new drawing on the top of the existing drawing. |
| source-in | Displays the new drawing inside the existing drawing. | | source-in | Displays the new drawing inside the existing drawing. |
...@@ -476,7 +476,7 @@ struct LineDashOffset { ...@@ -476,7 +476,7 @@ struct LineDashOffset {
| destination-out | Displays the existing drawing outside the new drawing. | | destination-out | Displays the existing drawing outside the new drawing. |
| lighter | Displays both the new and existing drawing. | | lighter | Displays both the new and existing drawing. |
| copy | Displays the new drawing and neglects the existing drawing. | | copy | Displays the new drawing and neglects the existing drawing. |
| xor | Combines the new drawing and existing drawing using the XOR operation.| | xor | Combines the new drawing and existing drawing using the XOR operation. |
```ts ```ts
// xxx.ets // xxx.ets
...@@ -706,9 +706,9 @@ Fills a rectangle on the canvas. ...@@ -706,9 +706,9 @@ Fills a rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. | | width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. |
...@@ -753,9 +753,9 @@ Draws an outlined rectangle on the canvas. ...@@ -753,9 +753,9 @@ Draws an outlined rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------ | | ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. | | width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. |
...@@ -799,9 +799,9 @@ Clears the content in a rectangle on the canvas. ...@@ -799,9 +799,9 @@ Clears the content in a rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. | | width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. |
...@@ -847,11 +847,11 @@ Draws filled text on the canvas. ...@@ -847,11 +847,11 @@ Draws filled text on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- | | -------- | ------ | --------- | ------------- | ---------------------------------------- |
| text | string | Yes | "" | Text to draw. | | text | string | Yes | "" | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
| maxWidth | number | No | - | Maximum width allowed for the text.| | maxWidth | number | No | - | Maximum width allowed for the text. |
**Example** **Example**
...@@ -894,11 +894,11 @@ Draws a text stroke on the canvas. ...@@ -894,11 +894,11 @@ Draws a text stroke on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- | | -------- | ------ | --------- | ------------- | ---------------------------------------- |
| text | string | Yes | "" | Text to draw. | | text | string | Yes | "" | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text. |
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text. |
| maxWidth | number | No | - | Maximum width of the text to be drawn.| | maxWidth | number | No | - | Maximum width of the text to be drawn. |
**Example** **Example**
...@@ -941,32 +941,32 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -941,32 +941,32 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ---------- | | ---- | ------ | --------- | ------------- | -------------------- |
| text | string | Yes | "" | Text to be measured.| | text | string | Yes | "" | Text to be measured. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----------- | ------- | | ----------- | ----------------------- |
| TextMetrics | **TextMetrics** object.| | TextMetrics | **TextMetrics** object. |
**TextMetrics** **TextMetrics**
| Name | Type | Description | | Name | Type | Description |
| ----- | ------ | ------- | | ------------------------ | ------ | ---------------------------------------- |
| width | number | Width of the text.| | width | number | Width of the text. |
| height | number | Height of the text.| | height | number | Height of the text. |
| actualBoundingBoxAscent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the bounding rectangle used to render the text. The current value is **0**.| | actualBoundingBoxAscent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the bounding rectangle used to render the text. The current value is **0**. |
| actualBoundingBoxDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle used to render the text. The current value is **0**.| | actualBoundingBoxDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle used to render the text. The current value is **0**. |
| actualBoundingBoxLeft | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the left side of the bounding rectangle of the text. The current value is **0**.| | actualBoundingBoxLeft | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the left side of the bounding rectangle of the text. The current value is **0**. |
| actualBoundingBoxRight | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the right side of the bounding rectangle of the text. The current value is **0**.| | actualBoundingBoxRight | number | Distance parallel to the baseline from the alignment point determined by the **CanvasRenderingContext2D.textAlign** attribute to the right side of the bounding rectangle of the text. The current value is **0**. |
| alphabeticBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the alphabetic baseline of the line box. The current value is **0**.| | alphabeticBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the alphabetic baseline of the line box. The current value is **0**. |
| emHeightAscent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the em square in the line box. The current value is **0**.| | emHeightAscent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the em square in the line box. The current value is **0**. |
| emHeightDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the em square in the line box. The current value is **0**.| | emHeightDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the em square in the line box. The current value is **0**. |
| fontBoundingBoxAscent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the highest bounding rectangle of all the fonts used to render the text. The current value is **0**.| | fontBoundingBoxAscent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the top of the highest bounding rectangle of all the fonts used to render the text. The current value is **0**. |
| fontBoundingBoxDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle of all the fonts used to render the text. The current value is **0**.| | fontBoundingBoxDescent | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the bottom of the bounding rectangle of all the fonts used to render the text. The current value is **0**. |
| hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.| | hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**. |
| ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.| | ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**. |
**Example** **Example**
...@@ -1010,8 +1010,8 @@ Strokes a path. ...@@ -1010,8 +1010,8 @@ Strokes a path.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ---------------------------------------- | ---- | ---- | ------------ | | ---- | ---------------------------------------- | --------- | ------------- | -------------------------- |
| path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.| | path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
**Example** **Example**
...@@ -1098,9 +1098,9 @@ Moves a drawing path to a target position on the canvas. ...@@ -1098,9 +1098,9 @@ Moves a drawing path to a target position on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | --------- | ------------- | ------------------------------------ |
| x | number | Yes | 0 | X-coordinate of the target position.| | x | number | Yes | 0 | X-coordinate of the target position. |
| y | number | Yes | 0 | Y-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position. |
**Example** **Example**
...@@ -1145,9 +1145,9 @@ Connects the current point to a target position using a straight line. ...@@ -1145,9 +1145,9 @@ Connects the current point to a target position using a straight line.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | --------- | ------------- | ------------------------------------ |
| x | number | Yes | 0 | X-coordinate of the target position.| | x | number | Yes | 0 | X-coordinate of the target position. |
| y | number | Yes | 0 | Y-coordinate of the target position.| | y | number | Yes | 0 | Y-coordinate of the target position. |
**Example** **Example**
...@@ -1234,15 +1234,15 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1234,15 +1234,15 @@ Creates a pattern for image filling based on a specified source image and repeti
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ---------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. |
| repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| | repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------- | ---------------------------------------- | | ------------------------------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| | [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode. |
**Example** **Example**
...@@ -1287,11 +1287,11 @@ Draws a cubic bezier curve on the canvas. ...@@ -1287,11 +1287,11 @@ Draws a cubic bezier curve on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------------- | | ---- | ------ | --------- | ------------- | ---------------------------------------- |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.| | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.| | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve.| | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve.| | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
...@@ -1338,11 +1338,11 @@ Draws a quadratic curve on the canvas. ...@@ -1338,11 +1338,11 @@ Draws a quadratic curve on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | --------- | ------------- | ---------------------------------------- |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.| | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.| | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve.| | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve.| | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
**Example** **Example**
...@@ -1387,13 +1387,13 @@ Draws an arc on the canvas. ...@@ -1387,13 +1387,13 @@ Draws an arc on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------------- | ------- | ---- | ----- | ---------- | | ---------------- | ------- | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the center point of the arc.| | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
| y | number | Yes | 0 | Y-coordinate of the center point of the arc.| | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
| radius | number | Yes | 0 | Radius of the arc. | | radius | number | Yes | 0 | Radius of the arc. |
| startAngle | number | Yes | 0 | Start radian of the arc. | | startAngle | number | Yes | 0 | Start radian of the arc. |
| endAngle | number | Yes | 0 | End radian of the arc. | | endAngle | number | Yes | 0 | End radian of the arc. |
| counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.| | counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
**Example** **Example**
...@@ -1437,11 +1437,11 @@ Draws an arc based on the radius and points on the arc. ...@@ -1437,11 +1437,11 @@ Draws an arc based on the radius and points on the arc.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | --------------- | | ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc.| | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.| | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
| x2 | number | Yes | 0 | X-coordinate of the second point on the arc.| | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc.| | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
| radius | number | Yes | 0 | Radius of the arc. | | radius | number | Yes | 0 | Radius of the arc. |
**Example** **Example**
...@@ -1486,14 +1486,14 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1486,14 +1486,14 @@ Draws an ellipse in the specified rectangular region on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------------- | ------- | ---- | ----- | ----------------- | | ---------------- | ------- | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the ellipse center. | | x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. | | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. | | rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.| | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian. |
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.| | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian. |
| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. | | counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
**Example** **Example**
...@@ -1538,9 +1538,9 @@ Creates a rectangle on the canvas. ...@@ -1538,9 +1538,9 @@ Creates a rectangle on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- | | ---- | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| w | number | Yes | 0 | Width of the rectangle. | | w | number | Yes | 0 | Width of the rectangle. |
| h | number | Yes | 0 | Height of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. |
...@@ -1664,8 +1664,8 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -1664,8 +1664,8 @@ Rotates a canvas clockwise around its coordinate axes.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ---------------------------------------- | | ----- | ------ | --------- | ------------- | ---------------------------------------- |
| angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| | angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
**Example** **Example**
...@@ -1708,9 +1708,9 @@ Scales the canvas based on scale factors. ...@@ -1708,9 +1708,9 @@ Scales the canvas based on scale factors.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | --------- | ------------- | ------------------------ |
| x | number | Yes | 0 | Horizontal scale factor.| | x | number | Yes | 0 | Horizontal scale factor. |
| y | number | Yes | 0 | Vertical scale factor.| | y | number | Yes | 0 | Vertical scale factor. |
**Example** **Example**
...@@ -1762,13 +1762,13 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1762,13 +1762,13 @@ Defines a transformation matrix. To transform a graph, you only need to set para
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ------ | ---- | ---- | -------- | | ---- | ------ | --------- | ------------- | ------------------- |
| a | number | Yes | 0 |X-axis scale.| | a | number | Yes | 0 | X-axis scale. |
| b | number | Yes | 0 |X-axis skew.| | b | number | Yes | 0 | X-axis skew. |
| c | number | Yes | 0 |Y-axis skew.| | c | number | Yes | 0 | Y-axis skew. |
| d | number | Yes | 0 |Y-axis scale.| | d | number | Yes | 0 | Y-axis scale. |
| e | number | Yes | 0 |X-axis translation.| | e | number | Yes | 0 | X-axis translation. |
| f | number | Yes | 0 |Y-axis translation.| | f | number | Yes | 0 | Y-axis translation. |
**Example** **Example**
...@@ -1817,13 +1817,13 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1817,13 +1817,13 @@ Resets the existing transformation matrix and creates a new transformation matri
**Parameters** **Parameters**
| Parameters | Type | Mandatory | Default Value | Description | | Parameters | Type | Mandatory | Default Value | Description |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | --------- | ------------- | ------------------- |
| a | number | Yes | 0 |X-axis scale.| | a | number | Yes | 0 | X-axis scale. |
| b | number | Yes | 0 |X-axis skew.| | b | number | Yes | 0 | X-axis skew. |
| c | number | Yes | 0 |Y-axis skew.| | c | number | Yes | 0 | Y-axis skew. |
| d | number | Yes | 0 |Y-axis scale.| | d | number | Yes | 0 | Y-axis scale. |
| e | number | Yes | 0 |X-axis translation.| | e | number | Yes | 0 | X-axis translation. |
| f | number | Yes | 0 |Y-axis translation.| | f | number | Yes | 0 | Y-axis translation. |
**Example** **Example**
...@@ -1857,7 +1857,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1857,7 +1857,7 @@ Resets the existing transformation matrix and creates a new transformation matri
} }
``` ```
![zh-cn_image_0000001193872526](figures/zh-cn_image_0000001193872526.png) ![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png)
### translate ### translate
...@@ -1869,9 +1869,9 @@ Moves the origin of the coordinate system. ...@@ -1869,9 +1869,9 @@ Moves the origin of the coordinate system.
**Parameters** **Parameters**
| Parameters | Type | Mandatory | Default Value | Description | | Parameters | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------- | | ---------- | ------ | --------- | ------------- | ------------------- |
| x | number | Yes | 0 | X-axis translation.| | x | number | Yes | 0 | X-axis translation. |
| y | number | Yes | 0 | Y-axis translation.| | y | number | Yes | 0 | Y-axis translation. |
**Example** **Example**
...@@ -1919,14 +1919,14 @@ Draws an image on the canvas. ...@@ -1919,14 +1919,14 @@ Draws an image on the canvas.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | ---- | ---- | -------------------- | | ----- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.| | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | null | Image resource. For details, see **ImageBitmap** or **PixelMap**. |
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image.| | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image.| | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sw | number | No | 0 | Target width to crop the source image. | | sw | number | No | 0 | Target width to crop the source image. |
| sh | number | No | 0 | Target height to crop the source image. | | sh | number | No | 0 | Target height to crop the source image. |
| dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. | | dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. |
| dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas.| | dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. |
| dw | number | No | 0 | Width of the drawing area. | | dw | number | No | 0 | Width of the drawing area. |
| dh | number | No | 0 | Height of the drawing area. | | dh | number | No | 0 | Height of the drawing area. |
...@@ -1972,9 +1972,9 @@ Creates an **ImageData** object based on the width and height. For details, see ...@@ -1972,9 +1972,9 @@ Creates an **ImageData** object based on the width and height. For details, see
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- | | ---- | ------ | --------- | ------------- | ----------------------------------- |
| sw | number | Yes | 0 | Width of the **ImageData** object.| | sw | number | Yes | 0 | Width of the **ImageData** object. |
| sh | number | Yes | 0 | Height of the **ImageData** object.| | sh | number | Yes | 0 | Height of the **ImageData** object. |
### createImageData ### createImageData
...@@ -1986,14 +1986,14 @@ Creates an **ImageData** object based on the given existing **ImageData** object ...@@ -1986,14 +1986,14 @@ Creates an **ImageData** object based on the given existing **ImageData** object
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- | | --------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object to copy.| | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object to copy. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------- | ---------------------------------------- | | ---------------------------------------- | ------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object.| | [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object. |
### getPixelMap ### getPixelMap
...@@ -2003,18 +2003,18 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi ...@@ -2003,18 +2003,18 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | --------- | ------------- | ---------------------------------------- |
| sx | number | Yes| 0 | X-coordinate of the upper left corner of the output area.| | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
| sy | number | Yes| 0 | Y-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
| sw | number | Yes| 0 | Width of the output area.| | sw | number | Yes | 0 | Width of the output area. |
| sh | number | Yes| 0 | Height of the output area.| | sh | number | Yes | 0 | Height of the output area. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------- | ---------------------------------------- | | ---------------------------------------- | -------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.| | [PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object. |
### getImageData ### getImageData
...@@ -2026,17 +2026,17 @@ Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created ...@@ -2026,17 +2026,17 @@ Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created
**Parameters** **Parameters**
| Parameters | Type | Mandatory | Default Value | Description | | Parameters | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- | | ---------- | ------ | --------- | ------------- | ---------------------------------------- |
| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. |
| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. |
| sw | number | Yes | 0 | Width of the output area. | | sw | number | Yes | 0 | Width of the output area. |
| sh | number | Yes | 0 | Height of the output area. | | sh | number | Yes | 0 | Height of the output area. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------- | ---------------------------------------- | | ---------------------------------------- | ------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object.| | [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object. |
### putImageData ### putImageData
...@@ -2050,14 +2050,14 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are ...@@ -2050,14 +2050,14 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
**Parameters** **Parameters**
| Parameters | Type | Mandatory | Default Value | Description | | Parameters | Type | Mandatory | Default Value | Description |
| ----------- | ------ | ---- | ------------ | ----------------------------- | | ----------- | ------ | --------- | ---------------------------------- | ---------------------------------------- |
| imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. | | imagedata | Object | Yes | null | **ImageData** object with pixels to put onto the canvas. |
| dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. | | dx | number | Yes | 0 | X-axis offset of the rectangular area on the canvas. |
| dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. | | dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
| dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.| | dirtyX | number | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
| dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.| | dirtyY | number | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
| dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. | | dirtyWidth | number | No | Width of the **ImageData** object | Width of the rectangular area to crop the source image. |
| dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. | | dirtyHeight | number | No | Height of the **ImageData** object | Height of the rectangular area to crop the source image. |
**Example** **Example**
...@@ -2105,8 +2105,8 @@ Sets the dash line style. ...@@ -2105,8 +2105,8 @@ Sets the dash line style.
**Parameters** **Parameters**
| Parameter | Type | Description | | Parameter | Type | Description |
| -------- | ----- | -------------------- | | --------- | -------- | ---------------------------------------- |
| segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.| | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap. |
**Example** **Example**
...@@ -2137,7 +2137,7 @@ struct SetLineDash { ...@@ -2137,7 +2137,7 @@ struct SetLineDash {
} }
} }
``` ```
![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png) ![en-us_image_000000127777772](figures/en-us_image_000000127777772.png)
### getLineDash ### getLineDash
...@@ -2149,8 +2149,8 @@ Obtains the dash line style. ...@@ -2149,8 +2149,8 @@ Obtains the dash line style.
**Return value** **Return value**
| Type | Description | | Type | Description |
| ----- | ------------------------ | | -------- | ---------------------------------------- |
| number[] | An array describing the interval of alternate line segments and length of spacing.| | number[] | An array describing the interval of alternate line segments and length of spacing. |
**Example** **Example**
...@@ -2195,8 +2195,8 @@ Displays the specified **ImageBitmap** object. ...@@ -2195,8 +2195,8 @@ Displays the specified **ImageBitmap** object.
**Parameters** **Parameters**
| Parameters | Type | Description | | Parameters | Type | Description |
| ------ | ----------- | ------------------ | | ---------- | ---------------------------------------- | ---------------------------------- |
| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.| | bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display. |
**Example** **Example**
...@@ -2226,7 +2226,7 @@ Displays the specified **ImageBitmap** object. ...@@ -2226,7 +2226,7 @@ Displays the specified **ImageBitmap** object.
} }
} }
``` ```
![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png) ![en-us_image_000000127777773](figures/en-us_image_000000127777773.png)
### toDataURL ### toDataURL
...@@ -2237,15 +2237,15 @@ Generates a URL containing image display information. ...@@ -2237,15 +2237,15 @@ Generates a URL containing image display information.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ---------------------------------------- | | ------- | ------ | --------- | ---------------------------------------- |
| type | string | No | Image format. The default value is **image/png**. | | type | string | No | Image format. The default value is **image/png**. |
| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.| | quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | --------- | | ------ | ----------- |
| string | Image URL.| | string | Image URL. |
**Example** **Example**
...@@ -2284,8 +2284,8 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O ...@@ -2284,8 +2284,8 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------------- | --------------- | | ---------------------------------------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md)| Pixel data rendered on the **OffscreenCanvas**.| | [ImageData](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**. |
**Example** **Example**
...@@ -2395,11 +2395,11 @@ Creates a linear gradient. ...@@ -2395,11 +2395,11 @@ Creates a linear gradient.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | --------- | ------------- | -------------------------------- |
| x0 | number | Yes | 0 | X-coordinate of the start point.| | x0 | number | Yes | 0 | X-coordinate of the start point. |
| y0 | number | Yes | 0 | Y-coordinate of the start point.| | y0 | number | Yes | 0 | Y-coordinate of the start point. |
| x1 | number | Yes | 0 | X-coordinate of the end point.| | x1 | number | Yes | 0 | X-coordinate of the end point. |
| y1 | number | Yes | 0 | Y-coordinate of the end point.| | y1 | number | Yes | 0 | Y-coordinate of the end point. |
**Example** **Example**
...@@ -2447,13 +2447,13 @@ Creates a linear gradient. ...@@ -2447,13 +2447,13 @@ Creates a linear gradient.
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------------- | | ---- | ------ | --------- | ------------- | ---------------------------------------- |
| x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | | x0 | number | Yes | 0 | X-coordinate of the center of the start circle. |
| y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | | y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. |
| r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number.| | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number. |
| x1 | number | Yes | 0 | X-coordinate of the center of the end circle. | | x1 | number | Yes | 0 | X-coordinate of the center of the end circle. |
| y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. | | y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
| r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.| | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number. |
**Example** **Example**
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ bc8d7477
...@@ -15,7 +15,7 @@ ...@@ -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 @@ ...@@ -23,7 +23,7 @@
支持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; | - | 否 | 设置组件的高度。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ bc8d7477
...@@ -84,7 +84,7 @@ domStorageAccess(domStorageAccess: boolean) ...@@ -84,7 +84,7 @@ domStorageAccess(domStorageAccess: boolean)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------------- | ------- | ---- | ---- | ------------------------------------ | | ---------------- | ------- | ---- | ----- | ------------------------------------ |
| domStorageAccess | boolean | 是 | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。 | | domStorageAccess | boolean | 是 | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。 |
**示例：** **示例：**
...@@ -108,12 +108,12 @@ domStorageAccess(domStorageAccess: boolean) ...@@ -108,12 +108,12 @@ domStorageAccess(domStorageAccess: boolean)
fileAccess(fileAccess: boolean) fileAccess(fileAccess: boolean)
设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../ui/ts-resource-access.md)中rawfile路径的文件不受该属性影响而限制访问。 设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------- | ---- | ---- | ---------------------------------------- | | ---------- | ------- | ---- | ---- | ---------------------- |
| fileAccess | boolean | 是 | true | 设置是否开启应用中文件系统的访问，默认启用。 | | fileAccess | boolean | 是 | true | 设置是否开启应用中文件系统的访问，默认启用。 |
**示例：** **示例：**
...@@ -137,7 +137,7 @@ fileAccess(fileAccess: boolean) ...@@ -137,7 +137,7 @@ fileAccess(fileAccess: boolean)
fileFromUrlAccess(fileFromUrlAccess: boolean) fileFromUrlAccess(fileFromUrlAccess: boolean)
设置是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容，默认未启用。[$rawfile(filepath/filename)](../../ui/ts-resource-access.md)中rawfile路径的文件不受该属性影响而限制访问。 设置是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容，默认未启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。
**参数：** **参数：**
...@@ -200,7 +200,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr ...@@ -200,7 +200,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | --------------- | ---- | ---- | ------------------------- | | ---------- | ------------------------------- | ---- | ---- | ------------------------- |
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 | | object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 | | name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | | methodList | Array\<string\> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
...@@ -278,7 +278,7 @@ mixedMode(mixedMode: MixedMode) ...@@ -278,7 +278,7 @@ mixedMode(mixedMode: MixedMode)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------------------- | ---- | ---- | --------- | | --------- | --------------------------- | ---- | -------------- | --------- |
| mixedMode | [MixedMode](#mixedmode枚举说明) | 是 | MixedMode.None | 要设置的混合内容。 | | mixedMode | [MixedMode](#mixedmode枚举说明) | 是 | MixedMode.None | 要设置的混合内容。 |
**示例：** **示例：**
...@@ -395,7 +395,7 @@ databaseAccess(databaseAccess: boolean) ...@@ -395,7 +395,7 @@ databaseAccess(databaseAccess: boolean)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ------- | ---- | ---- | ----------------- | | -------------- | ------- | ---- | ----- | ----------------- |
| databaseAccess | boolean | 是 | false | 设置是否开启数据库存储API权限。 | | databaseAccess | boolean | 是 | false | 设置是否开启数据库存储API权限。 |
**示例：** **示例：**
...@@ -424,7 +424,7 @@ geolocationAccess(geolocationAccess: boolean) ...@@ -424,7 +424,7 @@ geolocationAccess(geolocationAccess: boolean)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ------- | ---- | ---- | ----------------- | | ----------------- | ------- | ---- | ---- | --------------- |
| geolocationAccess | boolean | 是 | true | 设置是否开启获取地理位置权限。 | | geolocationAccess | boolean | 是 | true | 设置是否开启获取地理位置权限。 |
**示例：** **示例：**
...@@ -453,7 +453,7 @@ mediaPlayGestureAccess(access: boolean) ...@@ -453,7 +453,7 @@ mediaPlayGestureAccess(access: boolean)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------ | ---- | ---- | --------- | | ------ | ------- | ---- | ---- | ----------------- |
| access | boolean | 是 | true | 设置视频播放是否需要用户手动点击。 | | access | boolean | 是 | true | 设置视频播放是否需要用户手动点击。 |
**示例：** **示例：**
...@@ -483,7 +483,7 @@ cacheMode(cacheMode: CacheMode) ...@@ -483,7 +483,7 @@ cacheMode(cacheMode: CacheMode)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------------------- | ---- | ---- | --------- | | --------- | --------------------------- | ---- | ----------------- | --------- |
| cacheMode | [CacheMode](#cachemode枚举说明) | 是 | CacheMode.Default | 要设置的缓存模式。 | | cacheMode | [CacheMode](#cachemode枚举说明) | 是 | CacheMode.Default | 要设置的缓存模式。 |
**示例：** **示例：**
...@@ -513,7 +513,7 @@ textZoomRatio(textZoomRatio: number) ...@@ -513,7 +513,7 @@ textZoomRatio(textZoomRatio: number)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ------ | ---- | ---- | --------------- | | ------------- | ------ | ---- | ---- | --------------- |
| textZoomRatio | number | 是 | 100 | 要设置的页面的文本缩放百分比。 | | textZoomRatio | number | 是 | 100 | 要设置的页面的文本缩放百分比。 |
**示例：** **示例：**
...@@ -573,7 +573,7 @@ webDebuggingAccess(webDebuggingAccess: boolean) ...@@ -573,7 +573,7 @@ webDebuggingAccess(webDebuggingAccess: boolean)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------ | ---- | ---- | --------- | | ------------------ | ------- | ---- | ----- | ------------- |
| webDebuggingAccess | boolean | 是 | false | 设置是否启用网页调试功能。 | | webDebuggingAccess | boolean | 是 | false | 设置是否启用网页调试功能。 |
**示例：** **示例：**
...@@ -1156,7 +1156,7 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean ...@@ -1156,7 +1156,7 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ----------- | ------- | --------------------------------- | | ----------- | ------- | ---------------------------------------- |
| url | string | 访问的url。 | | url | string | 访问的url。 |
| isRefreshed | boolean | true表示该页面是被重新加载的（调用[refresh](#refresh)接口），false表示该页面是新加载的。 | | isRefreshed | boolean | true表示该页面是被重新加载的（调用[refresh](#refresh)接口），false表示该页面是新加载的。 |
...@@ -1228,7 +1228,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector ...@@ -1228,7 +1228,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | ----------------------------------- | | ------- | ---------------------------------------- |
| boolean | 当返回值为true时，用户可以调用系统提供的弹窗能力。当返回值为false时，触发Web默认弹窗。 | | boolean | 当返回值为true时，用户可以调用系统提供的弹窗能力。当返回值为false时，触发Web默认弹窗。 |
**示例：** **示例：**
...@@ -1322,7 +1322,7 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso ...@@ -1322,7 +1322,7 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------------- | --------------------------- | | ---------------------------------------- | ---------------------------------------- |
| [WebResourceResponse](#webresourceresponse) | 返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。 | | [WebResourceResponse](#webresourceresponse) | 返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。 |
**示例：** **示例：**
...@@ -1450,7 +1450,7 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE ...@@ -1450,7 +1450,7 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ------- | ------------------------------------ | ---------------- | | ------- | ------------------------------------ | -------------- |
| handler | [SslErrorHandler](#sslerrorhandler9) | 通知Web组件用户操作行为。 | | handler | [SslErrorHandler](#sslerrorhandler9) | 通知Web组件用户操作行为。 |
| error | [SslError](#sslerror9枚举说明) | 错误码。 | | error | [SslError](#sslerror9枚举说明) | 错误码。 |
...@@ -1503,12 +1503,12 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH ...@@ -1503,12 +1503,12 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ------- | ------------------------------------ | ---------------- | | -------- | ---------------------------------------- | --------------- |
| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | 通知Web组件用户操作行为。| | handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | 通知Web组件用户操作行为。 |
| host | string | 请求证书服务器的主机名。 | | host | string | 请求证书服务器的主机名。 |
| port | number | 请求证书服务器的端口号。 | | port | number | 请求证书服务器的端口号。 |
| keyTypes| Array<string> | 可接受的非对称秘钥类型。 | | keyTypes | Array<string> | 可接受的非对称秘钥类型。 |
| issuers | Array<string> | 与私钥匹配的证书可接受颁发者。| | issuers | Array<string> | 与私钥匹配的证书可接受颁发者。 |
**示例：** **示例：**
```ts ```ts
...@@ -1558,7 +1558,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void) ...@@ -1558,7 +1558,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ------- | ------------------------------------ | ---------------- | | ------- | ---------------------------------------- | -------------- |
| request | [PermissionRequest](#permissionrequest9) | 通知Web组件用户操作行为。 | | request | [PermissionRequest](#permissionrequest9) | 通知Web组件用户操作行为。 |
**示例：** **示例：**
...@@ -1607,14 +1607,14 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo ...@@ -1607,14 +1607,14 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ------- | ------------------------------------ | ---------------- | | ------ | ---------------------------------------- | ----------- |
| param | [WebContextMenuParam](#webcontextmenuparam9) | 菜单相关参数。 | | param | [WebContextMenuParam](#webcontextmenuparam9) | 菜单相关参数。 |
| result | [WebContextMenuResult](#webcontextmenuresult9) | 菜单相应事件传入内核。 | | result | [WebContextMenuResult](#webcontextmenuresult9) | 菜单相应事件传入内核。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | -------------------- | | ------- | ------------------------ |
| boolean | 自定义菜单返回true，默认菜单返回false。 | | boolean | 自定义菜单返回true，默认菜单返回false。 |
**示例：** **示例：**
...@@ -1647,7 +1647,7 @@ onScroll(callback: (event: {xOffset: number, yOffset: number}) => void) ...@@ -1647,7 +1647,7 @@ onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ------- | ------------------------------------ | ---------------- | | ------- | ------ | ------------ |
| xOffset | number | 水平滚动条滚动所在位置。 | | xOffset | number | 水平滚动条滚动所在位置。 |
| yOffset | number | 竖直滚动条滚动所在位置。 | | yOffset | number | 竖直滚动条滚动所在位置。 |
...@@ -1680,9 +1680,9 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio ...@@ -1680,9 +1680,9 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ----------- | ------------------------------- | ---------------- | | ----------- | ------------------------------- | -------------- |
| origin | string | 指定源的字符串索引。 | | origin | string | 指定源的字符串索引。 |
| geolocation | [JsGeolocation](#jsgeolocation) | 通知Web组件用户操作行为。| | geolocation | [JsGeolocation](#jsgeolocation) | 通知Web组件用户操作行为。 |
**示例：** **示例：**
...@@ -2184,9 +2184,9 @@ confirm(priKeyFile : string, certChainFile : string): void ...@@ -2184,9 +2184,9 @@ confirm(priKeyFile : string, certChainFile : string): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | ------ | ---- | ---------- | | ------------- | ------ | ---- | ------------------ |
| priKeyFile | string | 是 | 存放私钥的文件，包含路径和文件名。| | priKeyFile | string | 是 | 存放私钥的文件，包含路径和文件名。 |
| certChainFile | string | 是 | 存放证书链的文件，包含路径和文件名。| | certChainFile | string | 是 | 存放证书链的文件，包含路径和文件名。 |
### cancel<sup>9+</sup> ### cancel<sup>9+</sup>
...@@ -2219,7 +2219,7 @@ getOrigin(): string ...@@ -2219,7 +2219,7 @@ getOrigin(): string
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | --------------------- | | ------ | ------------ |
| string | 当前请求权限网页的来源。 | | string | 当前请求权限网页的来源。 |
### getAccessibleResource<sup>9+</sup> ### getAccessibleResource<sup>9+</sup>
...@@ -2231,7 +2231,7 @@ getAccessibleResource(): Array\<string\> ...@@ -2231,7 +2231,7 @@ getAccessibleResource(): Array\<string\>
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | --------------- | ------------- |
| Array\<string\> | 网页所请求的权限资源列表。 | | Array\<string\> | 网页所请求的权限资源列表。 |
### grant<sup>9+</sup> ### grant<sup>9+</sup>
...@@ -2243,8 +2243,8 @@ grant(resources: Array\<string\>): void ...@@ -2243,8 +2243,8 @@ grant(resources: Array\<string\>): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------- | ---- | ----- | ---------------------- | | --------- | --------------- | ---- | ---- | ------------- |
| resources | Array\<string\> | 是 | - | 网页所请求的权限资源列表。| | resources | Array\<string\> | 是 | - | 网页所请求的权限资源列表。 |
## WebContextMenuParam<sup>9+</sup> ## WebContextMenuParam<sup>9+</sup>
...@@ -2259,7 +2259,7 @@ x(): number ...@@ -2259,7 +2259,7 @@ x(): number
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | ------ | ------------------ |
| number | 显示正常返回非负整数，否则返回-1。 | | number | 显示正常返回非负整数，否则返回-1。 |
### y<sup>9+</sup> ### y<sup>9+</sup>
...@@ -2271,7 +2271,7 @@ y(): number ...@@ -2271,7 +2271,7 @@ y(): number
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | ------ | ------------------ |
| number | 显示正常返回非负整数，否则返回-1。 | | number | 显示正常返回非负整数，否则返回-1。 |
### getLinkUrl<sup>9+</sup> ### getLinkUrl<sup>9+</sup>
...@@ -2283,7 +2283,7 @@ getLinkUrl(): string ...@@ -2283,7 +2283,7 @@ getLinkUrl(): string
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | ------ | ------------------------- |
| string | 如果长按位置是链接，返回经过安全检查的url链接。 | | string | 如果长按位置是链接，返回经过安全检查的url链接。 |
### getUnfilterendLinkUrl<sup>9+</sup> ### getUnfilterendLinkUrl<sup>9+</sup>
...@@ -2295,7 +2295,7 @@ getUnfilterendLinkUrl(): string ...@@ -2295,7 +2295,7 @@ getUnfilterendLinkUrl(): string
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | ------ | --------------------- |
| string | 如果长按位置是链接，返回原始的url链接。 | | string | 如果长按位置是链接，返回原始的url链接。 |
### getSourceUrl<sup>9+</sup> ### getSourceUrl<sup>9+</sup>
...@@ -2307,7 +2307,7 @@ getSourceUrl(): string ...@@ -2307,7 +2307,7 @@ getSourceUrl(): string
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | ------ | ------------------------ |
| string | 如果选中的元素有src属性，返回src的url。 | | string | 如果选中的元素有src属性，返回src的url。 |
### existsImageContents<sup>9+</sup> ### existsImageContents<sup>9+</sup>
...@@ -2319,7 +2319,7 @@ existsImageContents(): boolean ...@@ -2319,7 +2319,7 @@ existsImageContents(): boolean
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| --------------- | ----------------------- | | ------- | ------------------------- |
| boolean | 长按位置中有图片返回true，否则返回false。 | | boolean | 长按位置中有图片返回true，否则返回false。 |
## WebContextMenuResult<sup>9+</sup> ## WebContextMenuResult<sup>9+</sup>
...@@ -2351,7 +2351,7 @@ invoke(origin: string, allow: boolean, retain: boolean): void ...@@ -2351,7 +2351,7 @@ invoke(origin: string, allow: boolean, retain: boolean): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ----- | ---------------------- | | ------ | ------- | ---- | ---- | ---------------------------------------- |
| origin | string | 是 | - | 指定源的字符串索引。 | | origin | string | 是 | - | 指定源的字符串索引。 |
| allow | boolean | 是 | - | 设置的地理位置权限状态。 | | allow | boolean | 是 | - | 设置的地理位置权限状态。 |
| retain | boolean | 是 | - | 是否允许将地理位置权限状态保存到系统中。可通过[GeolocationPermissions](#geolocationpermissions9)接口管理保存到系统的地理位置权限。 | | retain | boolean | 是 | - | 是否允许将地理位置权限状态保存到系统中。可通过[GeolocationPermissions](#geolocationpermissions9)接口管理保存到系统的地理位置权限。 |
...@@ -3363,7 +3363,7 @@ createWebMessagePorts(): Array\<WebMessagePort\> ...@@ -3363,7 +3363,7 @@ createWebMessagePorts(): Array\<WebMessagePort\>
| 类型 | 说明 | | 类型 | 说明 |
| ------------------------------- | ------------- | | ---------------------------------------- | ---------- |
| Array\<[WebMessagePort](#webmessageport9)\> | web信息端口列表。 | | Array\<[WebMessagePort](#webmessageport9)\> | web信息端口列表。 |
**示例：** **示例：**
...@@ -3397,8 +3397,8 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void ...@@ -3397,8 +3397,8 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | --------------- | ---- | ---- | ------------------------- | | ------- | ------------------------------------ | ---- | ---- | ------------------ |
| message | [WebMessageEvent](#webmessageevent9) | 是 | - |要发送的信息，包含数据和信息端口 。 | | message | [WebMessageEvent](#webmessageevent9) | 是 | - | 要发送的信息，包含数据和信息端口 。 |
| uri | string | 是 | - | 接收该信息的URI。 | | uri | string | 是 | - | 接收该信息的URI。 |
**示例：** **示例：**
...@@ -3508,7 +3508,7 @@ getUrl(): string ...@@ -3508,7 +3508,7 @@ getUrl(): string
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------------------------------- | ------------- | | ------ | ----------- |
| string | 当前页面的url地址。 | | string | 当前页面的url地址。 |
**示例：** **示例：**
...@@ -3642,13 +3642,13 @@ getCookie(url: string): string ...@@ -3642,13 +3642,13 @@ getCookie(url: string): string
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | ---- | ------ | ---- | ---- | ----------------- |
| url | string | 是 | - | 要获取的cookie所属的url。 | | url | string | 是 | - | 要获取的cookie所属的url。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | -------------------- | | ------ | ----------------- |
| string | 指定url对应的cookie的值。 | | string | 指定url对应的cookie的值。 |
**示例：** **示例：**
...@@ -3689,7 +3689,7 @@ setCookie(url: string, value: string): boolean ...@@ -3689,7 +3689,7 @@ setCookie(url: string, value: string): boolean
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | -------------------- | | ------- | ------------- |
| boolean | 设置cookie是否成功。 | | boolean | 设置cookie是否成功。 |
**示例：** **示例：**
...@@ -3757,7 +3757,7 @@ saveCookieAsync(): Promise\<boolean> ...@@ -3757,7 +3757,7 @@ saveCookieAsync(): Promise\<boolean>
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | -------------------- | | ----------------- | --------------------------- |
| Promise\<boolean> | Promise实例，用于获取cookie是否成功保存。 | | Promise\<boolean> | Promise实例，用于获取cookie是否成功保存。 |
**示例：** **示例：**
...@@ -3796,7 +3796,7 @@ saveCookieAsync(callback: AsyncCallback\<boolean>): void ...@@ -3796,7 +3796,7 @@ saveCookieAsync(callback: AsyncCallback\<boolean>): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | -------- | ----------------------- | ---- | ---- | ---------------------------- |
| callback | AsyncCallback\<boolean> | 是 | - | 返回cookie是否成功保存的布尔值作为回调函数的入参。 | | callback | AsyncCallback\<boolean> | 是 | - | 返回cookie是否成功保存的布尔值作为回调函数的入参。 |
**示例：** **示例：**
...@@ -3831,7 +3831,7 @@ isCookieAllowed(): boolean ...@@ -3831,7 +3831,7 @@ isCookieAllowed(): boolean
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | -------------------- | | ------- | ------------------- |
| boolean | 是否拥有发送和接收cookie的权限。 | | boolean | 是否拥有发送和接收cookie的权限。 |
**示例：** **示例：**
...@@ -3865,7 +3865,7 @@ putAcceptCookieEnabled(accept: boolean): void ...@@ -3865,7 +3865,7 @@ putAcceptCookieEnabled(accept: boolean): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | ------ | ------- | ---- | ---- | --------------------- |
| accept | boolean | 是 | - | 设置是否拥有发送和接收cookie的权限。 | | accept | boolean | 是 | - | 设置是否拥有发送和接收cookie的权限。 |
**示例：** **示例：**
...@@ -3898,7 +3898,7 @@ isThirdCookieAllowed(): boolean ...@@ -3898,7 +3898,7 @@ isThirdCookieAllowed(): boolean
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | -------------------- | | ------- | ---------------------- |
| boolean | 是否拥有发送和接收第三方cookie的权限。 | | boolean | 是否拥有发送和接收第三方cookie的权限。 |
**示例：** **示例：**
...@@ -3932,7 +3932,7 @@ putAcceptThirdPartyCookieEnabled(accept: boolean): void ...@@ -3932,7 +3932,7 @@ putAcceptThirdPartyCookieEnabled(accept: boolean): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | ------ | ------- | ---- | ---- | ------------------------ |
| accept | boolean | 是 | - | 设置是否拥有发送和接收第三方cookie的权限。 | | accept | boolean | 是 | - | 设置是否拥有发送和接收第三方cookie的权限。 |
**示例：** **示例：**
...@@ -3965,7 +3965,7 @@ existCookie(): boolean ...@@ -3965,7 +3965,7 @@ existCookie(): boolean
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | -------------------- | | ------- | ----------- |
| boolean | 是否存在cookie。 | | boolean | 是否存在cookie。 |
**示例：** **示例：**
...@@ -4209,7 +4209,7 @@ static allowGeolocation(origin: string): void ...@@ -4209,7 +4209,7 @@ static allowGeolocation(origin: string): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | ------------- | | ------ | ------ | ---- | ---- | ---------- |
| origin | string | 是 | - | 指定源的字符串索引。 | | origin | string | 是 | - | 指定源的字符串索引。 |
**示例：** **示例：**
...@@ -4243,7 +4243,7 @@ static deleteGeolocation(origin: string): void ...@@ -4243,7 +4243,7 @@ static deleteGeolocation(origin: string): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | ------------- | | ------ | ------ | ---- | ---- | ---------- |
| origin | string | 是 | - | 指定源的字符串索引。 | | origin | string | 是 | - | 指定源的字符串索引。 |
**示例：** **示例：**
...@@ -4304,7 +4304,7 @@ static getAccessibleGeolocation(origin: string, callback: AsyncCallback\<boolean ...@@ -4304,7 +4304,7 @@ static getAccessibleGeolocation(origin: string, callback: AsyncCallback\<boolean
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | ------------- | | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
| origin | string | 是 | - | 指定源的字符串索引。 | | origin | string | 是 | - | 指定源的字符串索引。 |
| callback | AsyncCallback\<boolean\> | 是 | - | 返回指定源的地理位置权限状态。获取成功，true表示已授权，false表示拒绝访问。获取失败，表示不存在指定源的权限状态。 | | callback | AsyncCallback\<boolean\> | 是 | - | 返回指定源的地理位置权限状态。获取成功，true表示已授权，false表示拒绝访问。获取失败，表示不存在指定源的权限状态。 |
...@@ -4345,13 +4345,13 @@ static getAccessibleGeolocation(origin: string): Promise\<boolean\> ...@@ -4345,13 +4345,13 @@ static getAccessibleGeolocation(origin: string): Promise\<boolean\>
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | ------------- | | ------ | ------ | ---- | ---- | ---------- |
| origin | string | 是 | - | 指定源的字符串索引。 | | origin | string | 是 | - | 指定源的字符串索引。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------------------ | ------------------------------------ | | ------------------ | ---------------------------------------- |
| Promise\<boolean\> | Promise实例，用于获取指定源的权限状态，获取成功，true表示已授权，false表示拒绝访问。获取失败，表示不存在指定源的权限状态。 | | Promise\<boolean\> | Promise实例，用于获取指定源的权限状态，获取成功，true表示已授权，false表示拒绝访问。获取失败，表示不存在指定源的权限状态。 |
**示例：** **示例：**
...@@ -4389,7 +4389,7 @@ static getStoredGeolocation(callback: AsyncCallback\<Array\<string\>\>): void ...@@ -4389,7 +4389,7 @@ static getStoredGeolocation(callback: AsyncCallback\<Array\<string\>\>): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | ------------- | | -------- | -------------------------------- | ---- | ---- | -------------------- |
| callback | AsyncCallback\<Array\<string\>\> | 是 | - | 返回已存储地理位置权限状态的所有源信息。 | | callback | AsyncCallback\<Array\<string\>\> | 是 | - | 返回已存储地理位置权限状态的所有源信息。 |
**示例：** **示例：**
...@@ -4429,13 +4429,13 @@ static getStoredGeolocation(): Promise\<Array\<string\>\> ...@@ -4429,13 +4429,13 @@ static getStoredGeolocation(): Promise\<Array\<string\>\>
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | ------------- | | -------- | -------------------------------- | ---- | ---- | -------------------- |
| callback | AsyncCallback\<Array\<string\>\> | 是 | - | 返回已存储地理位置权限状态的所有源信息。 | | callback | AsyncCallback\<Array\<string\>\> | 是 | - | 返回已存储地理位置权限状态的所有源信息。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------------------- | ------------------------------------ | | -------------------------- | -------------------------------- |
| Promise\<Array\<string\>\> | Promise实例，用于获取已存储地理位置权限状态的所有源信息。 | | Promise\<Array\<string\>\> | Promise实例，用于获取已存储地理位置权限状态的所有源信息。 |
**示例：** **示例：**
...@@ -4797,7 +4797,7 @@ searchAllAsync(searchString: string): void ...@@ -4797,7 +4797,7 @@ searchAllAsync(searchString: string): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | --------------------- | | ------------ | ------ | ---- | ---- | ------- |
| searchString | string | 是 | - | 查找的关键字。 | | searchString | string | 是 | - | 查找的关键字。 |
**示例：** **示例：**
...@@ -4870,7 +4870,7 @@ searchNext(forward: boolean): void ...@@ -4870,7 +4870,7 @@ searchNext(forward: boolean): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | --------------------- | | ------- | ------- | ---- | ---- | ----------- |
| forward | boolean | 是 | - | 从前向后或者逆向查找。 | | forward | boolean | 是 | - | 从前向后或者逆向查找。 |
...@@ -4904,7 +4904,7 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa ...@@ -4904,7 +4904,7 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa
**参数：** **参数：**
| 参数名 | 参数类型 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| ------------------ | ------------- | ----------------------------------- | | ------------------ | ------- | ---------------------------------------- |
| activeMatchOrdinal | number | 当前匹配的查找项的序号（从0开始）。 | | activeMatchOrdinal | number | 当前匹配的查找项的序号（从0开始）。 |
| numberOfMatches | number | 所有匹配到的关键词的个数。 | | numberOfMatches | number | 所有匹配到的关键词的个数。 |
| isDoneCounting | boolean | 当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。 | | isDoneCounting | boolean | 当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。 |
...@@ -5005,7 +5005,7 @@ onRenderExited接口返回的渲染进程退出的具体原因。 ...@@ -5005,7 +5005,7 @@ onRenderExited接口返回的渲染进程退出的具体原因。
onSslErrorEventReceive接口返回的SSL错误的具体原因。 onSslErrorEventReceive接口返回的SSL错误的具体原因。
| 名称 | 描述 | | 名称 | 描述 |
| -------------- | ----------------- | | ------------ | ----------- |
| Invalid | 一般错误。 | | Invalid | 一般错误。 |
| HostMismatch | 主机名不匹配。 | | HostMismatch | 主机名不匹配。 |
| DateInvalid | 证书日期无效。 | | DateInvalid | 证书日期无效。 |
...@@ -5014,8 +5014,8 @@ onSslErrorEventReceive接口返回的SSL错误的具体原因。 ...@@ -5014,8 +5014,8 @@ onSslErrorEventReceive接口返回的SSL错误的具体原因。
## ProtectedResourceType<sup>9+</sup>枚举说明 ## ProtectedResourceType<sup>9+</sup>枚举说明
| 名称 | 描述 | 备注 | | 名称 | 描述 | 备注 |
| --------- | -------------- | -------------- | | --------- | ------------- | -------------------------- |
| MidiSysex | MIDI SYSEX资源。| 目前仅支持权限事件上报，MIDI设备的使用还未支持。| | MidiSysex | MIDI SYSEX资源。 | 目前仅支持权限事件上报，MIDI设备的使用还未支持。 |
## WebAsyncController ## WebAsyncController
...@@ -5084,7 +5084,7 @@ storeWebArchive(baseName: string, autoName: boolean): Promise<string> ...@@ -5084,7 +5084,7 @@ storeWebArchive(baseName: string, autoName: boolean): Promise<string>
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------------- | ---------------------------------------- | | --------------- | -------------------------------- |
| Promise<string> | Promise实例，保存成功返回文件路径，保存失败返回null。 | | Promise<string> | Promise实例，保存成功返回文件路径，保存失败返回null。 |
**示例：** **示例：**
...@@ -5131,7 +5131,7 @@ postMessageEvent(message: WebMessageEvent): void ...@@ -5131,7 +5131,7 @@ postMessageEvent(message: WebMessageEvent): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | ------- | ------------------------------------ | ---- | ---- | ------- |
| message | [WebMessageEvent](#webmessageevent9) | 是 | - | 要发送的消息。 | | message | [WebMessageEvent](#webmessageevent9) | 是 | - | 要发送的消息。 |
**示例：** **示例：**
...@@ -5166,7 +5166,7 @@ onMessageEvent(callback: (result: string) => void): void ...@@ -5166,7 +5166,7 @@ onMessageEvent(callback: (result: string) => void): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | -------- | -------- | ---- | ---- | ---------- |
| callback | function | 是 | - | 接收消息的回调函数。 | | callback | function | 是 | - | 接收消息的回调函数。 |
**示例：** **示例：**
...@@ -5206,7 +5206,7 @@ getData(): string ...@@ -5206,7 +5206,7 @@ getData(): string
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------------------------------- | ------------- | | ------ | -------------- |
| string | 当前该类型对象中存放的消息。 | | string | 当前该类型对象中存放的消息。 |
**示例：** **示例：**
...@@ -5238,7 +5238,7 @@ setData(data: string): void ...@@ -5238,7 +5238,7 @@ setData(data: string): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | ---- | ------ | ---- | ---- | ------- |
| data | string | 是 | - | 要发送的消息。 | | data | string | 是 | - | 要发送的消息。 |
**示例：** **示例：**
...@@ -5272,7 +5272,7 @@ getPorts(): Array\<WebMessagePort\> ...@@ -5272,7 +5272,7 @@ getPorts(): Array\<WebMessagePort\>
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ------------------------------- | ------------- | | ---------------------------------------- | ---------------- |
| Array\<[WebMessagePort](#webmessageport9)\> | 当前该类型对象中存放的消息端口。 | | Array\<[WebMessagePort](#webmessageport9)\> | 当前该类型对象中存放的消息端口。 |
**示例：** **示例：**
...@@ -5306,7 +5306,7 @@ setPorts(ports: Array\<WebMessagePort\>): void ...@@ -5306,7 +5306,7 @@ setPorts(ports: Array\<WebMessagePort\>): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- | | ----- | ---------------------------------------- | ---- | ---- | --------- |
| ports | Array\<[WebMessagePort](#webmessageport9)\> | 是 | - | 要发送的消息端口。 | | ports | Array\<[WebMessagePort](#webmessageport9)\> | 是 | - | 要发送的消息端口。 |
**示例：** **示例：**
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ bc8d7477
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
## 事件 ## 事件
| 名称 | 支持冒泡 | 描述 | | 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ---------------------------------------- | ---- | ---------------------------------------- |
| 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返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
## MouseEvent对象说明 ## MouseEvent对象说明
| 名称 | 属性类型 | 描述 | | 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- | | ---------------------- | ---------------------------------------- | ---------------------------- |
| screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 | | screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 |
| screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 | | screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 |
| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 | | x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 |
...@@ -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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或