鸿蒙画布组件使用介绍

一、前言

DevEco Studio版本：4.0.0.600

前些天写了一篇 鸿蒙自定义控件实现罗盘数字时钟效果 的文章，有同学私信说能不能介绍鸿蒙中的画布组件，下面文章介绍下鸿蒙中的Canvas画布、CanvasRenderingContext2D绘制组件，实现绘制文本、矩形、线条、圆形、椭圆、三角形、扇形、图片等。

Canvas：提供画布组件，用于自定义绘制图形。

CanvasRenderingContext2D：使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等，相当于画笔

RenderingContextSettings：用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿

参考链接：OpenHarmony CanvasRenderingContext2D

二、实现效果

三、具体实现逻辑

1、初始化

private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img: ImageBitmap = new ImageBitmap("images/startIcon.png")
 
build() {
   Stack({ alignContent: Alignment.Center }) {
      Canvas(this.context)
         .padding({ top: 76 })
         .width('100%')
         .height('100%')
         .onReady(() => {
            this.drawCanvas()
         })
   }
   .width('100%')
   .height('100%')
}
 
 
//画布逻辑
private drawCanvas(): void {
   this.context.fillStyle = '#0080DC' //画笔填充颜色
   this.context.strokeStyle = '#0080DC' //画笔线条颜色
   this.context.font = '22px' //字体大小
}

2、画文字

//画文字
this.context.fillText("Hello World!", 10, 10)

3、画矩形

//画矩形
this.context.strokeRect(10, 30, 100, 100)

4、画线条

//画线
this.context.beginPath()
this.context.moveTo(10, 150)
this.context.lineTo(180, 200)
this.context.stroke()

5、画圆形

//画圆形
this.context.beginPath()
this.context.arc(60, 250, 50, 0, 2 * Math.PI)
this.context.stroke()

6、画椭圆形

//画椭圆形
this.context.beginPath()
this.context.ellipse(100, 360, 50, 100, Math.PI * 0.5, 0, Math.PI * 2)
this.context.stroke()

7、画三角形

先画两条线，然后通过closePath()方法实现闭环，依次达到画三角形效果

//画三角形
this.context.beginPath()
this.context.moveTo(10, 500)
this.context.lineTo(60, 420)
this.context.lineTo(120, 500)
this.context.closePath()
this.context.stroke()

 

8、画扇形

先画弧线，在画两条基于弧线起点和终点的线，依次来达到画扇形的效果

//画扇形
this.context.beginPath()
this.context.arc(110, 620, 100, Math.PI, 1.75 * Math.PI)
this.context.moveTo(10, 620)
this.context.lineTo(110, 620)
this.context.lineTo(180.71, 549.29)
this.context.stroke()

9、画图片

//画图片
this.context.drawImage(this.img, 0, 0, 144, 144, 150, 0, 144, 144)

10、画二阶贝赛尔曲线的路径

原理演示动画：

效果：

代码实现：

import display from '@ohos.display'
 
@Entry
@Component
struct Index {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private mDisplayWidth: number
   private mDisplayHeight: number
 
   aboutToAppear() {
      this.getSize()
   }
 
   // 获取设备宽高计算表盘大小
   async getSize() {
      let mDisplay = await display.getDefaultDisplay()
      this.mDisplayWidth = mDisplay.width
      this.mDisplayHeight = mDisplay.height
   }
 
   build() {
      Stack({ alignContent: Alignment.Center }) {
         Canvas(this.context)
            .padding({ top: 76 })
            .width('100%')
            .height('100%')
            .onReady(() => {
               this.drawCanvas()
            })
            .onTouch((event) => this.touchEvent(event))
      }
      .width('100%')
      .height('100%')
   }
 
   private drawCanvas(): void {
      this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)
      this.context.strokeStyle = '#0080DC' //画笔线条颜色
      this.context.lineWidth = 3
      this.context.font = '22px' //字体大小
      //画第一个圆
      this.context.beginPath()
      this.context.arc(20, 200, 5, 0, 2 * Math.PI)
      this.context.stroke()
      //画第二个圆
      this.context.beginPath()
      this.context.arc(305, 200, 5, 0, 2 * Math.PI)
      this.context.stroke()
      //画贝塞尔曲线
      this.context.beginPath()
      this.context.moveTo(20, 195)
      this.context.quadraticCurveTo(this.eventX, this.eventY, 300, 200)
      this.context.stroke()
   }
 
   @State eventX: number = 0
   @State eventY: number = 500
 
   touchEvent(event: TouchEvent) {
      switch (event.type) {
         case TouchType.Down: // 手指按下
         case TouchType.Move: // 手指移动
            this.eventX = event.touches[0].x
            this.eventY = event.touches[0].y
            this.drawCanvas()
            break
      }
   }
}

11、画三阶贝赛尔曲线的路径

原理演示动画：

效果：

代码实现：

import display from '@ohos.display'
 
@Entry
@Component
struct Index {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private mDisplayWidth: number
   private mDisplayHeight: number
   @State isFirst: boolean = true
 
   aboutToAppear() {
      this.getSize()
   }
 
   // 获取设备宽高计算表盘大小
   async getSize() {
      let mDisplay = await display.getDefaultDisplay()
      this.mDisplayWidth = mDisplay.width
      this.mDisplayHeight = mDisplay.height
   }
 
   build() {
      Stack({ alignContent: Alignment.Center }) {
         Canvas(this.context)
            .padding({ top: 76 })
            .width('100%')
            .height('100%')
            .onReady(() => {
               this.drawCanvas()
            })
            .onTouch((event) => this.touchEvent(event))
 
         Button(`点击切换，当前${this.isFirst ? '第一点' : '第二点'}`)
            .onClick(() => {
               this.isFirst = !this.isFirst
            })
      }
      .alignContent(Alignment.TopStart)
      .width('100%')
      .height('100%')
   }
 
   private drawCanvas(): void {
      this.context.clearRect(0, 0, this.mDisplayWidth, this.mDisplayHeight)
      this.context.strokeStyle = '#0080DC' //画笔线条颜色
      this.context.lineWidth = 3
      this.context.font = '22px' //字体大小
      //画第一个圆
      this.context.beginPath()
      this.context.arc(20, 200, 5, 0, 2 * Math.PI)
      this.context.stroke()
      //画第二个圆
      this.context.beginPath()
      this.context.arc(405, 200, 5, 0, 2 * Math.PI)
      this.context.stroke()
      //画贝塞尔曲线
      this.context.beginPath()
      this.context.moveTo(20, 195)
      this.context.bezierCurveTo(this.eventFirstX, this.eventFirstX, this.eventSecondX, this.eventSecondY, 400, 200)
      this.context.stroke()
      this.context.stroke()
   }
 
   @State eventFirstX: number = 120
   @State eventFirstY: number = 50
   @State eventSecondX: number = 200
   @State eventSecondY: number = 500
 
   touchEvent(event: TouchEvent) {
      switch (event.type) {
         case TouchType.Down: // 手指按下
         case TouchType.Move: // 手指移动
            if (this.isFirst) {
               this.eventFirstX = event.touches[0].x
               this.eventFirstY = event.touches[0].y
            } else {
               this.eventSecondX = event.touches[0].x
               this.eventSecondY = event.touches[0].y
            }
            this.drawCanvas()
            break
      }
   }
}