Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 0bb8d68f 编写于 作者: H HelloCrease
浏览文件
操作

update英文 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 d30c6855
显示空白变更内容
内联 并排
Showing with 559 addition and 515 deletion
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 0bb8d68f
...@@ -14,7 +14,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) ...@@ -14,7 +14,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. | | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
...@@ -26,14 +26,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet ...@@ -26,14 +26,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---- | --------- | ------------- | -------------------------------- |
| antialias | bool | No | false | Whether antialiasing is enabled. | | antialias | bool | No | false | Whether antialiasing is enabled. |
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [fillStyle](#fillstyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
| [lineWidth](#linewidth) | number | - | Line width. | | [lineWidth](#linewidth) | number | - | Line width. |
| [strokeStyle](#strokestyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [strokeStyle](#strokestyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
...@@ -440,7 +440,7 @@ struct LineDashOffset { ...@@ -440,7 +440,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. |
...@@ -660,7 +660,7 @@ Fills a rectangle on the canvas. ...@@ -660,7 +660,7 @@ 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. |
...@@ -702,7 +702,7 @@ Draws an outlined rectangle on the canvas. ...@@ -702,7 +702,7 @@ 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. |
...@@ -743,7 +743,7 @@ Clears the content in a rectangle on the canvas. ...@@ -743,7 +743,7 @@ 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. |
...@@ -786,7 +786,7 @@ Draws filled text on the canvas. ...@@ -786,7 +786,7 @@ 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. |
...@@ -827,7 +827,7 @@ Draws a text stroke on the canvas. ...@@ -827,7 +827,7 @@ 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. |
...@@ -868,17 +868,17 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -868,17 +868,17 @@ 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** attributes - **TextMetrics** attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | ----- | ------ | ------------------ |
| width | number | Width of the text. | | width | number | Width of the text. |
- Example - Example
...@@ -918,7 +918,7 @@ Strokes a path. ...@@ -918,7 +918,7 @@ 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
...@@ -999,7 +999,7 @@ Moves a drawing path to a target position on the canvas. ...@@ -999,7 +999,7 @@ 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. |
...@@ -1042,7 +1042,7 @@ Connects the current point to a target position using a straight line. ...@@ -1042,7 +1042,7 @@ 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. |
...@@ -1124,7 +1124,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1124,7 +1124,7 @@ 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'**. |
...@@ -1167,7 +1167,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1167,7 +1167,7 @@ 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. |
...@@ -1214,7 +1214,7 @@ Draws a quadratic curve on the canvas. ...@@ -1214,7 +1214,7 @@ 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. |
...@@ -1258,7 +1258,7 @@ Draws an arc on the canvas. ...@@ -1258,7 +1258,7 @@ 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. |
...@@ -1304,7 +1304,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -1304,7 +1304,7 @@ 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. |
...@@ -1349,7 +1349,7 @@ Draws an ellipse in the specified rectangular region. ...@@ -1349,7 +1349,7 @@ Draws an ellipse in the specified rectangular region.
- 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. |
...@@ -1398,7 +1398,7 @@ Creates a rectangle. ...@@ -1398,7 +1398,7 @@ Creates a rectangle.
- 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. |
...@@ -1514,7 +1514,7 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -1514,7 +1514,7 @@ Rotates a canvas clockwise around its coordinate axes.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | --------- | ------------- | ---------------------------------------- |
| rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. | | rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
- Example - Example
...@@ -1554,7 +1554,7 @@ Scales a canvas based on scale factors. ...@@ -1554,7 +1554,7 @@ Scales a 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. |
...@@ -1603,7 +1603,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1603,7 +1603,7 @@ 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 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. | | scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. | | skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. | | skewY | number | Yes | 0 | Y-axis skew. |
...@@ -1618,7 +1618,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1618,7 +1618,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: RenderingContext = new RenderingContext(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1654,7 +1654,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1654,7 +1654,7 @@ Resets the existing transformation matrix and creates a new transformation matri
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. | | scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. | | skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. | | skewY | number | Yes | 0 | Y-axis skew. |
...@@ -1702,7 +1702,7 @@ Moves the origin of the coordinate system. ...@@ -1702,7 +1702,7 @@ Moves the origin of the coordinate system.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | 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. |
...@@ -1748,7 +1748,7 @@ Draws an image. ...@@ -1748,7 +1748,7 @@ Draws an image.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap |
| 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. |
...@@ -1796,7 +1796,7 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv ...@@ -1796,7 +1796,7 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | --------- | ------------- | ----------------------------------- |
| width | number | Yes | 0 | Width of the **ImageData** object. | | width | number | Yes | 0 | Width of the **ImageData** object. |
| height | number | Yes | 0 | Height of the **ImageData** object. | | height | number | Yes | 0 | Height of the **ImageData** object. |
...@@ -1809,7 +1809,7 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv ...@@ -1809,7 +1809,7 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | --------- | ------ | --------- | ------------- | ---------------------------------------- |
| imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. | | imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. |
...@@ -1820,7 +1820,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1820,7 +1820,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas. Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
- 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. |
...@@ -1835,7 +1835,7 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are ...@@ -1835,7 +1835,7 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | 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. |
...@@ -1951,7 +1951,7 @@ Creates a linear gradient. ...@@ -1951,7 +1951,7 @@ 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. |
...@@ -1974,9 +1974,9 @@ Creates a linear gradient. ...@@ -1974,9 +1974,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50,0, 300,100)
this.grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
...@@ -1998,7 +1998,7 @@ Creates a linear gradient. ...@@ -1998,7 +1998,7 @@ 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. |
...@@ -2023,9 +2023,9 @@ Creates a linear gradient. ...@@ -2023,9 +2023,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200) var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
this.grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 0bb8d68f
...@@ -14,7 +14,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ...@@ -14,7 +14,7 @@ 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. |
...@@ -23,7 +23,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render ...@@ -23,7 +23,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [fillStyle](#fillstyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the fill color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
| [lineWidth](#linewidth) | number | - | Line width. | | [lineWidth](#linewidth) | number | - | Line width. |
| [strokeStyle](#strokestyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [strokeStyle](#strokestyle) | &lt;color&gt; \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.<br/>- When the type is **&lt;color&gt;**, this attribute indicates the stroke color.<br/>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.<br/>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. |
...@@ -463,7 +463,7 @@ struct LineDashOffset { ...@@ -463,7 +463,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. |
...@@ -703,7 +703,7 @@ Fills a rectangle on the canvas. ...@@ -703,7 +703,7 @@ 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. |
...@@ -748,7 +748,7 @@ Draws an outlined rectangle on the canvas. ...@@ -748,7 +748,7 @@ 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. |
...@@ -792,7 +792,7 @@ Clears the content in a rectangle on the canvas. ...@@ -792,7 +792,7 @@ 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. |
...@@ -838,7 +838,7 @@ Draws filled text on the canvas. ...@@ -838,7 +838,7 @@ 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. |
...@@ -882,7 +882,7 @@ Draws a text stroke on the canvas. ...@@ -882,7 +882,7 @@ 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. |
...@@ -926,17 +926,17 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -926,17 +926,17 @@ 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** attributes - **TextMetrics** attributes
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | ----- | ------ | ------------------ |
| width | number | Width of the text. | | width | number | Width of the text. |
- Example - Example
...@@ -979,7 +979,7 @@ Strokes a path. ...@@ -979,7 +979,7 @@ 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
...@@ -1064,7 +1064,7 @@ Moves a drawing path to a target position on the canvas. ...@@ -1064,7 +1064,7 @@ 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. |
...@@ -1109,7 +1109,7 @@ Connects the current point to a target position using a straight line. ...@@ -1109,7 +1109,7 @@ 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. |
...@@ -1195,7 +1195,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1195,7 +1195,7 @@ 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'**. |
...@@ -1240,7 +1240,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1240,7 +1240,7 @@ Draws a cubic bezier curve on the canvas.
- Name - Name
| 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. |
...@@ -1289,7 +1289,7 @@ Draws a quadratic curve on the canvas. ...@@ -1289,7 +1289,7 @@ 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. |
...@@ -1336,7 +1336,7 @@ Draws an arc on the canvas. ...@@ -1336,7 +1336,7 @@ 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. |
...@@ -1384,7 +1384,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -1384,7 +1384,7 @@ 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. |
...@@ -1431,7 +1431,7 @@ Draws an ellipse in the specified rectangular region. ...@@ -1431,7 +1431,7 @@ Draws an ellipse in the specified rectangular region.
- 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. |
...@@ -1482,7 +1482,7 @@ Creates a rectangle. ...@@ -1482,7 +1482,7 @@ Creates a rectangle.
- 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. |
...@@ -1604,7 +1604,7 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -1604,7 +1604,7 @@ Rotates a canvas clockwise around its coordinate axes.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | --------- | ------------- | ---------------------------------------- |
| rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. | | rotate | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
- Example - Example
...@@ -1646,7 +1646,7 @@ Scales a canvas based on scale factors. ...@@ -1646,7 +1646,7 @@ Scales a 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. |
...@@ -1697,7 +1697,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1697,7 +1697,7 @@ 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 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. | | scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. | | skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. | | skewY | number | Yes | 0 | Y-axis skew. |
...@@ -1750,7 +1750,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -1750,7 +1750,7 @@ Resets the existing transformation matrix and creates a new transformation matri
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. | | scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. | | skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. | | skewY | number | Yes | 0 | Y-axis skew. |
...@@ -1800,7 +1800,7 @@ Moves the origin of the coordinate system. ...@@ -1800,7 +1800,7 @@ Moves the origin of the coordinate system.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | 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. |
...@@ -1848,7 +1848,7 @@ Draws an image. ...@@ -1848,7 +1848,7 @@ Draws an image.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap. | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap. |
| 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. |
...@@ -1899,7 +1899,7 @@ Creates an **ImageData** object based on the specified width and height. For det ...@@ -1899,7 +1899,7 @@ Creates an **ImageData** object based on the specified width and height. For det
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | --------- | ------------- | ----------------------------------- |
| width | number | Yes | 0 | Width of the **ImageData** object. | | width | number | Yes | 0 | Width of the **ImageData** object. |
| height | number | Yes | 0 | Height of the **ImageData** object. | | height | number | Yes | 0 | Height of the **ImageData** object. |
...@@ -1912,7 +1912,7 @@ Creates an **ImageData** object by copying an existing **ImageData** object. For ...@@ -1912,7 +1912,7 @@ Creates an **ImageData** object by copying an existing **ImageData** object. For
- 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. |
...@@ -1924,7 +1924,7 @@ Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels i ...@@ -1924,7 +1924,7 @@ Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels i
- 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. |
...@@ -1939,7 +1939,7 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are ...@@ -1939,7 +1939,7 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | 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. |
...@@ -2061,7 +2061,7 @@ Creates a linear gradient. ...@@ -2061,7 +2061,7 @@ 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. |
...@@ -2085,9 +2085,9 @@ Creates a linear gradient. ...@@ -2085,9 +2085,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.offContext.createLinearGradient(50,0, 300,100) var grad = this.offContext.createLinearGradient(50,0, 300,100)
this.grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
...@@ -2111,7 +2111,7 @@ Creates a linear gradient. ...@@ -2111,7 +2111,7 @@ 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. |
...@@ -2137,9 +2137,9 @@ Creates a linear gradient. ...@@ -2137,9 +2137,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
this.grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
......
en/application-dev/ui/ts-basic-components-loadingprogress.md 0 → 100644
浏览文件 @ 0bb8d68f
# LoadingProgress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<LoadingProgress>** component is used to display the loading progress.
## Required Permissions
None
## Child Components
None
## APIs
LoadingProgress()
Creates a **LoadingProgress** instance.
## Attributes
| Name | Type | Default Value | Description |
| ----- | ----- | ------------- | ---------------------------------------- |
| color | Color | - | Foreground color of the loading progress bar. |
## Example
```
@Entry
@Component
struct LoadingProgressExample {
build() {
Column({ space: 5 }) {
Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
LoadingProgress()
.color(Color.Blue)
}.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或