IT之家2月10日消息|arkui开发框架中canvas组件的使用

IT之家2月10日消息 , 华为技术有限公司的江英杰为大家揭晓了关于开源鸿蒙OpenHarmony3.1Beta版中的一个关键特性 , 也就是ArkUI开发框架中的canvas画布 。
据介绍 , canvas是ArkUI开发框架里的画布组件 , 常用于自定义绘制图形 。 因为其轻量、灵活、高效等优点 , 被广泛应用于UI界面开发中 。 本期 , 我们将为大家介绍ArkUI开发框架中canvas组件的使用 。
canvas介绍
1.1什么是canvas?
IT之家了解到 , 在Web浏览器中 , canvas是一个可自定义width、height的矩形画布 , 画布左上角为坐标原点 , 以像素为单位 , 水平向右为x轴 , 垂直向下为y轴 , 画布内所有元素都基于原点进行定位 。
如下图所示 , 我们可以通过标签 , 创建了一个width=1500px , height=900px的空白画布 , 我们还需要“画笔”才能绘制图形 。 canvas采用轻量的逐像素渲染机制 , 以JS为“画笔”直接控制画布像素 , 从而实现图形绘制 。
IT之家2月10日消息|arkui开发框架中canvas组件的使用
文章图片
1.2Canvas的“画笔”
canvas本身虽不具备绘制能力 , 但是提供了获取“画笔”的方法 。 开发者可通过getContext('2d')方法获取CanvasRenderingContext2D对象完成2D图像绘制 , 或通过getContext('webgl')方法获取WebGLRenderingContext对象完成3D图像绘制 。
目前 , ArkUI开发框架中的WebGL1.0及WebGL2.0标准3D图形绘制能力正在完善中 , 所以本文将着重介绍2D图像的绘制 。 如下图所示 , 是CanvasRenderingContext2D对象提供的部分2D图像绘制方法 , 丰富的绘制方法让开发者能高效地绘制出矩形、文本、图片等 。
IT之家2月10日消息|arkui开发框架中canvas组件的使用
文章图片
除此之外 , 开发者还可以通过获取OffscreenCanvasRenderingContext2D对象进行离屏绘制 , 绘制方法同上 。 当绘制的图形比较复杂时 , 频繁地删除与重绘会消耗很多性能 。
这时 , 开发者可以根据自身的需求灵活选取离屏渲染的方式 , 首先通过创建OffscreenCanvas对象作为一个缓冲区 , 然后将内容绘制在OffscreenCanvas上 , 最后再将OffscreenCanvas绘制到主画布上 , 以提高画布性能 , 确保绘图的质量 。
canvas基础绘制方法
通过上节对canvas组件的基本介绍 , 相信大家对canvas组件已经有了一定的认识 , 下面我们将为大家实际演示canvas组件在ArkUI开发框架中的使用方法 。 ArkUI开发框架参考了Web浏览器中canvas的设计 , 并在“类Web开发范式”及“声明式开发范式”两种开发范式中进行提供 , 接下来我们将分别介绍这两种开发范式中canvas的绘制方法 。
2.1类Web开发范式中canvas的绘制方法
类Web开发范式 , 使用HML标签文件进行布局搭建、CSS文件进行样式描述 , 并通过JS语言进行逻辑处理 。 目前 , JS语言的canvas绘图功能已经基本上完善 , 下面我们将通过两个示例 , 展示基于JS语言的canvas组件基础使用方法 。
2.1.1矩形填充
CanvasRenderingContext2D对象提供了fillRect(x,y,width,height)方法 , 用于绘制一个填充的矩形 。 如下图所示 , 在画布内绘制了一个黑色的填充矩形 , x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标 , width和height则设置了矩形的尺寸 。
IT之家2月10日消息|arkui开发框架中canvas组件的使用
文章图片
示例代码如下:
//创建一个width=1500px , height=900px的画布
//xxx.jsexportdefault{onShow(){constel=this.$refs.canvas;//获取2D绘制对象constctx=el.getContext('2d');//设置填充为黑色ctx.fillStyle='#000000';//设置填充矩形的坐标及尺寸ctx.fillRect(200,200,300,300);}}