diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
index e48fce335e707b6458f0ae614900568f6a7695d4..16e96202ccde812eea77f2732b3176777cefdc0d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -119,12 +119,12 @@
- 画布组件
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
- - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
- - [Lottie](ts-components-canvas-lottie.md)
- - [Path2D对象](ts-components-canvas-path2d.md)
- [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
- [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
- [ImageData对象](ts-components-canvas-imagedata.md)
+ - [OffscreenCanvasRenderingContext2D对象](ts-offscreencanvasrenderingcontext2d.md)
+ - [Path2D对象](ts-components-canvas-path2d.md)
+ - [Lottie](ts-components-canvas-lottie.md)
- 动画
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872492.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872492.png
index 5d649492978121a484c2a7a55d4548384c919149..c564bb26b539f1e48acbdb7f2aeeca8df4e4e798 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872492.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872492.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872498.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872498.png
index 801bf97495213f41c2b196b2f170af85b156dd5b..6c136313fe0c8774d1209a398d16ecc4b58c2bcd 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872498.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193872498.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032458.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032458.png
index 50726d3e461d7a5dbfec674899fee603aaf41bee..a07986a04b7477eec14c81d08e442d7b332dab83 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032458.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032458.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032462.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032462.png
index d3db21e0e3da6d8663f59b2ddabd9e50d6eb1e6a..3d93b0a0a8f5d0b527d407e450a4a13a1de991ab 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032462.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032462.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032480.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032480.png
index 5d649492978121a484c2a7a55d4548384c919149..5c0a336a56d0e5a186bd235cd25f9f5e5e7e644f 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032480.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032480.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032666.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032666.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b9bc96da366d53da784c92620a69f602f7bff14
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194032666.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192436.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192436.png
index e3b4b42aecaef72ed4a08b3566a895b3f9b12343..27556ea43f7c2ecc65b9425e243ea593f02b08ec 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192436.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192436.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192440.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192440.png
index 138e011909c2d4738f3cd9671a79ea0c37cb5b87..2a5c5649cc0716abc024aa3656924a456216a4c2 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192440.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192440.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352436.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352436.png
index 4fb651372a67eca9de3848baa6b66cac0ee9f173..00097d258d585ec8ad981703c5b265679e867133 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352436.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352436.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712471.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712471.png
index 8c06945a1790bb0a741b330fe0a9170dd2a3a92d..81710c1186a0c0448d70a443db66c09a4e46d395 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712471.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712471.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832389.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832389.png
index 2eed5759714b99dc039faab67acdfe6d67bfc6ac..5c75654b85d596a346fa5d793ca84991fe859a86 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832389.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238832389.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png
index 5da42e3e14d601745274cb62d914c6600620bb25..abc9a5667500a749dbceee88aef4caebf5d9df18 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777778.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777778.png
new file mode 100644
index 0000000000000000000000000000000000000000..19e99b9ef490fff79e64e33192c97c1a39c6edf9
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777778.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777779.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777779.png
new file mode 100644
index 0000000000000000000000000000000000000000..4558b332925757d97d70ee57182c260804629346
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777779.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777780.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777780.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b35e8e0fc4bb514584813b79e8889cfe65649a7
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777780.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777781.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777781.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e0a95f73b1aec44e6bccd6750a1c9f2815178ee
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777781.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 21fae4b0b4ccbb6642685d9193cd676aee6737d1..68b734d5452d3d56c89e599e3c8076d9df3aaf21 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1,12 +1,12 @@
# CanvasRenderingContext2D对象
+使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
+
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
-
## 接口
@@ -721,8 +721,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
@Entry
@Component
struct StrokeRect {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -765,8 +765,8 @@ clearRect(x: number, y: number, w: number, h: number): void
@Entry
@Component
struct ClearRect {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -776,8 +776,8 @@ clearRect(x: number, y: number, w: number, h: number): void
.backgroundColor('#ffffff')
.onReady(() =>{
this.context.fillStyle = 'rgb(0,0,255)'
- this.context.fillRect(0,0,500,500)
- this.context.clearRect(20,20,150,100)
+ this.context.fillRect(20,20,200,200)
+ this.context.clearRect(30,30,150,100)
})
}
.width('100%')
@@ -808,8 +808,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
@Entry
@Component
struct FillText {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -853,8 +853,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
@Entry
@Component
struct StrokeText {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -922,8 +922,8 @@ measureText(text: string): TextMetrics
@Entry
@Component
struct MeasureText {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -977,6 +977,8 @@ stroke(path?: Path2D): void
.onReady(() =>{
this.context.moveTo(25, 25)
this.context.lineTo(25, 105)
+ this.context.lineTo(75, 105)
+ this.context.lineTo(75, 25)
this.context.strokeStyle = 'rgb(0,0,255)'
this.context.stroke()
})
@@ -1439,7 +1441,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.beginPath()
- this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+ this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
this.context.stroke()
})
}
@@ -1620,11 +1622,11 @@ clip(fillRule?: CanvasFillRule): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.context.rect(0, 0, 200, 200)
+ this.context.rect(0, 0, 100, 200)
this.context.stroke()
this.context.clip()
this.context.fillStyle = "rgb(255,0,0)"
- this.context.fillRect(0, 0, 150, 150)
+ this.context.fillRect(0, 0, 200, 200)
})
}
.width('100%')
@@ -1638,7 +1640,7 @@ clip(fillRule?: CanvasFillRule): void
clip(path: Path2D, fillRule?: CanvasFillRule): void
-对封闭路径进行填充。该接口为空接口。
+设置当前路径为剪切路径
**参数:**
@@ -1648,6 +1650,38 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。 |
+**示例:**
+
+ ```ts
+ // xxx.ets
+@Entry
+@Component
+struct Clip {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ let region = new Path2D();
+ region.rect(80,10,20,130);
+ region.rect(40,50,100,50);
+ this.context.clip(region,"evenodd")
+ this.context.fillStyle = "rgb(255,0,0)"
+ this.context.fillRect(0, 0, this.context.width, this.context.height)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+ ```
+
+ 
+
### filter
@@ -1755,9 +1789,10 @@ scale(x: number, y: number): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.context.strokeRect(10, 10, 25, 25)
+ this.context.lineWidth = 3
+ this.context.strokeRect(30, 30, 50, 50)
this.context.scale(2, 2) // Scale to 200%
- this.context.strokeRect(10, 10, 25, 25)
+ this.context.strokeRect(30, 30, 50, 50)
})
}
.width('100%')
@@ -1987,7 +2022,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
createImageData(sw: number, sh: number): ImageData
-创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
+创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。
**参数：**
@@ -1997,23 +2032,21 @@ createImageData(sw: number, sh: number): ImageData
| sh | number | 是 | 0 | ImageData的高度。 |
-### createImageData
-
createImageData(imageData: ImageData): ImageData
-创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
+创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ----------------- |
-| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 复制现有的ImageData对象。 |
+| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | null | 复制现有的ImageData对象。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | -------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
+| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 |
### getPixelMap
@@ -2041,7 +2074,7 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
-以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
+以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。
**参数：**
@@ -2056,7 +2089,39 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
| 类型 | 说明 |
| ---------------------------------------- | -------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
+| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 |
+
+
+**示例：**
+
+ ```ts
+ // xxx.ets
+@Entry
+@Component
+struct GetImageData {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+ private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.drawImage(this.img,0,0,130,130);
+ var imagedata = this.context.getImageData(50,50,130,130);
+ this.context.putImageData(imagedata,150,150);
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+ ```
+
+ 
### putImageData
@@ -2065,13 +2130,13 @@ putImageData(imageData: ImageData, dx: number, dy: number): void
putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
-使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
+使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
-| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 |
+| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
@@ -2146,6 +2211,7 @@ setLineDash(segments: number[]): void
.onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
+ this.context.stroke()
})
}
.width('100%')
@@ -2169,24 +2235,34 @@ getLineDash(): number[]
| -------- | ------------------------ |
| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 |
+
**示例：**
```ts
// xxx.ets
- @Entry
- @Component
- struct GetLineDash {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+@Entry
+@Component
+struct CanvasGetLineDash {
+ @State message: string = 'Hello World'
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Row() {
+ Column() {
+ Text(this.message)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ .onClick(()=>{
+ console.error('before getlinedash clicked')
+ let res = this.context.getLineDash()
+ console.error(JSON.stringify(res))
+ })
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
- .onReady(() =>{
- var grad = this.context.createLinearGradient(50,0, 300,100)
+ .onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.stroke();
@@ -2194,10 +2270,13 @@ getLineDash(): number[]
})
}
.width('100%')
- .height('100%')
}
+ .height('100%')
}
+}
```
+
+
### imageSmoothingQuality
@@ -2224,7 +2303,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
| 参数 | 类型 | 描述 |
| ------ | ---------------------------------------- | ------------------ |
-| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
+| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
**示例：**
@@ -2232,7 +2311,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
// xxx.ets
@Entry
@Component
- struct PutImageData {
+ struct TransferFromImageBitmap {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2261,7 +2340,8 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
}
}
```
- 
+ 
+
### toDataURL
@@ -2333,7 +2413,11 @@ restore(): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.context.restore()
+ this.context.save(); // save the default state
+ this.context.fillStyle = "green";
+ this.context.fillRect(20, 20, 100, 100);
+ this.context.restore(); // restore to the default state
+ this.context.fillRect(150, 75, 100, 100);
})
}
.width('100%')
@@ -2341,6 +2425,7 @@ restore(): void
}
}
```
+ 
### save
@@ -2366,14 +2451,19 @@ save(): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.context.save()
- })
+ this.context.save(); // save the default state
+ this.context.fillStyle = "green";
+ this.context.fillRect(20, 20, 100, 100);
+ this.context.restore(); // restore to the default state
+ this.context.fillRect(150, 75, 100, 100);
+ })
}
.width('100%')
.height('100%')
}
}
```
+ 
### createLinearGradient
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
index e74488c562835c6153ba7e8127e8f27a44cdb25d..4426c3daf2394f78759f0813b4a1e3548bc71ea2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
@@ -1,9 +1,13 @@
# Canvas
-> **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
提供画布组件，用于自定义绘制图形。
+> **说明：**
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+
## 权限列表
无
@@ -34,7 +38,8 @@ Canvas(context?: CanvasRenderingContext2D)
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 |
-## 示例
+
+**示例：**
```ts
// xxx.ets
@@ -59,3 +64,4 @@ struct CanvasExample {
}
}
```
+ 
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 22b76489fe350fed7e67af969241eadb533a3487..45df677743928861d9770d41a1acdb84095d001b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -1,12 +1,12 @@
# CanvasGradient对象
+渐变对象。
+
> **说明：**
->
+>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-渐变对象。
-
## addColorStop
@@ -14,41 +14,44 @@ addColorStop(offset: number, color: string): void
设置渐变断点值，包括偏移和颜色。
+
**参数：**
-| 参数 | 类型 | 必填 | 默认值 | 描述 |
-| ------ | ------ | ---- | -------- | ---------------------------- |
-| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
-| color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------ | ------ | ---- | --------- | ---------------------------- |
+ | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
+ | color | string | 是 | '#ffffff' | 设置渐变的颜色。 |
+
**示例：**
-```ts
-@Entry
-@Component
-struct Page45 {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Canvas(this.context)
- .width('100%')
- .height('100%')
- .backgroundColor('#ffff00')
- .onReady(() =>{
- var grad = this.context.createLinearGradient(50,0, 300,100)
- 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)
- })
- }
- .width('100%')
- .height('100%')
- }
-}
-```
-
-
\ No newline at end of file
+ ```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct Page45 {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var grad = this.context.createLinearGradient(50,0, 300,100)
+ 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)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }}
+ ```
+ 
+
+
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
index e2f3f510bef985abf5c868223bf71f477219ea80..12063d494b68b2c694ec35090730d4625a81e620 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
@@ -1,11 +1,12 @@
# ImageBitmap对象
+ImageBitmap对象可以存储canvas渲染的像素数据。
+
> **说明：**
+>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-ImageBitmap对象可以存储canvas渲染的像素数据。
-
## 属性
@@ -14,6 +15,36 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
| width | number | ImageBitmap的像素宽度。 |
| height | number | ImageBitmap的像素高度。 |
+**示例：**
+
+ ```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct ImageExample {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+ private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
## 方法
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
index d1df7c7a5ec2294b75c43ee390e0cfb3ccfad0ff..00ca2d47e15d1efc2e71777f11fef69a70e1eeb7 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
@@ -1,11 +1,12 @@
# ImageData对象
+ImageData对象可以存储canvas渲染的像素数据。
+
> **说明：**
+>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-ImageData对象可以存储canvas渲染的像素数据。
-
## 属性
@@ -15,3 +16,34 @@ ImageData对象可以存储canvas渲染的像素数据。
| height | number | 矩形区域实际像素高度。 |
| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
+**示例：**
+
+ ```ts
+ // xxx.ets
+@Entry
+@Component
+struct Translate {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+ private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.drawImage(this.img,0,0,130,130);
+ var imagedata = this.context.getImageData(50,50,130,130);
+ this.context.putImageData(imagedata,150,150);
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+ ```
+
+ 
+
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
index e623316d5201d24517c2ddc507e28c4a20a5a626..749d83607076d563f7772aa8620b78653be504a5 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
@@ -1,13 +1,11 @@
# Lottie
-> **说明：**
->
-> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
+提供Lottie动画。
-## 权限列表
+> **说明：**
+>
+> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-无
## 导入模块
@@ -31,7 +29,8 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea
加载动画，须提前声明Animator('__lottie_ets')对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用，比如onAppear()与onPageShow()。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | 是 | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" |
@@ -49,13 +48,15 @@ destroy(name: string): void
销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear()与onPageHide()。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 |
-- 示例
- ```
+**示例：**
+ ```ts
+ // xxx.ets
import lottie from '@ohos/lottieETS'
@Entry
@@ -128,13 +129,15 @@ play(name: string): void
播放指定动画。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
lottie.play(this.animateName)
```
@@ -145,13 +148,15 @@ pause(name: string): void
暂停指定动画，下次调用lottie.play()从当前帧开始。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
lottie.pause(this.animateName)
```
@@ -162,13 +167,15 @@ togglePause(name: string): void
暂停或播放指定动画，等效于lottie.play()与lottie.pause()切换调用。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
lottie.togglePause(this.animateName)
```
@@ -179,13 +186,15 @@ stop(name: string): void
停止指定动画，下次调用lottie.play()从第一帧开始。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
lottie.stop(this.animateName)
```
@@ -196,14 +205,16 @@ setSpeed(speed: number, name: string): void
设置指定动画播放速度。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 |
| name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
lottie.setSpeed(5, this.animateName)
```
@@ -214,14 +225,16 @@ setDirection(direction: AnimationDirection, name: string): void
设置指定动画播放顺序。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1 |
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
lottie.setDirection(-1, this.animateName)
```
@@ -260,13 +273,15 @@ play(name?: string): void
播放动画。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | --------------- |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.play()
```
@@ -277,13 +292,15 @@ destroy(name?: string): void
销毁动画。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | --------------- |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.destroy()
```
@@ -294,13 +311,15 @@ pause(name?: string): void
暂停动画，下次调用play接口从当前帧开始播放。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | --------------- |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.pause()
```
@@ -311,13 +330,15 @@ togglePause(name?: string): void
暂停或播放动画，等效于play接口与pause接口之间轮换调用。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | --------------- |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.togglePause()
```
@@ -328,13 +349,15 @@ stop(name?: string): void
停止动画，下次调用play接口从第一帧开始播放。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------ | ---- | --------------- |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.stop()
```
@@ -345,13 +368,15 @@ setSpeed(speed: number): void
设置动画播放速度。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.setSpeed(5);
```
@@ -362,13 +387,15 @@ setDirection(direction: AnimationDirection): void
设置动画播放顺序。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.setDirection(-1)
```
@@ -379,15 +406,17 @@ goToAndStop(value: number, isFrame?: boolean): void
设置动画停止在指定帧或时间进度。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 |
| isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
// 按帧号控制
this.animateItem.goToAndStop(25, true)
// 按时间进度控制
@@ -401,15 +430,17 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
设置动画从指定帧或时间进度开始播放。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | 是 | 帧号(值大于等于0)或时间进度(ms) |
| isFrame | boolean | 是 | true：按指定帧控制， false：按指定时间控制，缺省默认false。 |
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
// 按帧号控制
this.animateItem.goToAndPlay(25, true)
// 按时间进度控制
@@ -423,14 +454,16 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
设置动画仅播放指定片段。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 |
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
-- 示例
- ```
+**示例：**
+
+ ```ts
// 指定播放片段
this.animateItem.playSegments([10, 20], false)
// 指定播放片段列表
@@ -444,13 +477,15 @@ resetSegments(forceFlag: boolean): void
重置动画播放片段，播放全帧。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.resetSegments(true)
```
@@ -461,8 +496,9 @@ resize(): void
刷新动画布局。
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.resize()
```
@@ -473,13 +509,15 @@ setSubframe(useSubFrame: boolean): void
设置属性currentFrame的精度显示浮点数。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.setSubframe(false)
```
@@ -490,13 +528,15 @@ getDuration(inFrames?: boolean): void
获取动画单次完整播放的时间(与播放速度无关)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.getDuration(true)
```
@@ -507,14 +547,16 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve
添加侦听事件, 事件完成后会触发指定回调函数。返回可删除该侦听事件的函数对象。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
| callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 |
-- 示例
- ```
+**示例：**
+
+ ```ts
private callbackItem: any = function() {
console.log("grunt loopComplete")
}
@@ -531,14 +573,16 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio
删除侦听事件。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
| callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数；缺省为空时, 删除此事件的所有回调函数。 |
-- 示例
- ```
+**示例：**
+
+ ```ts
this.animateItem.removeEventListener('loopComplete', this.animateName)
```
@@ -549,14 +593,16 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void
直接触发指定事件的所有已设置的回调函数。
-- 参数
+**参数：**
+
| 参数 | 类型 | 必填 | 描述 |
| ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | 是 | 指定动画事件类型 |
| args | any | 是 | 用户自定义回调参数 |
-- 示例
- ```
+**示例：**
+
+ ```ts
private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name)
}
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index 63004c2e78848e356e474a5ee4b38d13f6162c66..b37d56db73e7684aac0cb0c40b206f1d910d3bd6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -1,11 +1,12 @@
# Path2D对象
+路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
+
> **说明：**
+>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
-
## addPath
@@ -225,7 +226,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
.backgroundColor('#ffff00')
.onReady(() =>{
this.path2Db.moveTo(10, 10)
- this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
+ this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20)
+ this.context.stroke(this.path2Db)
})
}
.width('100%')
@@ -319,7 +321,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
+ this.path2Db.arc(100, 75, 50, 0, 6.28)
+ this.context.stroke(this.path2Db)
})
}
.width('100%')
@@ -407,7 +410,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -415,7 +418,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+ this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI*2)
this.context.stroke(this.path2Db)
})
}
@@ -461,7 +464,8 @@ rect(x: number, y: number, w: number, h: number): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
+ this.path2Db.rect(20, 20, 100, 100);
+ this.context.stroke(this.path2Db)
})
}
.width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 708ffa6e29d21b398af43a3076f273f066ea8f74..9b00417d7d7dd45aef3dc97980034b9f0d114965 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1,11 +1,12 @@
# OffscreenCanvasRenderingContext2D对象
+使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。
+
> **说明：**
-> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>
+> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。
-
## 接口
@@ -40,8 +41,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
- 默认值：true。 |
-| imageSmoothingQuality | string | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。
- 默认值：'low'。 |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
- 默认值：true。 |
>  **说明：**
>fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
@@ -572,8 +572,7 @@ struct ShadowColor {
this.offContext.shadowColor = 'rgb(0,0,255)'
this.offContext.fillStyle = 'rgb(255,0,0)'
this.offContext.fillRect(30, 30, 100, 100)
- var image = this.offContext.transferToImageBitmap
-()
+ var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
@@ -739,7 +738,7 @@ fillRect(x: number, y: number, w: number, h: number): void
}
```
- 
+ 
### strokeRect
@@ -767,6 +766,7 @@ strokeRect(x: number, y: number, w: number, h: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -785,7 +785,7 @@ strokeRect(x: number, y: number, w: number, h: number): void
}
```
- 
+ 
### clearRect
@@ -813,6 +813,7 @@ clearRect(x: number, y: number, w: number, h: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -821,8 +822,8 @@ clearRect(x: number, y: number, w: number, h: number): void
.backgroundColor('#ffff00')
.onReady(() =>{
this.offContext.fillStyle = 'rgb(0,0,255)'
- this.offContext.fillRect(0,0,500,500)
- this.offContext.clearRect(20,20,150,100)
+ this.offContext.fillRect(20,20,200,200)
+ this.offContext.clearRect(30,30,150,100)
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
@@ -833,7 +834,7 @@ clearRect(x: number, y: number, w: number, h: number): void
}
```
- 
+ 
### fillText
@@ -861,6 +862,7 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -880,7 +882,7 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
}
```
- 
+ 
### strokeText
@@ -908,6 +910,7 @@ strokeText(text: string, x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -976,6 +979,7 @@ measureText(text: string): TextMetrics
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1012,7 +1016,7 @@ stroke(path?: Path2D): void
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
**示例：**
-
+
```ts
// xxx.ets
@Entry
@@ -1021,6 +1025,7 @@ stroke(path?: Path2D): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1030,6 +1035,8 @@ stroke(path?: Path2D): void
.onReady(() =>{
this.offContext.moveTo(25, 25)
this.offContext.lineTo(25, 105)
+ this.offContext.lineTo(75, 105)
+ this.offContext.lineTo(75, 25)
this.offContext.strokeStyle = 'rgb(0,0,255)'
this.offContext.stroke()
var image = this.offContext.transferToImageBitmap()
@@ -1042,7 +1049,7 @@ stroke(path?: Path2D): void
}
```
- 
+ 
### beginPath
@@ -1061,6 +1068,7 @@ beginPath(): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1110,6 +1118,7 @@ moveTo(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1157,6 +1166,7 @@ lineTo(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1197,6 +1207,7 @@ closePath(): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1253,6 +1264,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1303,6 +1315,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1352,6 +1365,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1403,6 +1417,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1452,6 +1467,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1512,7 +1528,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
.backgroundColor('#ffff00')
.onReady(() =>{
this.offContext.beginPath()
- this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+ this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
this.offContext.stroke()
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
@@ -1524,7 +1540,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
}
```
- 
+ 
### rect
@@ -1552,6 +1568,7 @@ rect(x: number, y: number, w: number, h: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1576,11 +1593,15 @@ rect(x: number, y: number, w: number, h: number): void
### fill
-fill(): void
+fill(fillRule?: CanvasFillRule): void
对封闭路径进行填充。
- **示例：**
+**参数:**
+
+| 参数 | 类型 | 必填 | 默认值 | 描述 |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。 |
```ts
// xxx.ets
@@ -1590,6 +1611,7 @@ fill(): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1612,12 +1634,73 @@ fill(): void
+fill(path: Path2D, fillRule?: CanvasFillRule): void
+
+对封闭路径进行填充。
+
+**参数:**
+
+| 参数 | 类型 | 必填 | 默认值 | 描述 |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| path | Path2D | 是 | | Path2D填充路径。 |
+| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。 |
+
+
+**示例:**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Fill {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ let region = new Path2D();
+ region.moveTo(30, 90);
+ region.lineTo(110, 20);
+ region.lineTo(240, 130);
+ region.lineTo(60, 130);
+ region.lineTo(190, 20);
+ region.lineTo(270, 90);
+ region.closePath();
+ // Fill path
+ this.offContext.fillStyle = 'green';
+ this.offContext.fill(region, "evenodd");
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+```
+
+ 
+
+
+
### clip
-clip(): void
+clip(fillRule?: CanvasFillRule): void
设置当前路径为剪切路径。
+**参数:**
+
+| 参数 | 类型 | 必填 | 默认值 | 描述 |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。 |
+
**示例：**
```ts
@@ -1628,6 +1711,7 @@ clip(): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1635,11 +1719,11 @@ clip(): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.offContext.rect(0, 0, 200, 200)
+ this.offContext.rect(0, 0, 100, 200)
this.offContext.stroke()
this.offContext.clip()
this.offContext.fillStyle = "rgb(255,0,0)"
- this.offContext.fillRect(0, 0, 150, 150)
+ this.offContext.fillRect(0, 0, 200, 200)
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
@@ -1650,7 +1734,90 @@ clip(): void
}
```
- 
+ 
+
+
+clip(path:Path2D, fillRule?: CanvasFillRule): void
+
+设置封闭路径为剪切路径。
+
+**参数:**
+
+| 参数 | 类型 | 必填 | 默认值 | 描述 |
+| -------- | -------------- | ---- | --------- | ---------------------------------------- |
+| path | Path2D | 是 | | Path2D剪切路径。 |
+| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。 |
+
+ **示例：**
+
+ ```ts
+ // xxx.ets
+@Entry
+@Component
+struct Clip {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ let region = new Path2D();
+ region.rect(80,10,20,130);
+ region.rect(40,50,100,50);
+ this.offContext.clip(region,"evenodd")
+ this.offContext.fillStyle = "rgb(255,0,0)"
+ this.offContext.fillRect(0, 0, 600, 600)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+ ```
+
+ 
+
+
+
+### filter
+
+filter(filter: string): void
+
+为Canvas图形设置各类滤镜效果。该接口为空接口。
+
+**参数:**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| ------ | ------ | ---- | ---- | ------------ |
+| filter | string | 是 | - | 接受各类滤镜效果的函数。 |
+
+
+### getTransform
+
+getTransform(): Matrix2D
+
+获取当前被应用到上下文的转换矩阵。该接口为空接口。
+
+
+### resetTransform
+
+resetTransform(): void
+
+使用单位矩阵重新设置当前变形。该接口为空接口。
+
+
+### direction
+
+direction(direction: CanvasDirection): void
+
+绘制文本时，描述当前文本方向的属性。该接口为空接口。
### rotate
@@ -1675,6 +1842,7 @@ rotate(angle: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1720,6 +1888,7 @@ scale(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1727,9 +1896,10 @@ scale(x: number, y: number): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.offContext.strokeRect(10, 10, 25, 25)
+ this.offContext.lineWidth = 3
+ this.offContext.strokeRect(30, 30, 50, 50)
this.offContext.scale(2, 2) // Scale to 200%
- this.offContext.strokeRect(10, 10, 25, 25)
+ this.offContext.strokeRect(30, 30, 50, 50)
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
@@ -1740,7 +1910,7 @@ scale(x: number, y: number): void
}
```
- 
+ 
### transform
@@ -1777,6 +1947,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1832,6 +2003,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1880,6 +2052,7 @@ translate(x: number, y: number): void
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1934,7 +2107,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
// xxx.ets
@Entry
@Component
- struct Index {
+ struct DrawImage {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
@@ -1964,7 +2137,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
createImageData(sw: number, sh: number): ImageData
-根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
+根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。
**参数：**
@@ -1974,23 +2147,21 @@ createImageData(sw: number, sh: number): ImageData
| sh | number | 是 | 0 | ImageData的高度。 |
-### createImageData
-
createImageData(imageData: ImageData): ImageData
-根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
+根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- |
-| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 |
+| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | null | 被复制的ImageData对象。 |
**返回值：**
-| 类型 | 说明 |
-| ---------- | ---------------------------------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
+| 类型 | 说明 |
+| ---------------------------------------- | ------------- |
+| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 |
### getPixelMap
@@ -2018,7 +2189,7 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
-以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
+以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。
**参数：**
@@ -2031,9 +2202,44 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
**返回值：**
-| 类型 | 说明 |
-| ---------- | ---------------------------------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
+| 类型 | 说明 |
+| ---------------------------------------- | ------------- |
+| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 |
+
+
+**示例：**
+
+ ```ts
+ // xxx.ets
+@Entry
+@Component
+struct GetImageData {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.drawImage(this.img,0,0,130,130);
+ var imagedata = this.offContext.getImageData(50,50,130,130);
+ this.offContext.putImageData(imagedata,150,150);
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+ ```
+
+ 
### putImageData
@@ -2042,7 +2248,7 @@ putImageData(imageData: Object, dx: number, dy: number): void
putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void
-使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
+使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。
**参数：**
@@ -2153,21 +2359,29 @@ getLineDash(): number[]
```ts
// xxx.ets
- @Entry
- @Component
- struct GetLineDash {
+@Entry
+@Component
+struct OffscreenCanvasGetLineDash {
+ @State message: string = 'Hello World'
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ build() {
+ Row() {
+ Column() {
+ Text(this.message)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ .onClick(()=>{
+ console.error('before getlinedash clicked')
+ let res = this.offContext.getLineDash()
+ console.error(JSON.stringify(res))
+ })
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
- .onReady(() =>{
- var grad = this.context.createLinearGradient(50,0, 300,100)
+ .onReady(() => {
this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20])
this.offContext.stroke();
@@ -2177,53 +2391,14 @@ getLineDash(): number[]
})
}
.width('100%')
- .height('100%')
}
+ .height('100%')
}
+}
```
+
-### transferFromImageBitmap
-
-transferFromImageBitmap(bitmap: ImageBitmap): void
-
-显示给定的ImageBitmap对象。
-
-**参数：**
-
-| 参数 | 类型 | 描述 |
-| ------ | ----------- | ------------------ |
-| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
-
-**示例：**
-
- ```ts
- // xxx.ets
- @Entry
- @Component
- struct GetLineDash {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
- private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Canvas(this.context)
- .width('100%')
- .height('100%')
- .backgroundColor('#ffff00')
- .onReady(() =>{
- this.offContext.fillRect(0, 0, 200, 200)
- var image = this.offContext.transferToImageBitmap()
- this.context.transferFromImageBitmap(image)
- })
- }
- .width('100%')
- .height('100%')
- }
- }
- ```
- 
### toDataURL
@@ -2247,7 +2422,7 @@ toDataURL(type?: string, quality?: number): string
**示例：**
```ts
- // xxx.ets
+// xxx.ets
@Entry
@Component
struct ToDataURL {
@@ -2272,6 +2447,19 @@ struct ToDataURL {
```
+### imageSmoothingQuality
+
+imageSmoothingQuality(quality: imageSmoothingQuality)
+
+用于设置图像平滑度。该接口为空接口。
+
+ **参数：**
+
+| 参数 | 类型 | 描述 |
+| ------- | --------------------- | ---------------------------------------- |
+| quality | imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 |
+
+
### transferToImageBitmap
transferToImageBitmap(): ImageBitmap
@@ -2282,7 +2470,7 @@ transferToImageBitmap(): ImageBitmap
| 类型 | 说明 |
| ---------------------------------------- | --------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md)| 存储离屏画布上渲染的像素数据。 |
+| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
**示例：**
@@ -2291,10 +2479,11 @@ transferToImageBitmap(): ImageBitmap
// xxx.ets
@Entry
@Component
- struct CanvasExample {
+ struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -2302,7 +2491,14 @@ transferToImageBitmap(): ImageBitmap
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.offContext.restore()
+ var imageData = this.offContext.createImageData(100, 100)
+ for (var i = 0; i < imageData.data.length; i += 4) {
+ imageData.data[i + 0] = 255
+ imageData.data[i + 1] = 0
+ imageData.data[i + 2] = 255
+ imageData.data[i + 3] = 255
+ }
+ this.offContext.putImageData(imageData, 10, 10)
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
@@ -2312,6 +2508,7 @@ transferToImageBitmap(): ImageBitmap
}
}
```
+
### restore
@@ -2323,29 +2520,35 @@ restore(): void
```ts
// xxx.ets
- @Entry
- @Component
- struct CanvasExample {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
- private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Canvas(this.context)
- .width('100%')
- .height('100%')
- .backgroundColor('#ffff00')
- .onReady(() =>{
- this.offContext.restore()
- var image = this.offContext.transferToImageBitmap()
- this.context.transferFromImageBitmap(image)
- })
- }
- .width('100%')
- .height('100%')
+@Entry
+@Component
+struct CanvasExample {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.save(); // save the default state
+ this.offContext.fillStyle = "green";
+ this.offContext.fillRect(20, 20, 100, 100);
+ this.offContext.restore(); // restore to the default state
+ this.offContext.fillRect(150, 75, 100, 100);
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
}
+ .width('100%')
+ .height('100%')
}
+}
```
+
### save
@@ -2358,29 +2561,35 @@ save(): void
```ts
// xxx.ets
- @Entry
- @Component
- struct CanvasExample {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
- private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Canvas(this.context)
- .width('100%')
- .height('100%')
- .backgroundColor('#ffff00')
- .onReady(() =>{
- this.offContext.save()
- var image = this.offContext.transferToImageBitmap()
- this.context.transferFromImageBitmap(image)
+@Entry
+@Component
+struct CanvasExample {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.save(); // save the default state
+ this.offContext.fillStyle = "green";
+ this.offContext.fillRect(20, 20, 100, 100);
+ this.offContext.restore(); // restore to the default state
+ this.offContext.fillRect(150, 75, 100, 100);
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
})
- }
- .width('100%')
- .height('100%')
}
+ .width('100%')
+ .height('100%')
}
+}
```
+
### createLinearGradient