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)
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
......@@ -26,14 +26,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| --------- | ---- | --------- | ------------- | -------------------------------- |
| antialias | bool | No | false | Whether antialiasing is enabled. |
## Attributes
| 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. |
| [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. |
......@@ -440,7 +440,7 @@ struct LineDashOffset {
### globalCompositeOperation
| Name | Description |
| -------- | -------- |
| ---------------- | ---------------------------------------- |
| 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-in | Displays the new drawing inside the existing drawing. |
......@@ -660,7 +660,7 @@ Fills a rectangle on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -702,7 +702,7 @@ Draws an outlined rectangle on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -743,7 +743,7 @@ Clears the content in a rectangle on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -786,7 +786,7 @@ Draws filled text on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| text | string | Yes | "" | Text to draw. |
| 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. |
......@@ -827,7 +827,7 @@ Draws a text stroke on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| text | string | Yes | "" | Text to draw. |
| 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. |
......@@ -868,17 +868,17 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | -------------------- |
| text | string | Yes | "" | Text to be measured. |
- Return value
| Type | Description |
| -------- | -------- |
| ----------- | ----------------------- |
| TextMetrics | **TextMetrics** object. |
- **TextMetrics** attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| ----- | ------ | ------------------ |
| width | number | Width of the text. |
- Example
......@@ -918,7 +918,7 @@ Strokes a path.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ---------------------------------------- | --------- | ------------- | -------------------------- |
| path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
- Example
......@@ -999,7 +999,7 @@ Moves a drawing path to a target position on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------------------------ |
| x | number | Yes | 0 | X-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.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------------------------ |
| x | number | Yes | 0 | X-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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| 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'**. |
......@@ -1167,7 +1167,7 @@ Draws a cubic bezier curve on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
......@@ -1214,7 +1214,7 @@ Draws a quadratic curve on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
......@@ -1258,7 +1258,7 @@ Draws an arc on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------------- | ------- | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the center point of the arc. |
| y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
| radius | number | Yes | 0 | Radius of the arc. |
......@@ -1304,7 +1304,7 @@ Draws an arc based on the radius and points on the arc.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
| x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
......@@ -1349,7 +1349,7 @@ Draws an ellipse in the specified rectangular region.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------------- | ------- | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
......@@ -1398,7 +1398,7 @@ Creates a rectangle.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -1514,7 +1514,7 @@ Rotates a canvas clockwise around its coordinate axes.
- Parameters
| 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. |
- Example
......@@ -1554,7 +1554,7 @@ Scales a canvas based on scale factors.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------------ |
| x | number | Yes | 0 | Horizontal 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-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
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: RenderingContext = new RenderingContext(this.settings)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. |
......@@ -1702,7 +1702,7 @@ Moves the origin of the coordinate system.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------- |
| x | number | Yes | 0 | X-axis translation. |
| y | number | Yes | 0 | Y-axis translation. |
......@@ -1748,7 +1748,7 @@ Draws an image.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ----------------------------------- |
| width | number | Yes | 0 | Width 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| --------- | ------ | --------- | ------------- | ---------------------------------------- |
| 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
Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ----------- | ------ | --------- | ---------------------------------- | ---------------------------------------- |
| 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. |
| dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
......@@ -1951,7 +1951,7 @@ Creates a linear gradient.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | -------------------------------- |
| x0 | number | Yes | 0 | X-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. |
......@@ -1974,9 +1974,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
this.grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green')
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
......@@ -1998,7 +1998,7 @@ Creates a linear gradient.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
this.grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green')
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad
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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------------- | --------- | ------------- | ------------------------------- |
| width | number | Yes | - | Width of the offscreen canvas. |
| height | number | Yes | - | Height of the offscreen canvas. |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | - | See RenderingContextSettings. |
......@@ -23,7 +23,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
## Attributes
| 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. |
| [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. |
......@@ -463,7 +463,7 @@ struct LineDashOffset {
### globalCompositeOperation
| Name | Description |
| -------- | -------- |
| ---------------- | ---------------------------------------- |
| 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-in | Displays the new drawing inside the existing drawing. |
......@@ -703,7 +703,7 @@ Fills a rectangle on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -748,7 +748,7 @@ Draws an outlined rectangle on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -792,7 +792,7 @@ Clears the content in a rectangle on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -838,7 +838,7 @@ Draws filled text on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| text | string | Yes | "" | Text to draw. |
| 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. |
......@@ -882,7 +882,7 @@ Draws a text stroke on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| text | string | Yes | "" | Text to draw. |
| 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. |
......@@ -926,17 +926,17 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | -------------------- |
| text | string | Yes | "" | Text to be measured. |
- Return value
| Type | Description |
| -------- | -------- |
| ----------- | ----------------------- |
| TextMetrics | **TextMetrics** object. |
- **TextMetrics** attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| ----- | ------ | ------------------ |
| width | number | Width of the text. |
- Example
......@@ -979,7 +979,7 @@ Strokes a path.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ---------------------------------------- | --------- | ------------- | -------------------------- |
| path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw. |
- Example
......@@ -1064,7 +1064,7 @@ Moves a drawing path to a target position on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------------------------ |
| x | number | Yes | 0 | X-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.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------------------------ |
| x | number | Yes | 0 | X-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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| 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'**. |
......@@ -1240,7 +1240,7 @@ Draws a cubic bezier curve on the canvas.
- Name
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
......@@ -1289,7 +1289,7 @@ Draws a quadratic curve on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
......@@ -1336,7 +1336,7 @@ Draws an arc on the canvas.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------------- | ------- | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the center point of the arc. |
| y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
| radius | number | Yes | 0 | Radius of the arc. |
......@@ -1384,7 +1384,7 @@ Draws an arc based on the radius and points on the arc.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
| x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
......@@ -1431,7 +1431,7 @@ Draws an ellipse in the specified rectangular region.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------------- | ------- | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
......@@ -1482,7 +1482,7 @@ Creates a rectangle.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ---------------------------------------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
......@@ -1604,7 +1604,7 @@ Rotates a canvas clockwise around its coordinate axes.
- Parameters
| 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. |
- Example
......@@ -1646,7 +1646,7 @@ Scales a canvas based on scale factors.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------------ |
| x | number | Yes | 0 | Horizontal 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. |
......@@ -1750,7 +1750,7 @@ Resets the existing transformation matrix and creates a new transformation matri
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | --------- | ------------- | ------------------- |
| scaleX | number | Yes | 0 | X-axis scale. |
| skewX | number | Yes | 0 | X-axis skew. |
| skewY | number | Yes | 0 | Y-axis skew. |
......@@ -1800,7 +1800,7 @@ Moves the origin of the coordinate system.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ------------------- |
| x | number | Yes | 0 | X-axis translation. |
| y | number | Yes | 0 | Y-axis translation. |
......@@ -1848,7 +1848,7 @@ Draws an image.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | --------- | ------------- | ----------------------------------- |
| width | number | Yes | 0 | Width 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| --------- | ---------------------------------------- | --------- | ------------- | ----------------------------- |
| 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ----------- | ------ | --------- | ---------------------------------- | ---------------------------------------- |
| 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. |
| dy | number | Yes | 0 | Y-axis offset of the rectangular area on the canvas. |
......@@ -2061,7 +2061,7 @@ Creates a linear gradient.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | -------------------------------- |
| x0 | number | Yes | 0 | X-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. |
......@@ -2085,9 +2085,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.offContext.createLinearGradient(50,0, 300,100)
this.grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green')
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap()
......@@ -2111,7 +2111,7 @@ Creates a linear gradient.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | --------- | ------------- | ---------------------------------------- |
| 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. |
| 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.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
this.grad.addColorStop(0.0, 'red')
this.grad.addColorStop(0.5, 'white')
this.grad.addColorStop(1.0, 'green')
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500)
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.
先完成此消息的编辑！
想要评论请 注册 或