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 51c100cadd33b3f00b64fc5dfb44d3c8f23e9643..2907244d82939bd71832292cd30d960e260c2bcc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -132,12 +132,12 @@ - 画布组件 - [Canvas](ts-components-canvas-canvas.md) - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) - - [OffscreenCanvasRenderingContext2D对象](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 eb03ebe25132eb551b633d052cdfc984eda432ee..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 a7d649f25f4546fcc44d145429b7a0f25f2ac07e..de1aaccb15c26e4ff9f7c225b22f4af295f3cfc2 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组件上进行绘制，绘制对象可以是矩形、文本、图片等。 - ## 接口 @@ -723,6 +723,7 @@ strokeRect(x: number, y: number, w: number, h: number): void struct StrokeRect { 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) @@ -766,6 +767,7 @@ clearRect(x: number, y: number, w: number, h: number): void struct ClearRect { 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) @@ -774,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%') @@ -811,6 +813,7 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void struct FillText { 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) @@ -855,6 +858,7 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void struct StrokeText { 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) @@ -923,6 +927,7 @@ measureText(text: string): TextMetrics struct MeasureText { 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) @@ -975,6 +980,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() }) @@ -1437,7 +1444,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() }) } @@ -1618,11 +1625,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%') @@ -1636,7 +1643,7 @@ clip(fillRule?: CanvasFillRule): void clip(path: Path2D, fillRule?: CanvasFillRule): void -对封闭路径进行填充。该接口为空接口。 +设置当前路径为剪切路径 **参数:** @@ -1646,6 +1653,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%') + } +} + ``` + + ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png) + ### filter @@ -1753,9 +1792,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%') @@ -1985,7 +2025,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)。 **参数：** @@ -1995,23 +2035,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 @@ -2039,7 +2077,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)对象。 **参数：** @@ -2054,7 +2092,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%') + } +} + ``` + + ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png) ### putImageData @@ -2063,13 +2133,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轴偏移量。 | @@ -2144,6 +2214,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%') @@ -2167,24 +2238,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(); @@ -2192,10 +2273,13 @@ getLineDash(): number[] }) } .width('100%') - .height('100%') } + .height('100%') } +} ``` +![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) + ### imageSmoothingQuality @@ -2222,7 +2306,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void | 参数 | 类型 | 描述 | | ------ | ---------------------------------------- | ------------------ | -| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 | +| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 | **示例：** @@ -2230,7 +2314,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) @@ -2259,7 +2343,8 @@ transferFromImageBitmap(bitmap: ImageBitmap): void } } ``` - ![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png) + ![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png) + ### toDataURL @@ -2330,7 +2415,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%') @@ -2338,6 +2427,7 @@ restore(): void } } ``` + ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) ### save @@ -2363,14 +2453,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%') } } ``` + ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) ### 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 1df79983e2e4560e438b22fe63e65952917e5fe8..31292d537a353c66d52b0609e99bc301cdde79e4 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) | 无 | Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。 | -## 示例 + +**示例：** ```ts // xxx.ets @@ -59,3 +64,4 @@ struct CanvasExample { } } ``` + ![zh-cn_image_0000001194032666](figures/zh-cn_image_0000001194032666.png) \ 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 df4ed8fcbe5e254392cfaeb77d38167b2d9c1dd9..191b9ffab8e744a75626d610f1ade17d89d61025 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,11 +1,12 @@ # CanvasGradient对象 +渐变对象。 + > **说明：** +> > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -渐变对象。 - ## addColorStop @@ -13,13 +14,16 @@ addColorStop(offset: number, color: string): void 设置渐变断点值，包括偏移和颜色。 -- 参数 + +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | --------- | ---------------------------- | | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | | color | string | 是 | '#ffffff' | 设置渐变的颜色。 | -- 示例 + +**示例：** ```ts // xxx.ets @@ -48,10 +52,6 @@ addColorStop(offset: number, color: string): void .height('100%') }} ``` - - - - ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png) \ No newline at end of file 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%') + } + } + ``` + + ![zh-cn_image_0000001194352442](figures/zh-cn_image_0000001194352442.png) + + ## 方法 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%') + } +} + ``` + + ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png) + 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 7db2042a6b73a48a5b80283dc533a83a9d3f20b9..c7e75844c0510121776eff37d1688f11ee83f6aa 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 @@ -3,13 +3,10 @@ 提供Lottie动画。 > **说明：** +> > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - ## 导入模块 @@ -32,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" | @@ -50,12 +48,13 @@ destroy(name: string): void 销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear()与onPageHide()。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | ---------------------------------------- | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 | -- 示例 +**示例：** ```ts // xxx.ets import lottie from '@ohos/lottieETS' @@ -130,12 +129,14 @@ play(name: string): void 播放指定动画。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | ---------------------------------------- | | name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 | -- 示例 +**示例：** + ```ts lottie.play(this.animateName) ``` @@ -147,12 +148,14 @@ pause(name: string): void 暂停指定动画，下次调用lottie.play()从当前帧开始。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | ---------------------------------------- | | name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | -- 示例 +**示例：** + ```ts lottie.pause(this.animateName) ``` @@ -164,12 +167,14 @@ togglePause(name: string): void 暂停或播放指定动画，等效于lottie.play()与lottie.pause()切换调用。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | ---------------------------------------- | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | -- 示例 +**示例：** + ```ts lottie.togglePause(this.animateName) ``` @@ -181,12 +186,14 @@ stop(name: string): void 停止指定动画，下次调用lottie.play()从第一帧开始。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | ---------------------------------------- | | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | -- 示例 +**示例：** + ```ts lottie.stop(this.animateName) ``` @@ -198,13 +205,15 @@ 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) ``` @@ -216,13 +225,15 @@ 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) ``` @@ -262,12 +273,14 @@ play(name?: string): void 播放动画。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | --------------- | | name | string | 否 | 被指定的动画名，缺省默认为空。 | -- 示例 +**示例：** + ```ts this.animateItem.play() ``` @@ -279,12 +292,14 @@ destroy(name?: string): void 销毁动画。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | --------------- | | name | string | 否 | 被指定的动画名，缺省默认为空。 | -- 示例 +**示例：** + ```ts this.animateItem.destroy() ``` @@ -296,12 +311,14 @@ pause(name?: string): void 暂停动画，下次调用play接口从当前帧开始播放。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | --------------- | | name | string | 否 | 被指定的动画名，缺省默认为空。 | -- 示例 +**示例：** + ```ts this.animateItem.pause() ``` @@ -313,12 +330,14 @@ togglePause(name?: string): void 暂停或播放动画，等效于play接口与pause接口之间轮换调用。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | --------------- | | name | string | 否 | 被指定的动画名，缺省默认为空。 | -- 示例 +**示例：** + ```ts this.animateItem.togglePause() ``` @@ -330,12 +349,14 @@ stop(name?: string): void 停止动画，下次调用play接口从第一帧开始播放。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ---- | ------ | ---- | --------------- | | name | string | 否 | 被指定的动画名，缺省默认为空。 | -- 示例 +**示例：** + ```ts this.animateItem.stop() ``` @@ -347,12 +368,14 @@ setSpeed(speed: number): void 设置动画播放速度。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ----- | ------ | ---- | ---------------------------------------- | | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | -- 示例 +**示例：** + ```ts this.animateItem.setSpeed(5); ``` @@ -364,12 +387,14 @@ setDirection(direction: AnimationDirection): void 设置动画播放顺序。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | --------- | ------------------ | ---- | ---------------------------------------- | | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 | -- 示例 +**示例：** + ```ts this.animateItem.setDirection(-1) ``` @@ -381,14 +406,16 @@ goToAndStop(value: number, isFrame?: boolean): void 设置动画停止在指定帧或时间进度。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ------- | ------- | ---- | ---------------------------------------- | | value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 | | isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 | | name | string | 否 | 被指定的动画名，缺省默认为空。 | -- 示例 +**示例：** + ```ts // 按帧号控制 this.animateItem.goToAndStop(25, true) @@ -403,14 +430,16 @@ 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) @@ -425,13 +454,15 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean 设置动画仅播放指定片段。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | --------- | ---------------------------------------- | ---- | ---------------------------------------- | | segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 | | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | -- 示例 +**示例：** + ```ts // 指定播放片段 this.animateItem.playSegments([10, 20], false) @@ -446,12 +477,14 @@ resetSegments(forceFlag: boolean): void 重置动画播放片段，播放全帧。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | --------- | ------- | ---- | ------------------------------ | | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | -- 示例 +**示例：** + ```ts this.animateItem.resetSegments(true) ``` @@ -463,7 +496,8 @@ resize(): void 刷新动画布局。 -- 示例 +**示例：** + ```ts this.animateItem.resize() ``` @@ -475,12 +509,14 @@ setSubframe(useSubFrame: boolean): void 设置属性currentFrame的精度显示浮点数。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | ------------ | ------- | ---- | ---------------------------------------- | | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 | -- 示例 +**示例：** + ```ts this.animateItem.setSubframe(false) ``` @@ -492,12 +528,14 @@ getDuration(inFrames?: boolean): void 获取动画单次完整播放的时间(与播放速度无关)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 描述 | | -------- | ------- | ---- | ---------------------------------------- | | inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 | -- 示例 +**示例：** + ```ts this.animateItem.getDuration(true) ``` @@ -509,13 +547,15 @@ 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") @@ -533,13 +573,15 @@ 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) ``` @@ -551,13 +593,15 @@ 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 9a0caa9f125ab28009166ecebd0cf9d7dccc8eea..b84eef2a7be0bd0d10328d952c856d1b9dc35774 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 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。 - ## 接口 @@ -41,7 +42,6 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render | [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 | | [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 | | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
- 默认值：true。 | -| imageSmoothingQuality | string | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。
- 默认值：'low'。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 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 } ``` - ![zh-cn_image_0000001238832407](figures/zh-cn_image_0000001238832407.png) + ![zh-cn_image_0000001194192436](figures/zh-cn_image_0000001194192436.png) ### 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 } ``` - ![zh-cn_image_0000001238712441](figures/zh-cn_image_0000001238712441.png) + ![zh-cn_image_0000001194352436](figures/zh-cn_image_0000001194352436.png) ### 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 } ``` - ![zh-cn_image_0000001194192458](figures/zh-cn_image_0000001194192458.png) + ![zh-cn_image_0000001238952377](figures/zh-cn_image_0000001238952377.png) ### 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 } ``` - ![zh-cn_image_0000001194352454](figures/zh-cn_image_0000001194352454.png) + ![zh-cn_image_0000001194032458](figures/zh-cn_image_0000001194032458.png) ### 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 } ``` - ![zh-cn_image_0000001239032427](figures/zh-cn_image_0000001239032427.png) + ![zh-cn_image_0000001238832389](figures/zh-cn_image_0000001238832389.png) ### 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 } ``` - ![zh-cn_image_0000001238832411](figures/zh-cn_image_0000001238832411.png) + ![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png) ### 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 ![zh-cn_image_0000001194192462](figures/zh-cn_image_0000001194192462.png) +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%') + } +} +``` + + ![zh-cn_image_000000127777775](figures/zh-cn_image_000000127777775.png) + + + ### 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 } ``` - ![zh-cn_image_0000001194352458](figures/zh-cn_image_0000001194352458.png) + ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png) + + +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%') + } +} + ``` + + ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png) + + + +### 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 } ``` - ![zh-cn_image_0000001194032484](figures/zh-cn_image_0000001194032484.png) + ![zh-cn_image_0000001193872498](figures/zh-cn_image_0000001193872498.png) ### 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 @@ setTransform方法使用的参数和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)对象。 **参数：** @@ -2033,7 +2204,42 @@ 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%') + } +} + ``` + + ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png) ### 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%') } +} ``` +![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) -### 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%') - } - } - ``` - ![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png) ### 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 } } ``` +![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png) ### 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%') } +} ``` +![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) ### 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%') } +} ``` +![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) ### createLinearGradient