乐趣区

关于openharmony:OpenHarmony-31-Beta版本关键特性解析ArkUI开发框架canvas组件绘制实践

jiezi

作者：江英杰

canvas 是 ArkUI 开发框架里的画布组件，罕用于自定义绘制图形。因为其轻量、灵便、高效等长处，被广泛应用于 UI 界面开发中。本期，咱们将为大家介绍 ArkUI 开发框架中 canvas 组件的应用。

canvas 介绍

1.1 什么是 canvas？

在 Web 浏览器中，canvas 是一个可自定义 width、height 的矩形画布，画布左上角为坐标原点，以像素为单位，程度向右为 x 轴，垂直向下为 y 轴，画布内所有元素都基于原点进行定位。如图 1 所示，咱们通过 <canvas> 标签，创立了一个 width= 1500px，height=900px 的空白画布，咱们还须要“画笔”能力绘制图形。canvas 采纳轻量的逐像素渲染机制，以 JS 为“画笔”间接管制画布像素，从而实现图形绘制。

图 1 canvas 画布

1.2Canvas 的“画笔”

canvas 自身虽不具备绘制能力，然而提供了获取“画笔”的办法。开发者可通过 getContext(‘2d’) 办法获取 CanvasRenderingContext2D 对象实现 2D 图像绘制，或通过 getContext(‘webgl’) 办法获取 WebGLRenderingContext 对象实现 3D 图像绘制。目前，ArkUI 开发框架中的 WebGL1.0 及 WebGL2.0 规范 3D 图形绘制能力正在欠缺中，所以本文将着重介绍 2D 图像的绘制。如图 2 所示，是 CanvasRenderingContext2D 对象提供的局部 2D 图像绘制办法，丰盛的绘制办法让开发者能高效地绘制出矩形、文本、图片等。

图 2 图像绘制办法

除此之外，开发者还能够通过获取 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) 办法，用于绘制一个填充的矩形。如图 3 所示，在画布内绘制了一个彩色的填充矩形，x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角（绝对于原点）的坐标，width 和 height 则设置了矩形的尺寸。

图 3 填充的矩形

示例代码如下：

// 创立一个 width=1500px，height=900px 的画布
<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 1500px; height: 900px;"></canvas>
</div>


//xxx.js
export default {onShow() {
    const el =this.$refs.canvas;
// 获取 2D 绘制对象
    const ctx = el.getContext('2d');
// 设置填充为彩色
    ctx.fillStyle = '#000000';
// 设置填充矩形的坐标及尺寸
    ctx.fillRect(200, 200, 300, 300);
  }
}

2.1.2 缩放与暗影

CanvasRenderingContext2D 对象提供了 scale(x,y) 办法，参数 x 示意横轴方向上缩放倍数，y 示意纵轴方向上缩放的倍数，值得注意的是缩放过程中定位也会被缩放。如图 4 所示，是将上个示例中的填充矩形通过 scale(2,1.5) 缩放，并通过 shadowBlur 办法加上暗影后的成果。

图 4 缩放与增加暗影后的成果

示例代码如下：

/```
/xxx.js
export default {onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
// 设置绘制暗影的含糊级别
    ctx.shadowBlur = 80;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(0,0,0)';
    // x Scale to 200%,y Scale to 150%
    ctx.scale(2, 1.5);
    ctx.fillRect(200, 200, 300, 300);
  }
}

2.2 申明式开发范式中 canvas 的绘制办法

申明式开发范式，采纳 TS 语言并进行申明式 UI 语法扩大，从组件、动效和状态治理三个维度提供了 UI 绘制能力，目前曾经提供了 canvas 组件绘制能力，但性能仍在欠缺中。上面咱们将通过两个示例展现申明式开发范式中 canvas 组件的根底应用办法。

2.2.1 图片叠加

如图 5 所示，是三张图片叠加的成果，顶层的图片笼罩了底层的图片。通过顺次应用 drawImage(x,y, width, height) 办法设置图片坐标及尺寸，前面绘制的图片主动笼罩原来的图像，从而达到预期成果。

图 5 图片叠加

扩大的 TS 语言采纳更靠近天然语义的编程形式，让开发者能够直观地形容 UI 界面，示例代码如下：

@Entry
@Component
struct IndexCanvas1 {private settings:RenderingContextSettings = new RenderingContextSettings(true);
// 获取绘图对象
  private ctx: RenderingContext = new RenderingContext(this.settings);
// 列出所要用到的图片
  private img:ImageBitmap = new ImageBitmap("common/bg.jpg");
  build() {Column() {
      // 创立 canvas
      Canvas(this.ctx)
        .width(1500)
        .height(900)
        .border({color:"blue",width:1,})
        .backgroundColor('#ffff00')
         // 开始绘制
        .onReady(() => {this.ctx.drawImage( this.img,400,200,540,300);
          this.ctx.drawImage(this.img,500,300,540,300);
          this.ctx.drawImage(this.img,600,400,540,300);
        })
    }
    .width('100%')
    .height('100%')
  }
}

2.2.2 点击创立线性突变

如图 6 所示，是一个线性突变成果。基于 canvas 扩大了一个 Button 组件，通过点击“Click”按钮，触发 onClick() 办法，并通过调用 createLinearGradient() 办法，绘制出了一个线性渐变色。

图 6 图片上增加文字

示例代码如下：

@Entry
@Component
struct GradientExample {private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: RenderingContext = new RenderingContext(this.settings);
  private gra: CanvasGradient = new CanvasGradient();
  build() {Column({ space: 5})  {
// 创立一个画布
      Canvas(this.context)
        .width(1500)
        .height(900)
        .backgroundColor('#ffff00')
      Column() {
// 设置按钮的款式
        Button('Click').width(250).height(100).backgroundColor('#000000')
          .onClick(() => {
// 创立一个线性渐变色
            var grad = this.context.createLinearGradient(600, 200, 400, 750)
            grad.addColorStop(0.0, 'red');
            grad.addColorStop(0.5, 'white');
            grad.addColorStop(1.0, 'green');
            this.context.fillStyle = grad;
            this.context.fillRect(400, 200, 550, 550);
          })
       }.alignItems(HorizontalAlign.center)
     }
   }
 }

飞机大战小游戏绘制实际

如图 7 所示，是一款”飞机大战”小游戏，通过管制战机的挪动捣毁敌机。如何应用 ArkUI 开发框架提供的 canvas 组件轻松实现这个经典念旧的小游戏？实现思路及要害代码如下：

图 7 飞机大战小游戏

  1. 首先列出游戏所用到的图片 
private imgList:Array<string> = ["xx.png","xx.png"…];
  1. 将图片渲染到 canvas 画布上 
let img:ImageBitmap = new ImageBitmap("图片门路（如 common/images）/"+this.imgList[ 数组下标]);
this.ctx.drawImage(img,150/* x 坐标 */,  150/* y 坐标 */, 600/* 宽 */, 600/* 高 */)
  1. 绘制背景图片和战机向下挪动的成果 
this.ctx.drawImage(this.bg, 0, this.bgY);
this.ctx.drawImage(this.bg, 0, this.bgY - 480);
this.bgY++ == 480 && (this.bgY = 0);
  1. 应用 Math.round 函数随机获取敌机图片并渲染到画布上，并且扭转敌机 y 轴坐标，使它向下静止。
Efight = Math.round(Math.random()*7);
// 前七张为敌机图片。let img:ImageBitmap = new ImageBitmap("common/img"+this.imgList[Efight]);
this.ctx.drawImage(img, 0, this.Eheight + 50);// 渲染敌机
  1. 在页面每隔 120s 呈现一排子弹，之后减小或增大（x,y）轴的坐标达到子弹射出成果。
let i= 0;
setInterval(()=>{this.ctx.drawImage(this.bulImg1,image.x – 10 – (i *10) , image.x + (i *10))
  this.ctx.drawImage(this.bulimg2, this. bulImg1,image.x – (i *10) , i image.x + (i *10))
  this.ctx.drawImage(this.bulimg3, image.x + 10 + (i *10), image.x + (i *10))
i ++;
},120)
  1. 应用 onTouch 办法获取战机挪动地位，获取拖动的坐标后从新设置战机的图片坐标，使战机实现拖动成果。
.onTouch((event)=>{var offsetX = event.localX ||event.touches[0].localX;
  var offsetY = event.localY ||event.touches[0].localY;
  var w = this.heroImg[0].width,
      h = this.heroImg[0].height;
  var nx = offsetX - w / 2,
      ny = offsetY - h / 2;
      nx < 20 - w / 2 ? nx = 20 - w / 2 : nx > (this.windowWidth - w / 2 - 20) ? nx =
  (this.windowWidth - w / 2 - 20) : 0;
  ny < 0 ? ny = 0 : ny > (this.windowHeight - h / 2) ? ny = (this.windowHeight –
  h/2) : 0;
     this.hero.x = nx;
     this.hero.y = ny;
     this.hero.count = 2;

注：本示例援用了局部开源资源，感兴趣的开发者可参考此开源资源，联合文中的实现思路补全代码。（https://github.com/xs528/game）

以上就是本期全部内容，期待宽广开发者能通过 canvas 组件绘制出精美的图形，更多 canvas 组件的具体应用办法，请参考文档进行学习：

https://developer.harmonyos.c…

样例应用指引请参考使用指南：https://mp.weixin.qq.com/s?__…

退出移动版