鸿蒙HarmonyOS Next开发学习手册——使用画布绘制自定义图形 (Canvas)

悠扬随风 发表于 2024-11-3 23:22:11

HarmonyOS Next开发学习手册——使用画布绘制自定义图形 (Canvas)

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是底子形状、文本、图片等。
使用画布组件绘制自定义图形

可以由以下三种情势在画布绘制自定义图形：

[*]使用 CanvasRenderingContext2D对象在Canvas画布上绘制。
@Entry
@Component
struct CanvasExample1 {
//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
private settings: RenderingContextSettings = new RenderingContextSettings(true)
//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   //在canvas中调用CanvasRenderingContext2D对象。
   Canvas(this.context)
   .width('100%')
   .height('100%')
   .backgroundColor('#F5DC62')
   .onReady(() => {
      //可以在这里绘制内容。
      this.context.strokeRect(50, 50, 200, 150);
   })
}
.width('100%')
.height('100%')
}
}
https://i-blog.csdnimg.cn/blog_migrate/b4a02c2365c72334f4884a8dba251829.png

[*] 离屏绘制是指将需要绘制的内容先绘制在缓存区，再将其转换成图片，一次性绘制到Canvas上，加快了绘制速率。过程为：

[*]通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。
[*]通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。
具体使用参考 OffscreenCanvasRenderingContext2D对象。

@Entry
@Component
struct CanvasExample2 {
//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
//用来创建OffscreenCanvas对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   Canvas(this.context)
   .width('100%')
   .height('100%')
   .backgroundColor('#F5DC62')
   .onReady(() =>{
      let offContext = this.offCanvas.getContext("2d", this.settings)
      //可以在这里绘制内容
      offContext.strokeRect(50, 50, 200, 150);
      //将离屏绘值渲染的图像在普通画布上显示
      let image = this.offCanvas.transferToImageBitmap();
      this.context.transferFromImageBitmap(image);
   })
}
.width('100%')
.height('100%')
}
}
https://i-blog.csdnimg.cn/blog_migrate/11c91f499b8bde48c33c90516af9456b.png
说明
在画布组件中，通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制时调用的接口雷同，另接口参数如无特别说明，单位均为vp。

[*]在Canvas上加载Lottie动画时，需要先按照如下方式下载Lottie。
import lottie from '@ohos/lottie'
具体接口请参考 Lottie 。
初始化画布组件

onReady(event: () => void)是Canvas组件初始化完成时的事件回调，调用该事件后，可获取Canvas组件的确定宽高，进一步使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象调用相关API进行图形绘制。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() => {
this.context.fillStyle = '#0097D4';
this.context.fillRect(50, 50, 100, 100);
})
https://i-blog.csdnimg.cn/blog_migrate/af6c567453a26b941883c3056437c59d.png
画布组件绘制方式

在Canvas组件生命周期接口onReady()调用之后，开发者可以直接使用canvas组件进行绘制。大概可以脱离Canvas组件和onReady()生命周期，单独定义Path2d对象构造理想的路径，并在onReady()调用之后使用Canvas组件进行绘制。

[*]通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象直接调用相关API进行绘制。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() =>{
this.context.beginPath();
this.context.moveTo(50, 50);
this.context.lineTo(280, 160);
this.context.stroke();
})
https://i-blog.csdnimg.cn/blog_migrate/9caa72af8045599ade0467d025d0d154.png

[*]先单独定义path2d对象构造理想的路径，再通过调用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的stroke接口大概fill接口进行绘制，具体使用可以参考 Path2D对象。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() =>{
let region = new Path2D();
region.arc(100, 75, 50, 0, 6.28);
this.context.stroke(region);
})
https://i-blog.csdnimg.cn/blog_migrate/fb7e63702b25aa358f13b6ce4e148972.png
画布组件常用方法

OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供了大量的属性和方法，可以用来绘制文本、图形，处理像素等，是Canvas组件的核心。常用接口有 fill （对封闭路径进行添补）、 clip （设置当前路径为剪切路径）、 stroke （进行边框绘制操纵）等等，同时提供了 fillStyle （指定绘制的添补色）、 globalAlpha （设置透明度）与 strokeStyle （设置描边的颜色）等属性修改绘制内容的样式。将通过以下几个方面简单介绍画布组件常见使用方法：

[*] 底子形状绘制。
可以通过 arc （绘制弧线路径）、 ellipse （绘制一个椭圆）、 rect （创建矩形路径）等接口绘制底子形状。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() =>{
//绘制矩形
this.context.beginPath();
this.context.rect(100, 50, 100, 100);
this.context.stroke();
//绘制圆形
this.context.beginPath();
this.context.arc(150, 250, 50, 0, 6.28);
this.context.stroke();
//绘制椭圆
this.context.beginPath();
this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
this.context.stroke();
})
https://i-blog.csdnimg.cn/blog_migrate/c2e6e9dd25b06ddaa798df352fe64c5e.png

[*] 文本绘制。
可以通过 fillText （绘制添补类文本）、 strokeText （绘制描边类文本）等接口进行文本绘制。
https://i-blog.csdnimg.cn/blog_migrate/2c958a44db0a5e5ff48174bbde9c49e3.png

[*] 绘制图片和图像像素信息处理。
可以通过 drawImage （图像绘制）、 putImageData （使用 ImageData 数据添补新的矩形地区）等接口绘制图片，通过 createImageData （创建新的ImageData 对象）、 getPixelMap （以当前canvas指定地区内的像素创建 PixelMap 对象）、 getImageData （以当前canvas指定地区内的像素创建ImageData对象）等接口进行图像像素信息处理。
@Entry
@Component
struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   Canvas(this.context)
   .width('100%')
   .height('100%')
   .backgroundColor('#F5DC62')
   .onReady(() =>{
      let offContext = this.offCanvas.getContext("2d", this.settings)
      // 使用drawImage接口将图片画在（0，0）为起点，宽高130的区域
      offContext.drawImage(this.img,0,0,130,130);
      // 使用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
      let imagedata = offContext.getImageData(50,50,130,130);
      // 使用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
      offContext.putImageData(imagedata,150,150);
      // 将离屏绘制的内容画到canvas组件上
      let image = this.offCanvas.transferToImageBitmap();
      this.context.transferFromImageBitmap(image);
   })
}
.width('100%')
.height('100%')
}
}
https://i-blog.csdnimg.cn/blog_migrate/f1e25849a238a802249fcde3547e4f76.png

[*]其他方法。
Canvas中还提供其他类型的方法。渐变（CanvasGradient对象）相关的方法：createLinearGradient（创建一个线性渐变色）、createRadialGradient（创建一个径向渐变色）等。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() =>{
//创建一个径向渐变色的CanvasGradient对象
let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
//为CanvasGradient对象设置渐变断点值，包括偏移和颜色
grad.addColorStop(0.0, '#E87361');
grad.addColorStop(0.5, '#FFFFF0');
grad.addColorStop(1.0, '#BDDB69');
//用CanvasGradient对象填充矩形
this.context.fillStyle = grad;
this.context.fillRect(0, 0, 400, 400);
})
https://i-blog.csdnimg.cn/blog_migrate/bf930416579bcd276f8edafed5adc7c5.png
场景示例

[*]规则底子形状绘制。
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   Canvas(this.context)
   .width('100%')
   .height('100%')
   .backgroundColor('#F5DC62')
   .onReady(() =>{
      // 设定填充样式，填充颜色设为蓝色
      this.context.fillStyle = '#0097D4';
      // 以(50, 50)为左上顶点，画一个宽高200的矩形
      this.context.fillRect(50,50,200,200);
      // 以(70, 70)为左上顶点，清除宽150高100的区域
      this.context.clearRect(70,70,150,100);
   })
}
.width('100%')
.height('100%')
}
}
https://i-blog.csdnimg.cn/blog_migrate/3dc5d799d507096b7ab163c465aaf6d0.png

[*]不规则图形绘制。
@Entry
@Component
struct Path2d {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

build() {
Row() {
   Column() {
   Canvas(this.context)
      .width('100%')
      .height('100%')
      .backgroundColor('#F5DC62')
      .onReady(() =>{
         // 使用Path2D的接口构造一个五边形
         let path = new Path2D();
         path.moveTo(150, 50);
         path.lineTo(50, 150);
         path.lineTo(100, 250);
         path.lineTo(200, 250);
         path.lineTo(250, 150);
         path.closePath();
         // 设定填充色为蓝色
         this.context.fillStyle = '#0097D4';
         // 使用填充的方式，将Path2D描述的五边形绘制在canvas组件内部
         this.context.fill(path);
      })
   }
   .width('100%')
}
.height('100%')
}
}
https://i-blog.csdnimg.cn/blog_migrate/1eb992ea1dc8b8220b9bea572321de91.png
鸿蒙全栈开发全新学习指南

有很多小搭档不知道学习哪些鸿蒙开发技能？不知道需要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习门路与学习文档用来跟着学习是非常有必要的。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技能的学习门路，包罗了鸿蒙开发必把握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模子、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技能知识点。
本门路共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

https://i-blog.csdnimg.cn/blog_migrate/25ffee0c08f3e3b6a285cdfd3bcf8b52.png#pic_center
第二阶段：鸿蒙南北双向高工技能底子：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/d40e254ad5298b1b9443673b5d2d65e8.png
第三阶段：应用开发中高级就业技能

https://i-blog.csdnimg.cn/blog_migrate/12a1f73ec20d4dbfb00e81a12a8a3b80.png
第四阶段：全网首发-工业级南向装备开发就业技能：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/4edc4135ad5e9589f07294c309fa6ceb.png
《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……
https://i-blog.csdnimg.cn/blog_migrate/95c9d69bf2799d495b48ef0afdc3a6c3.png
开发底子知识:gitee.com/MNxiaona/733GH

1.应用底子知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
https://i-blog.csdnimg.cn/blog_migrate/8a3c814f160a417762a1604f1100519b.png
基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
https://i-blog.csdnimg.cn/blog_migrate/a7814f4329840186e6587683eb60ad61.png
鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/94175dfdc325a7ecd433aded1955becc.png
鸿蒙入门讲授视频：

https://i-blog.csdnimg.cn/blog_migrate/38afbec31737974e20ce0f81a3bf6bae.png
美团APP实战开发讲授：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/b2f662b1d4999c82896fb019422e345d.png
写在最后

[*]假如你觉得这篇内容对你还蛮有资助，我想邀请你帮我三个小忙：
[*]点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
[*]关注小编，同时可以期待后续文章ing

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

HarmonyOS Next开发学习手册——使用画布绘制自定义图形 (Canvas)