提交 f5a4d7d5 编写于 作者: E ester.zhou

Update docs (16235)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 85ea21ae
...@@ -47,7 +47,7 @@ struct Page45 { ...@@ -47,7 +47,7 @@ struct Page45 {
grad.addColorStop(0.5, '#ffffff') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 400, 400)
}) })
} }
.width('100%') .width('100%')
......
...@@ -24,29 +24,29 @@ An **ImageData** object stores pixel data rendered on a canvas. ...@@ -24,29 +24,29 @@ An **ImageData** object stores pixel data rendered on a canvas.
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130) this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130) var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150) this.context.putImageData(imagedata,150,150)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![en-us_image_000000127777780](figures/en-us_image_000000127777780.png) ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
# Path2D # Path2D
**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. **Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** or **fill** API of **Canvas**.
> **NOTE** > **NOTE**
> >
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -18,11 +18,11 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -18,11 +18,11 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| path | path2D | Yes| - | Path to be added to this path.| | path | path2D | Yes| - | Path to be added to this path.|
| transform | Matrix2D | No| null | Transformation matrix of the new path.| | transform | Matrix2D | No| null | Transformation matrix of the new path.|
**Example** **Example**
...@@ -109,10 +109,10 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -109,10 +109,10 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the target point.| | x | number | Yes| 0 | X-coordinate of the target point.|
| y | number | Yes| 0 | Y-coordinate of the target point.| | y | number | Yes| 0 | Y-coordinate of the target point.|
**Example** **Example**
...@@ -158,10 +158,10 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -158,10 +158,10 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the target point.| | x | number | Yes| 0 | X-coordinate of the target point.|
| y | number | Yes| 0 | Y-coordinate of the target point.| | y | number | Yes| 0 | Y-coordinate of the target point.|
**Example** **Example**
...@@ -208,14 +208,14 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -208,14 +208,14 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.| | cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.|
| cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.| | cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.|
| cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.| | cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.|
| cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.| | cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.|
| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| | x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| | y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
**Example** **Example**
...@@ -259,12 +259,12 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -259,12 +259,12 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.| | cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.|
| cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.| | cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.|
| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| | x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| | y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
**Example** **Example**
...@@ -308,14 +308,14 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -308,14 +308,14 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the center point of the arc.| | x | number | Yes| 0 | X-coordinate of the center point of the arc.|
| y | number | Yes| 0 | Y-coordinate of the center point of the arc.| | y | number | Yes| 0 | Y-coordinate of the center point of the arc.|
| radius | number | Yes| 0 | Radius of the arc.| | radius | number | Yes| 0 | Radius of the arc.|
| startAngle | number | Yes| 0 | Start radian of the arc.| | startAngle | number | Yes| 0 | Start radian of the arc.|
| endAngle | number | Yes| 0 | End radian of the arc.| | endAngle | number | Yes| 0 | End radian of the arc.|
| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.| | counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.|
**Example** **Example**
...@@ -358,13 +358,13 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -358,13 +358,13 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x1 | number | Yes| 0 | X-coordinate of the first point on the arc.| | x1 | number | Yes| 0 | X-coordinate of the first point on the arc.|
| y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.| | y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.|
| x2 | number | Yes| 0 | X-coordinate of the second point on the arc.| | x2 | number | Yes| 0 | X-coordinate of the second point on the arc.|
| y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.| | y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.|
| radius | number | Yes| 0 | Radius of the arc.| | radius | number | Yes| 0 | Radius of the arc.|
**Example** **Example**
...@@ -407,16 +407,16 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -407,16 +407,16 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the ellipse center.| | x | number | Yes| 0 | X-coordinate of the ellipse center.|
| y | number | Yes| 0 | Y-coordinate of the ellipse center.| | y | number | Yes| 0 | Y-coordinate of the ellipse center.|
| radiusX | number | Yes| 0 | Ellipse radius on the x-axis.| | radiusX | number | Yes| 0 | Ellipse radius on the x-axis.|
| radiusY | number | Yes| 0 | Ellipse radius on the y-axis.| | radiusY | number | Yes| 0 | Ellipse radius on the y-axis.|
| rotation | number | Yes| 0 | Rotation angle of the ellipse. The unit is radian.| | rotation | number | Yes| 0 | Rotation angle of the ellipse. The unit is radian.|
| startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.| | startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.| | endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | boolean | No| false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.| | counterclockwise | boolean | No| false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.|
**Example** **Example**
...@@ -459,12 +459,12 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -459,12 +459,12 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.| | x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.|
| y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.| | y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.|
| w | number | Yes| 0 | Width of the rectangle.| | w | number | Yes| 0 | Width of the rectangle.|
| h | number | Yes| 0 | Height of the rectangle.| | h | number | Yes| 0 | Height of the rectangle.|
**Example** **Example**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册