From 134aa0203cdb1b41205e615bcbe5b8d25ff41a93 Mon Sep 17 00:00:00 2001 From: limeng Date: Sat, 27 May 2023 18:43:20 +0800 Subject: [PATCH] modify by the comments Signed-off-by: limeng --- .../figures/offscreen_canvas_height.png | Bin 0 -> 2589 bytes ...offscreen_canvas_transferToImageBitmap.png | Bin 0 -> 7358 bytes .../figures/offscreen_canvas_width.png | Bin 0 -> 2596 bytes .../arkui-ts/ts-components-offscreencanvas.md | 76 ++++++++++++------ 4 files changed, 50 insertions(+), 26 deletions(-) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas_height.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas_transferToImageBitmap.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas_width.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas_height.png b/zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas_height.png new file mode 100644 index 0000000000000000000000000000000000000000..69818ec80dd321547d5dfc97333409512f1e83d3 GIT binary patch literal 2589 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 E03Yt95C8xG literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md index a88519e059..b8ff815c0b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md @@ -1,6 +1,8 @@ # OffscreenCanvas -提供离屏画布组件，用于自定义绘制图形。 +OffscreenCanvas组件用于自定义绘制图形。 + +使用Canvas组件或Canvas API时，渲染、动画和用户交互通常发生在应用程序的主线程上。与画布动画和渲染相关的计算可能会对应用程序性能产生重大影响。OffscreenCanvas提供了一个可以在屏幕外渲染的画布，这样可以在单独的线程中运行一些任务，从而避免主线程上的繁重工作。 > **说明：** > @@ -18,10 +20,10 @@ OffscreenCanvas(width: number, height: number) **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | -------- | ---- | ------ | -------------------------- | -| width | number | 是 | 0 | 离屏画布的宽度，单位为vp。 | -| height | number | 是 | 0 | 离屏画布的高度，单位为vp。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------ | -------- | ---- | ------ | ------------------------------------- | +| width | number | 是 | 0 | OffscreenCanvas组件的宽度，单位为vp。 | +| height | number | 是 | 0 | OffscreenCanvas组件的高度，单位为vp。 | ## 属性 @@ -29,8 +31,8 @@ OffscreenCanvas(width: number, height: number) | 名称 | 类型 | 默认值 | 描述 | | ------ | ------ | ------ | ------------------------------------------------------------ | -| width | number | 0 | 离屏画布的宽度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| height | number | 0 | 离屏画布的高度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| width | number | 0 | OffscreenCanvas组件的宽度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| height | number | 0 | OffscreenCanvas组件的高度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | ### width @@ -41,7 +43,7 @@ OffscreenCanvas(width: number, height: number) struct OffscreenCanvasPage { private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300) build() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { @@ -49,9 +51,14 @@ struct OffscreenCanvasPage { Canvas(this.context) .width('100%') .height('100%') - .backgroundColor('#ffff00') + .backgroundColor('#FFFFFF') .onReady(() => { - console.log(this.offscreenCanvas.width.toString()) + var offContext = this.offCanvas.getContext("2d", this.settings) + offContext.fillStyle = '#CDCDCD' + offContext.fillRect(0, 0, offCanvas.width, 150) + var image = this.offCanvas.transferToImageBitmap() + this.context.setTransform(1, 0, 0, 1, 50, 200) + this.context.transferFromImageBitmap(image) }) } }.width('100%').height('100%') @@ -59,6 +66,8 @@ struct OffscreenCanvasPage { } ``` +![zh-cn_image_0000001194032666](figures/offscreen_canvas_width.png) + ### height ```ts @@ -68,7 +77,7 @@ struct OffscreenCanvasPage { struct OffscreenCanvasPage { private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300) build() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { @@ -76,9 +85,14 @@ struct OffscreenCanvasPage { Canvas(this.context) .width('100%') .height('100%') - .backgroundColor('#ffff00') + .backgroundColor('#FFFFFF') .onReady(() => { - console.log(this.offscreenCanvas.height.toString()) + var offContext = this.offCanvas.getContext("2d", this.settings) + offContext.fillStyle = '#CDCDCD' + offContext.fillRect(0, 0, 100, offCanvas.height) + var image = this.offCanvas.transferToImageBitmap() + this.context.setTransform(1, 0, 0, 1, 50, 200) + this.context.transferFromImageBitmap(image) }) } }.width('100%').height('100%') @@ -86,13 +100,15 @@ struct OffscreenCanvasPage { } ``` +![zh-cn_image_0000001194032666](figures/offscreen_canvas_height.png) + ## 方法 ### transferToImageBitmap transferToImageBitmap(): ImageBitmap -从离屏画布中最近渲染的图像创建一个ImageBitmap对象。 +从OffscreenCanvas组件中最近渲染的图像创建一个ImageBitmap对象。 从API version 9开始，该接口支持在ArkTS卡片中使用。 @@ -111,20 +127,25 @@ transferToImageBitmap(): ImageBitmap struct OffscreenCanvasPage { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + private offCanvas: OffscreenCanvas = new OffscreenCanvas(300, 500) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') - .backgroundColor('#ffff00') + .borderWidth(5) + .borderColor(Color.Green) + .backgroundColor('#FFFFFF') .onReady(() => { var offContext = this.offCanvas.getContext("2d", this.settings) - offContext.font = '70px sans-serif' + offContext.fillStyle = '#CDCDCD' + offContext.fillRect(0, 0, 300, 500) + offContext.fillStyle = '#000000' + offContext.font = '70px serif bold' offContext.fillText("Offscreen : Hello World!", 20, 60) - var imageData = this.offCanvas.transferToImageBitmap() - this.context.transferFromImageBitmap(imageData) + var image = this.offCanvas.transferToImageBitmap() + this.context.transferFromImageBitmap(image) }) } .width('100%') @@ -132,24 +153,27 @@ struct OffscreenCanvasPage { } } ``` + +![zh-cn_image_0000001194032666](figures/offscreen_canvas_transferToImageBitmap.png) + ### getContext10+ getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanvasRenderingContext2D -返回离屏画布的绘图上下文。 +返回OffscreenCanvas组件的绘图上下文。 **参数：** | 参数 | 类型 | 必填 | 默认值 | 说明 | | ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | -| contextType | string | 是 | "2d" | 离屏画布绘图上下文的类型。 | +| contextType | string | 是 | "2d" | OffscreenCanvas组件绘图上下文的类型。 | | option | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | - | 见[RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings)。 | **返回值：** -| 类型 | 描述 | -| ------------------------------------------------------------ | ---------------------- | -| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | 离屏画布的绘图上下文。 | +| 类型 | 描述 | +| ------------------------------------------------------------ | --------------------------------- | +| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | OffscreenCanvas组件的绘图上下文。 | **示例：** @@ -159,7 +183,7 @@ getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanva struct OffscreenCanvasExamplePage { private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 800) build() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { @@ -200,5 +224,5 @@ struct OffscreenCanvasExamplePage { } ``` - ![zh-cn_image_0000001194032666](figures/offscreen_canvas.png) +![zh-cn_image_0000001194032666](figures/offscreen_canvas.png) -- GitLab