Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 134aa020 编写于 作者: L limeng
浏览文件
操作

modify by the comments 

Signed-off-by: Nlimeng <limeng208@huawei.com>
上级 df3d3f67
显示空白变更内容
内联 并排
Showing with 50 addition and 26 deletion
zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md
浏览文件 @ 134aa020
# OffscreenCanvas # OffscreenCanvas
提供离屏画布组件，用于自定义绘制图形。 OffscreenCanvas组件用于自定义绘制图形。
使用Canvas组件或Canvas API时，渲染、动画和用户交互通常发生在应用程序的主线程上。与画布动画和渲染相关的计算可能会对应用程序性能产生重大影响。OffscreenCanvas提供了一个可以在屏幕外渲染的画布，这样可以在单独的线程中运行一些任务，从而避免主线程上的繁重工作。
> **说明：** > **说明：**
> >
...@@ -19,9 +21,9 @@ OffscreenCanvas(width: number, height: number) ...@@ -19,9 +21,9 @@ OffscreenCanvas(width: number, height: number)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | -------------------------- | | ------ | -------- | ---- | ------ | ------------------------------------- |
| width | number | 是 | 0 | 离屏画布的宽度，单位为vp。 | | width | number | 是 | 0 | OffscreenCanvas组件的宽度，单位为vp。 |
| height | number | 是 | 0 | 离屏画布的高度，单位为vp。 | | height | number | 是 | 0 | OffscreenCanvas组件的高度，单位为vp。 |
## 属性 ## 属性
...@@ -29,8 +31,8 @@ OffscreenCanvas(width: number, height: number) ...@@ -29,8 +31,8 @@ OffscreenCanvas(width: number, height: number)
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| ------ | ------ | ------ | ------------------------------------------------------------ | | ------ | ------ | ------ | ------------------------------------------------------------ |
| width | number | 0 | 离屏画布的宽度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | | width | number | 0 | OffscreenCanvas组件的宽度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| height | number | 0 | 离屏画布的高度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 | | height | number | 0 | OffscreenCanvas组件的高度，单位为vp。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
### width ### width
...@@ -41,7 +43,7 @@ OffscreenCanvas(width: number, height: number) ...@@ -41,7 +43,7 @@ OffscreenCanvas(width: number, height: number)
struct OffscreenCanvasPage { struct OffscreenCanvasPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
build() { build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
...@@ -49,9 +51,14 @@ struct OffscreenCanvasPage { ...@@ -49,9 +51,14 @@ struct OffscreenCanvasPage {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#FFFFFF')
.onReady(() => { .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%') }.width('100%').height('100%')
...@@ -59,6 +66,8 @@ struct OffscreenCanvasPage { ...@@ -59,6 +66,8 @@ struct OffscreenCanvasPage {
} }
``` ```
![zh-cn_image_0000001194032666](figures/offscreen_canvas_width.png)
### height ### height
```ts ```ts
...@@ -68,7 +77,7 @@ struct OffscreenCanvasPage { ...@@ -68,7 +77,7 @@ struct OffscreenCanvasPage {
struct OffscreenCanvasPage { struct OffscreenCanvasPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
build() { build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
...@@ -76,9 +85,14 @@ struct OffscreenCanvasPage { ...@@ -76,9 +85,14 @@ struct OffscreenCanvasPage {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#FFFFFF')
.onReady(() => { .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%') }.width('100%').height('100%')
...@@ -86,13 +100,15 @@ struct OffscreenCanvasPage { ...@@ -86,13 +100,15 @@ struct OffscreenCanvasPage {
} }
``` ```
![zh-cn_image_0000001194032666](figures/offscreen_canvas_height.png)
## 方法 ## 方法
### transferToImageBitmap ### transferToImageBitmap
transferToImageBitmap(): ImageBitmap transferToImageBitmap(): ImageBitmap
从离屏画布中最近渲染的图像创建一个ImageBitmap对象。 从OffscreenCanvas组件中最近渲染的图像创建一个ImageBitmap对象。
从API version 9开始，该接口支持在ArkTS卡片中使用。 从API version 9开始，该接口支持在ArkTS卡片中使用。
...@@ -111,20 +127,25 @@ transferToImageBitmap(): ImageBitmap ...@@ -111,20 +127,25 @@ transferToImageBitmap(): ImageBitmap
struct OffscreenCanvasPage { struct OffscreenCanvasPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) private offCanvas: OffscreenCanvas = new OffscreenCanvas(300, 500)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .borderWidth(5)
.borderColor(Color.Green)
.backgroundColor('#FFFFFF')
.onReady(() => { .onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings) 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) offContext.fillText("Offscreen : Hello World!", 20, 60)
var imageData = this.offCanvas.transferToImageBitmap() var image = this.offCanvas.transferToImageBitmap()
this.context.transferFromImageBitmap(imageData) this.context.transferFromImageBitmap(image)
}) })
} }
.width('100%') .width('100%')
...@@ -132,24 +153,27 @@ struct OffscreenCanvasPage { ...@@ -132,24 +153,27 @@ struct OffscreenCanvasPage {
} }
} }
``` ```
![zh-cn_image_0000001194032666](figures/offscreen_canvas_transferToImageBitmap.png)
### getContext<sup>10+</sup> ### getContext<sup>10+</sup>
getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanvasRenderingContext2D 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)。 | | 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 ...@@ -159,7 +183,7 @@ getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanva
struct OffscreenCanvasExamplePage { struct OffscreenCanvasExamplePage {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 800)
build() { build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
...@@ -200,5 +224,5 @@ struct OffscreenCanvasExamplePage { ...@@ -200,5 +224,5 @@ struct OffscreenCanvasExamplePage {
} }
``` ```
![zh-cn_image_0000001194032666](figures/offscreen_canvas.png) ![zh-cn_image_0000001194032666](figures/offscreen_canvas.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或