From 1d2ab0a1ff98b21952ea8d4883fc363d57baf351 Mon Sep 17 00:00:00 2001 From: limeng Date: Fri, 12 May 2023 17:22:53 +0800 Subject: [PATCH] =?UTF-8?q?OffscreenCanvas=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: limeng --- .../arkui-ts/figures/offscreen_canvas.png | Bin 0 -> 13192 bytes .../arkui-ts/ts-components-offscreencanvas.md | 201 ++++++++++++++++++ 2 files changed, 201 insertions(+) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas.png b/zh-cn/application-dev/reference/arkui-ts/figures/offscreen_canvas.png new file mode 100644 index 0000000000000000000000000000000000000000..6408dcb81dc4e02287e5bf7b714534a4a48de12a GIT binary patch literal 13192 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 Ix({Cb7bun1rvLx| 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 new file mode 100644 index 0000000000..047a241e3f --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md @@ -0,0 +1,201 @@ +# OffscreenCanvas + +提供离屏画布组件，用于自定义绘制图形。 + +> **说明：** +> +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 子组件 + +不支持。 + +## 接口 + +OffscreenCanvas(width: number, height: number) + +从API version 9开始，该接口支持在ArkTS卡片中使用。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------ | -------- | ---- | ------ | -------------------------- | +| width | number | 是 | 0 | 离屏画布的宽度，单位为vp。 | +| height | number | 是 | 0 | 离屏画布的高度，单位为vp。 | + +## 属性 + +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 类型 | 默认值 | 描述 | +| ------ | ------ | ------ | ------------------------------------------------------------ | +| width | number | 0 | 离屏画布的宽度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| height | number | 0 | 离屏画布的高度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | + +### width + +```ts +// xxx.ets +@Entry +@Component +struct OffscreenCanvasPage { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + + build() { + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { + Column() { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + console.log(this.offscreenCanvas.width.toString()) + }) + } + }.width('100%').height('100%') + } +} +``` + +### height + +```ts +// xxx.ets +@Entry +@Component +struct OffscreenCanvasPage { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + + build() { + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { + Column() { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + console.log(this.offscreenCanvas.height.toString()) + }) + } + }.width('100%').height('100%') + } +} +``` + +## 方法 + +### transferToImageBitmap + +transferToImageBitmap(): ImageBitmap + +从离屏画布中最近渲染的图像创建一个ImageBitmap对象。 + +从API version 9开始，该接口支持在ArkTS卡片中使用。 + +**返回值：** + +| 类型 | 描述 | +| -------------------------------------------------- | ----------------------- | +| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 创建的ImageBitmap对象。 | + +**示例：** + +```ts +// xxx.ets +@Entry +@Component +struct OffscreenCanvasPage { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + var imageData = this.offCanvas.transferToImageBitmap() + this.context.transferFromImageBitmap(imageData) + }) + } + .width('100%') + .height('100%') + } +} +``` +### getContext10+ + +getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanvasRenderingContext2D + +返回离屏画布的绘图上下文。 + +**参数：** + +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | +| contextType | string | 是 | "2d" | 离屏画布绘图上下文的类型。 | +| option | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | - | 见[RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings)。 | + +**返回值：** + +| 类型 | 描述 | +| ------------------------------------------------------------ | ---------------------- | +| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | 离屏画布的绘图上下文。 | + +**示例：** + +```ts +@Entry +@Component +struct OffscreenCanvasExamplePage { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) + + build() { + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { + Column() { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#FFFFFF') + .onReady(() => { + var offContext = this.offscreenCanvas.getContext("2d", this.settings) + offContext.font = '70px sans-serif' + offContext.fillText("Offscreen : Hello World!", 20, 60) + offContext.fillStyle = "#0000ff" + offContext.fillRect(230, 350, 50, 50) + offContext.fillStyle = "#EE0077" + offContext.translate(70, 70) + offContext.fillRect(230, 350, 50, 50) + offContext.fillStyle = "#77EE0077" + offContext.translate(-70, -70) + offContext.fillStyle = "#00ffff" + offContext.rotate(45 * Math.PI / 180); + offContext.fillRect(180, 120, 50, 50); + offContext.rotate(-45 * Math.PI / 180); + offContext.beginPath() + offContext.moveTo(10, 150) + offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) + offContext.stroke() + offContext.fillStyle = '#FF00FF' + offContext.fillRect(100, 100, 60, 60) + var imageData = offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(imageData) + }) + }.width('100%').height('100%') + } + .width('100%') + .height('100%') + } +} +``` + + ![zh-cn_image_0000001194032666](figures/offscreen_canvas.png) + -- GitLab