简介
[Canvas]画布组件是用来显示自绘内容的组件，它具有保留历史绘制内容、增量绘制的特点。Canvas有[CanvasRenderingContext2D]/[OffscreenCanvasRenderingContext2D]和[DrawingRenderingContext]两套API，应用使用两套绘制API绘制的内容都可以在绑定的Canvas组件上显示。其中CanvasRenderingContext2D按照W3C标准封装了Native Drawing接口，可以方便快速复用Web应用的绘制逻辑，因此非常适用于Web应用和游戏、快速原型设计、数据可视化、在线绘图板、教学工具或创意应用等场景。
为了遵循W3C标准，实现过程中进行了多层的封装，涉及一些数据结构的转换，不如原生API那样接近硬件，因此对于性能要求比较高绘制比较复杂或者硬件依赖性比较强的场景如高性能游戏开发、专业图形处理软件、桌面或移动应用等，使用Canvas CanvasRenderingContext2D绘制会存在一定的卡顿、掉帧等性能问题，此时可以直接使用Native Drawing接口自绘制替代Canvas CanvasRenderingContext2D绘制来提升绘制性能。
| 方案 | 适用场景 | 特点 |
|---|---|---|
| 使用Canvas CanvasRenderingContext2D | Web应用和游戏、快速原型设计、数据可视化、在线绘图板、教学工具、创意应用 | 场景简单、跨平台、快捷灵活、兼容性强、开发维护成本低、性能要求低。 |
| 使用Native Drawing | 高性能游戏开发、专业图形处理软件、桌面或移动应用开发 | 场景复杂、资源管理精细、硬件依赖强、与平台深度集成、定制化、性能要求高。 |
原理机制
由于Canvas CanvasRenderingContext2D绘制本质上是对Native Drawing接口的封装，相对于直接使用Native Drawing接口，Canvas CanvasRenderingContext2D在实现过程中进行了多层的封装，涉及一些数据结构的转换。如果图片绘制比较复杂，执行的绘制指令可能会成倍数的增长，进而绘制性能下降的更加严重，导致卡顿、掉帧等问题。下面以实现在背景图上绘制1000个透明空心圆的玻璃效果来对比两者的性能差异。
场景示例
下图是一个绘制1000个透明空心圆与背景图融合的绘制场景，下面分别使用Canvas CanvasRenderingContext2D和Native侧的Drawing来实现该场景，并分析两者的性能差异。
使用Canvas CanvasRenderingContext2D绘制
Canvas CanvasRenderingContext2D使用[globalCompositeOperation]属性来实现各种图层混合模式，此处将该属性的值设置为destination-out来实现透明空心圆。具体实现步骤如下：
- 使用自定义组件GlassCoverView来实现透明圆圈。在首页点击"Begin Draw"按钮，随机生成1000个0-1的位置列表。
// entry\src\main\ets\pages\Index.ets
import GlassCoverView from '../view/GlassCoverView';
@Entry
@Component
struct Index {
@State pointsToDraw: number[][] = [];
/**
* 随机生成1000个0-1的位置列表，在对应的位置上绘制圆圈
*/
startDraw(): void {
this.pointsToDraw = [];
for (let index = 0; index < 1000; index++) {
this.pointsToDraw.push([Math.random(), Math.random()]);
}
}
build() {
Stack() {
Image($r('app.media.drawImage'))
.width('100%')
.height('100%')
// 透明圆圈自定义组件，在此组件中绘制1000个透明圆圈
GlassCoverView({ pointsToDraw: this.pointsToDraw })
.width('100%')
.height('100%')
Row() {
Button('Begin Draw')
.width('100%')
.height(40)
}
.padding({
right: 16,
bottom: 16,
left: 16
})
.onClick(() => {
this.startDraw();
})
}
.alignContent(Alignment.Bottom)
.width('100%')
.height('100%')
}
}
- GlassCoverView子页面使用@Watch装饰器，监控到首页位置列表数据pointsToDraw更新后，在页面上绘制1000个透明空心圆圈（具体参见 onDraw()方法）。
// entry\src\main\ets\view\GlassCoverView.ets
import { hiTraceMeter } from '@kit.PerformanceAnalysisKit';
/**
* 玻璃蒙层效果
*/
@Preview
@Component
export default struct GlassCoverView {
@Prop @Watch('onDraw') pointsToDraw: number[][] = [];
private settings = new RenderingContextSettings(true);
private renderContext = new CanvasRenderingContext2D(this.settings);
private viewWidth: number = 0;
private viewHeight: number = 0;
build() {
Stack() {
Canvas(this.renderContext)
.width('100%')
.height('100%')
.onAreaChange((_: Area, newValue: Area) => {
this.handleAreaChange(newValue);
})
}
.height('100%')
.width('100%')
}
private handleAreaChange(area: Area): void {
this.viewWidth = parseInt(area.width.toString());
this.viewHeight = parseInt(area.height.toString());
this.onDraw();
}
private onDraw(): void {
const canvas = this.renderContext;
if (canvas === undefined) {
return;
}
// 空心透明圆圈，速度非常慢
hiTraceMeter.startTrace('slow', 1);
console.info('debug: slow start');
// 保存绘图上下文
canvas.save();
// 清空给定矩形内的指定像素
canvas.clearRect(0, 0, this.viewWidth, this.viewHeight);
// 指定绘制的填充色
canvas.fillStyle = '#77CCCCCC';
// 填充一个矩形
canvas.fillRect(0, 0, this.viewWidth, this.viewHeight);
// 绘制空心圆圈
canvas.globalCompositeOperation = 'destination-out';
canvas.fillStyle = '#CCCCCC';
this.pointsToDraw.forEach((xy: number[]) => {
this.drawOneCell(canvas, xy[0] * this.viewWidth, xy[1] * this.viewHeight, 5);
})
// 对保存的绘图上下文进行恢复
canvas.restore();
console.info('debug: slow end');
hiTraceMeter.finishTrace('slow', 1);
}
/**
* 根据指定的位置及宽度绘制圆
*/
private drawOneCell(canvas: CanvasRenderer, x: number, y: number, width: number): void {
canvas.beginPath();
canvas.arc(x, y, width, 0, Math.PI * 2);
canvas.closePath();
canvas.fill();
}
}
使用Canvas CanvasRenderingContext2D绘制的trace图，可以看到绘制1000个圆圈耗时34.1毫秒，有卡顿的情况。
使用Native侧Drawing绘制
Native Drawing主要使用分层接口[OH_Drawing_CanvasSaveLayer]和融合接口[OH_Drawing_BrushSetBlendMode]来实现多图融合效果。通过在前端创建一个自绘制节点[RenderNode]，并将图形绘制上下文及背景图参数通过Native侧暴露的接口传入，由Native使用相应Drawing接口进行绘制。具体实现步骤如下：
- 前端定义一个[RenderNode]自绘制渲染节点，将背景图this.pMap及图形绘制上下文context传入Native，调用Native侧的nativeOnDraw接口进行绘制。
// entry\src\main\ets\pages\Index.ets
// 定义一个RenderNode自绘制渲染节点MyRenderNode，以便使用Native的接口进行绘制
class MyRenderNode extends RenderNode {
private drawType: DrawType = DrawType.NONE;
private pMap: image.PixelMap | undefined = undefined; // 背景图
draw(context: DrawContext): void {
// 调用Native侧的nativeOnDraw接口进行绘制，将背景图 this.pMap 和图形绘制上下文 context 作为参数传入
testNapi.nativeOnDraw(666, context, vp2px(this.size.width), vp2px(this.size.height), this.drawType, this.pMap);
}
// 设置绘制类型
resetType(type: DrawType): void {
this.drawType = type;
}
// 设置背景图
setPixelMap(p: PixelMap): void {
this.pMap = p;
}
}
新建一个自绘制渲染节点，并定义一个[NodeController]，对该节点进行管理。
// entry\src\main\ets\pages\Index.ets
// 创建一个 MyRenderNode 对象
const newNode = new MyRenderNode();
// 定义 newNode 的大小和位置
newNode.frame = {
x: 0,
y: 0,
width: 980,
height: 1280
};
// 将MyRenderNode对象节点挂载到NodeContainer上
class MyNodeController extends NodeController {
private rootNode: FrameNode | null = null;
makeNode(uiContext: UIContext): FrameNode | null {
this.rootNode = new FrameNode(uiContext);
if (this.rootNode === null) {
return null;
}
const renderNode = this.rootNode.getRenderNode();
if (renderNode !== null) {
renderNode.appendChild(newNode);
}
return this.rootNode;
}
}
- 在页面中将自绘制节点挂载到[NodeContainer]上。
// entry\src\main\ets\pages\Index.ets
@Entry
@Component
struct Index {
private myNodeController: MyNodeController = new MyNodeController();
aboutToAppear(): void {
const context: Context = getContext(this);
const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
resourceMgr.getRawFileContent('drawImage.jpg').then((fileData: Uint8Array) => {
console.info('success in getRawFileContent');
const buffer = fileData.buffer.slice(0);
const imageSource: image.ImageSource = image.createImageSource(buffer);
imageSource.createPixelMap().then((pMap: image.PixelMap) => {
// 自绘制渲染节点背景图
newNode.setPixelMap(pMap);
}).catch((err: BusinessError) => {
console.error(`fail to create PixelMap, err: ${err}`);
}).catch((err: BusinessError) => {
console.error(`fail to getRawFileContent, err: ${err}`);
})
})
}
build() {
Stack() {
// 将自绘制渲染节点挂载到 NodeContainer
NodeContainer(this.myNodeController)
.height('100%')
Row() {
Button('Begin Draw')
.width('100%')
.height(40)
.onClick(() => {
newNode.resetType(DrawType.IMAGE);
newNode.invalidate();
})
}
.padding({
right: 16,
bottom: 16,
left: 16
})
}
.alignContent(Alignment.Bottom)
.width('100%')
.height('100%')
}
}
- Native侧暴露绘制接口nativeOnDraw供前端调用，该接口绑定Native侧的OnDraw函数，ArkTS传入的参数在该函数中处理。
// entry\src\main\cpp\native_bridge.cpp
EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports) {
napi_property_descriptor desc[] = {
// 暴露 nativeOnDraw 接口供前端调用，绑定 Native 侧的 OnDraw 函数
{"nativeOnDraw", nullptr, OnDraw, nullptr, nullptr, nullptr, napi_default, nullptr}};
napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
return exports;
}
EXTERN_C_END
- 在OnDraw函数中接收前端传入的参数，主要是图形绘制上下文与背景图。
// entry\src\main\cpp\native_bridge.cpp
static napi_value OnDraw(napi_env env, napi_callback_info info) {
size_t argc = 6;
napi_value args[6] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
int32_t id;
napi_get_value_int32(env, args[0], &id);
// 图形绘制上下文参数
void *temp = nullptr;
napi_unwrap(env, args[1], &temp);
OH_Drawing_Canvas *canvas = reinterpret_cast<OH_Drawing_Canvas *>(temp);
int32_t width;
napi_get_value_int32(env, args[2], &width);
int32_t height;
napi_get_value_int32(env, args[3], &height);
DRAWING_LOGI("OnDraw, width:%{public}d, helght:%{public}d", width, height);
int32_t drawOption;
napi_get_value_int32(env, args[4], &drawOption);
// 背景图参数
NativePixelMap *nativePixelMap = OH_PixelMap_InitNativePixelMap(env, args[5]);
if (drawOption == IMAGE) {
// 调用融合绘图接口进行绘制
NativeOnDrawPixelMap(canvas, nativePixelMap);
}
return nullptr;
}
- 在NativeOnDrawPixelMap函数中实现透明圆圈绘制（主要使用[OH_Drawing_CanvasSaveLayer]分层接口及 [OH_Drawing_BrushSetBlendMode]融合接口得到图形融合效果）。
// entry\src\main\cpp\native_bridge.cpp
enum DrawType { NONE, PATH, TEXT, IMAGE };
#define DRAW_MAX_NUM 1000 // 最大绘制圆圈数量
// 生成随机坐标
static int RangedRand(int range_min, int range_max) {
int r = ((double)rand() / RAND_MAX) * (range_max - range_min) + range_min;
return r;
}
// 空心圆圈与背景图融合场景绘制
static void NativeOnDrawPixelMap(OH_Drawing_Canvas *canvas, NativePixelMap *nativeMap) {
// 画背景图
OH_Drawing_CanvasSave(canvas);
OH_Drawing_PixelMap *pixelMap = OH_Drawing_PixelMapGetFromNativePixelMap(nativeMap);
// 创建采样选项对象
OH_Drawing_SamplingOptions *sampling = OH_Drawing_SamplingOptionsCreate(FILTER_MODE_NEAREST, MIPMAP_MODE_NONE);
// 获取背景图绘制区域
OH_Drawing_Rect *src = OH_Drawing_RectCreate(0, 0, 360, 693);
// 创建渲染区域
OH_Drawing_Rect *dst = OH_Drawing_RectCreate(0, 0, 1300, 2800);
// 创建画刷
OH_Drawing_Brush *brush = OH_Drawing_BrushCreate();
OH_Drawing_CanvasAttachBrush(canvas, brush);
// 将背景图渲染到画布指定区域
OH_Drawing_CanvasDrawPixelMapRect(canvas, pixelMap, src, dst, sampling);
OH_Drawing_CanvasDetachBrush(canvas);
// 调用分层接口
OH_Drawing_CanvasSaveLayer(canvas, dst, brush);
// 画蒙层
OH_Drawing_Rect *rect2 = OH_Drawing_RectCreate(0, 0, 1300, 2800);
OH_Drawing_Brush *brush2 = OH_Drawing_BrushCreate();
// 设置画刷颜色
OH_Drawing_BrushSetColor(brush2, OH_Drawing_ColorSetArgb(0x77, 0xCC, 0xCC, 0xCC));
OH_Drawing_CanvasAttachBrush(canvas, brush2);
OH_Drawing_CanvasDrawRect(canvas, rect2);
OH_Drawing_CanvasDetachBrush(canvas);
OH_Drawing_Point *pointArray[DRAW_MAX_NUM];
int x = 0;
int y = 0;
for (int i = 0; i < DRAW_MAX_NUM; i++) {
// 生成随机坐标
x = RangedRand(0, 1300);
y = RangedRand(0, 2800);
pointArray[i] = OH_Drawing_PointCreate(x, y);
}
OH_Drawing_Point *point = OH_Drawing_PointCreate(800, 1750);
OH_Drawing_Brush *brush3 = OH_Drawing_BrushCreate();
// 设置圆圈的画刷和混合模式
OH_Drawing_BrushSetBlendMode(brush3, BLEND_MODE_DST_OUT);
OH_Drawing_CanvasAttachBrush(canvas, brush3);
// 画圈
for (int i = 0; i < DRAW_MAX_NUM; i++) {
OH_Drawing_CanvasDrawCircle(canvas, pointArray[i], 15);
}
// 销毁对象
OH_Drawing_CanvasDetachBrush(canvas);
OH_Drawing_RectDestroy(rect2);
OH_Drawing_BrushDestroy(brush2);
OH_Drawing_BrushDestroy(brush3);
OH_Drawing_PointDestroy(point);
OH_Drawing_BrushDestroy(brush);
OH_Drawing_CanvasRestore(canvas);
OH_Drawing_SamplingOptionsDestroy(sampling);
OH_Drawing_RectDestroy(src);
OH_Drawing_RectDestroy(dst);
}
使用Native侧Drawing绘制trace图，可以看到绘制1000个圆圈耗时1.2毫秒，相较于Canvas CanvasRenderingContext2D绘制有较大的性能提升。
效果对比
| 方案 | 圆圈数量 | 耗时 |
|---|---|---|
| Canvas CanvasRenderingContext2D 画透明圈 | 1000 | 34.1毫秒 |
| Native Drawing画透明圈 | 1000 | 1.2毫秒 |
通过上述对比可以发现，在实现较大数量透明空心圆这样的复杂的绘制场景，相比于Canvas CanvasRenderingContext2D，使用Native [Drawing]可以得到明显的性能提升。以上只是实现透明空心圆融合场景，针对实心圆及其他融合场景（如[globalCompositeOperation]属性的其他值），由于实现机制的不同，绘制指令数量也存在差异，从而性能数据会存在一些差异。实际应用中，可以根据实际情况，在对性能要求不高的情况采用Canvas CanvasRenderingContext2D，如果对性能要求比较高，建议使用Native [Drawing]进行绘制。
扫一扫
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
