HarmonyOS API：画布组件

joytrian

发布于 2023-3-30 19:28

浏览

0收藏

版本：v3.1 Beta

ImageBitmap对象

更新时间: 2023-02-17 09:19

说明

从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

ImageBitmap对象由OffscreenCanvas对象的transferToImageBitmap()方法生成，存储了offscreen canvas渲染的像素数据。

属性

属性	类型	描述
width	number	ImageBitmap的像素宽度。
height	number	ImageBitmap的像素高度。

OffscreenCanvas对象

更新时间: 2023-02-17 09:19

说明

从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

可以离屏渲染的canvas对象。

属性

属性	类型	描述
width	number	offscreen canvas对象的宽度。
height	number	offscreen canvas对象的高度。

方法

getContext

getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D

获取offscreen canvas绘图上下文，返回值为2D绘制对象。

参数：

参数名	参数类型	必填	描述
contextId	string	是	仅支持 '2d'。
options	CanvasRenderingContext2DSettings	否	用于在离屏画布上进行绘制矩形、文本、图片等。

返回值：

类型	说明
OffscreenCanvasRenderingContext2D	2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。

toDataURL

toDataURL(type?: string, quality?:number):

生成一个包含图片展示的URL。

参数：

参数名	参数类型	必填	描述
type	string	否	可选参数，用于指定图像格式，默认格式为image/png。
quality	number	否	在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

返回值：

类型	说明
string	图像的URL地址。

transferToImageBitmap

transferToImageBitmap(): ImageBitmap

在离屏画布最近渲染的图像上创建一个ImageBitmap对象。

返回值：

类型	说明
ImageBitmap	存储离屏画布上渲染的像素数据。

示例

<!-- xxx.hml -->
<div>
  <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    var canvas = this.$refs.canvasId.getContext('2d');
    var offscreen = new OffscreenCanvas(500,500);
    var offscreenCanvasCtx = offscreen.getContext("2d");

    // ... some drawing for the canvas using the offscreenCanvasCtx ...

    var dataURL = offscreen.toDataURL();
    console.log(dataURL); //data:image/png;base64,xxxxxx

    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}

OffscreenCanvasRenderingContext2D对象

更新时间: 2023-02-17 09:19

说明

从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等

属性

除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性：

属性	类型	描述
filter	string	设置图像的滤镜。支持的滤镜效果如下： - blur：给图像设置高斯模糊 - brightness：给图片应用一种线性乘法，使其看起来更亮或更暗 - contrast：调整图像的对比度 - drop-shadow：给图像设置一个阴影效果 - grayscale：将图像转换为灰度图像 - hue-rotate：给图像应用色相旋转 - invert：反转输入图像 - opacity：转化图像的透明程度 - saturate：转换图像饱和度 - sepia：将图像转换为深褐色

示例：

<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
  <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

// xxx.js
export default {
  onShow(){
    var ctx = this.$refs.canvasId.getContext('2d');
    var offscreen = new OffscreenCanvas(360, 500);
    var offCanvas2 = offscreen.getContext("2d");
    var img = new Image();
    img.src = 'common/images/flower.jpg';
    offCanvas2.drawImage(img, 0, 0, 100, 100);
    offCanvas2.filter = 'blur(5px)';
    offCanvas2.drawImage(img, 100, 0, 100, 100);

    offCanvas2.filter = 'grayscale(50%)';
    offCanvas2.drawImage(img, 200, 0, 100, 100);

    offCanvas2.filter = 'hue-rotate(90deg)';
    offCanvas2.drawImage(img, 0, 100, 100, 100);

    offCanvas2.filter = 'invert(100%)';
    offCanvas2.drawImage(img, 100, 100, 100, 100);

    offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
    offCanvas2.drawImage(img, 200, 100, 100, 100);

    offCanvas2.filter = 'brightness(0.4)';
    offCanvas2.drawImage(img, 0, 200, 100, 100);

    offCanvas2.filter = 'opacity(25%)';
    offCanvas2.drawImage(img, 100, 200, 100, 100);

    offCanvas2.filter = 'saturate(30%)';
    offCanvas2.drawImage(img, 200, 200, 100, 100);

    offCanvas2.filter = 'sepia(60%)';
    offCanvas2.drawImage(img, 0, 300, 100, 100);

    offCanvas2.filter = 'contrast(200%)';
    offCanvas2.drawImage(img, 100, 300, 100, 100);
    var bitmap = offscreen.transferToImageBitmap();
    ctx.transferFromImageBitmap(bitmap);
  }
}

方法

除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法：

isPointInPath

isPointInPath(path?: Path2D, x: number, y: number): boolean

判断指定点是否在路径的区域内。

参数：

参数名	参数类型	必填	描述
path	Path2D	否	可选对象，指定用来判断的路径。若没有设置，则使用当前路径。
x	number	是	待判断点的x轴坐标。
y	number	是	待判断点的y轴坐标。

返回值：

类型	说明
boolean	指定点是否在路径的区域内。

示例：

<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

// xxx.js
export default {
  onShow(){
    var canvas = this.$refs.canvas.getContext('2d');
    var offscreen = new OffscreenCanvas(500,500);
    var offscreenCanvasCtx = offscreen.getContext("2d");

    offscreenCanvasCtx.rect(10, 10, 100, 100);
    offscreenCanvasCtx.fill();
    this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);

    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}

HarmonyOS API：画布组件-鸿蒙开发者社区

isPointInStroke

isPointInStroke(path?: Path2D, x: number, y: number): boolean

判断指定点是否在路径的边缘线上。

参数：

参数名	参数类型	必填	描述
path	Path2D	否	可选对象，指定用来判断的路径。若没有设置，则使用当前路径。
x	number	是	待判断点的x轴坐标。
y	number	是	待判断点的y轴坐标。

返回值：

类型	说明
boolean	指定点是否在路径的区域内。

示例：

<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

// xxx.js
export default {
  onShow(){
    var canvas = this.$refs.canvas.getContext('2d');
    var offscreen = new OffscreenCanvas(500,500);
    var offscreenCanvasCtx = offscreen.getContext("2d");

    offscreenCanvasCtx.rect(10, 10, 100, 100);
    offscreenCanvasCtx.stroke();
    this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);

    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}

HarmonyOS API：画布组件-鸿蒙开发者社区

resetTransform

resetTransform(): void

示例：

<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

// xxx.js
export default {
  onShow(){
   var canvas = this.$refs.canvas.getContext('2d');
   var offscreen = new OffscreenCanvas(500,500);
   var offscreenCanvasCtx = offscreen.getContext("2d");

   offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
   offscreenCanvasCtx.fillStyle = 'gray';
   offscreenCanvasCtx.fillRect(40, 40, 50, 20);
   offscreenCanvasCtx.fillRect(40, 90, 50, 20);

   // Non-skewed rectangles
   offscreenCanvasCtx.resetTransform();
   offscreenCanvasCtx.fillStyle = 'red';
   offscreenCanvasCtx.fillRect(40, 40, 50, 20);
   offscreenCanvasCtx.fillRect(40, 90, 50, 20);

   var bitmap = offscreen.transferToImageBitmap();
   canvas.transferFromImageBitmap(bitmap);
  } 
}

HarmonyOS API：画布组件-鸿蒙开发者社区