鸿蒙Next使用Canvas绘制一个汽车仪表盘

本文通过实现一个汽车仪表盘，介绍使用CanvasRenderingContext2D在Canvas组件上进行绘制图形。 看一下最终演示：

先了解一下CanvasRenderingContext2D都有哪些属性和方法 |属性名| 说明| |-----|-----| |fillStyle| 指定绘制的填充色。| |lineWidth |设置绘制线条的宽度。| |strokeStyle |设置线条的颜色。| |lineCap |指定线端点的样式。| |lineJoin |指定线段间相交的交点样式。| |miterLimit |设置斜接面限制值。| |font |设置文本绘制中的字体样式。| |textAlign| 设置文本绘制中的文本对齐方式。| |textBaseline |设置文本绘制中的水平对齐方式。| |globalAlpha |设置透明度。| |lineDashOffset| 设置画布的虚线偏移量。| |globalCompositeOperation| 设置合成操作的方式。| |shadowBlur| 设置绘制阴影时的模糊级别。| |shadowColor |设置绘制阴影时的阴影颜色。| |shadowOffsetX| 设置绘制阴影时和原有对象的水平偏移值。| |shadowOffsetY |设置绘制阴影时和原有对象的垂直偏移值。| |imageSmoothingEnabled |用于设置绘制图片时是否进行图像平滑度调整。| |height| 组件高度。| |width |组件宽度。| |imageSmoothingQuality |imageSmoothingEnabled 为 true 时，用于设置图像平滑度。| |direction| 用于设置绘制文字时使用的文字方向。| |filter |用于设置图像的滤镜。| |canvas| 获取和 CanvasRenderingContext2D 关联的 Canvas 组件的 FrameNode 实例。| 本文使用的几个方法以放到前面，可以参考说明。

源码：

import { getScreenWidth } from '../utils/DisplayUtil';

@Entry
@ComponentV2
struct CanvasTest {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private context3: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  @Local centerX: number = 0
  @Local centerY: number = 0
  @Local currentSpeed: number = 0
  @Local angle: number = 0
  @Local startAngle:number= Math.PI * 140 / 180   //弧线的起始弧度
  @Local endAngle:number= Math.PI * 40 / 180   //弧线的起始弧度

  //绘制渐变外环
  draw(){
    this.context3.clearRect(0,0,2*this.centerX,2*this.centerX)
    this.context3.beginPath()
    let grad = this.context3.createLinearGradient(this.getStartX(), this.getStartY(), this.getEndX(), this.getEndY())
    grad.addColorStop(0, '#0000ff00')
    grad.addColorStop(0.9, '#00ff00')
    if (this.currentSpeed>120) {
      grad.addColorStop(1, '#ff0000')
    }else {
      grad.addColorStop(1, '#00ff00')
    }
    this.context3.strokeStyle = grad;
    this.context3.lineWidth = 4;
    this.context3.arc(this.centerX, this.centerY, this.centerX - 4, this.startAngle, Math.PI * (140+(this.currentSpeed * 260 / 180) ) / 180)
    this.context3.stroke()
  }

  build() {
    Column() {
      Stack() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor("#fceb99")
          .onReady(() => {
            //绘制外环
            this.context.beginPath()
            this.context.strokeStyle = '#0000ff';
            this.context.lineWidth = 2;
            this.context.arc(this.centerX, this.centerY, this.centerX - 10, this.startAngle, this.endAngle)
            this.context.stroke()
            //绘制内环
            this.context.beginPath()
            this.context.strokeStyle = '#07A6EC';
            this.context.lineWidth = 8;
            this.context.arc(this.centerX, this.centerY, this.centerX - 16, this.startAngle,  this.endAngle)
            this.context.stroke()
            //绘制刻度
            this.context.save()
            this.context.translate(this.centerX, this.centerY);
            this.context.rotate(Math.PI * 50 / 180)
            for (let i = 0; i <= 36; i++) {
              if (i % 4 == 0) {
                this.context.beginPath()
                this.context.lineWidth = 4;
                this.context.strokeStyle = '#07A6EC';
                this.context.moveTo(0, this.centerY - 34);
                this.context.lineTo(0, this.centerY - 12);
                this.context.stroke();
              } else {
                this.context.beginPath()
                this.context.lineWidth = 2;
                this.context.strokeStyle = '#07A6EC';
                this.context.moveTo(0, this.centerY - 26);
                this.context.lineTo(0, this.centerY - 12);
                this.context.stroke();
              }
              this.context.rotate(Math.PI * (260 / 36) / 180)
            }
            this.context.restore()
            //绘制数字
            this.context.save()
            this.context.translate(this.centerX, this.centerY);
            for (let i = 0; i < 10; i++) {
              // 转换为弧度
              const radians = (140 + i * (260 / 9)) * Math.PI / 180;
              // 计算坐标
              const x = (this.centerY - 60) * Math.cos(radians);
              const y = (this.centerY - 60) * Math.sin(radians);
              this.context.textAlign = 'center'
              this.context.textBaseline = 'middle'
              this.context.font = '30vp sans-serif'
              this.context.fillText(i * 20 + '', x, y)
            }
            //绘制中间单位
            this.context.textAlign = 'center'
            this.context.textBaseline = 'middle'
            this.context.font = '30vp sans-serif'
            this.context.fillText('km/h', 0, -40)
            this.context.restore()
            //绘制红色圆环
            this.context.translate(0, 0);
            this.context.beginPath()
            this.context.strokeStyle = Color.Red;
            this.context.lineWidth = 3;
            this.context.arc(this.centerX, this.centerY, this.centerX - 100, this.startAngle,  this.endAngle)
            this.context.stroke()
          })
        Canvas(this.context3)
          .width('100%')
          .height('100%')

        Canvas(this.context2)
          .width('100%')
          .height('100%')
          .onReady(() => {
            this.context2.beginPath()
            this.context2.lineWidth = 3;
            this.context2.strokeStyle = "#95ff00";
            this.context2.moveTo(this.centerX, this.centerY)
            this.context2.lineTo(this.centerX, 14)
            this.context2.stroke()
          })
          .rotate({ centerX: this.centerX, centerY: this.centerY, angle: this.cacleAngle() })

        Text(this.currentSpeed + '').fontColor(Color.Black).fontSize(30).offset({ y: 20 })

      }.height('50%').width('100%')
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
        this.centerX = (newValue.width as number) / 2
        this.centerY = (newValue.height as number) / 2
      })

      Slider({
        value: this.currentSpeed,
        min: 0,
        max: 180,
        step: 1,
      })
        .width('80%')
        .blockColor("#0099ff")//设置滑块的颜色
        .onChange((value: number, mode: SliderChangeMode) => {
          this.currentSpeed = value
        })
    }
  }

  cacleAngle(): number {
    this.draw();
    // (当前速度/最大速度180)*圆环角度260- 默认其实位置从中心位置向左旋转130
    return (this.currentSpeed * 260 / 180) - 130
  }

  getStartX() {
    const angleRadians = 140 * Math.PI / 180;
    return this.centerX + this.centerX * Math.cos(angleRadians);
  }

  getStartY(): number {
    const angleRadians = 140 * Math.PI / 180;
    return this.centerX + this.centerX * Math.sin(angleRadians);
  }

  getEndX() {
    const angleRadians = (140+(this.currentSpeed * 260 / 180) )* Math.PI / 180;
    return this.centerX + this.centerX * Math.cos(angleRadians);
  }
  getEndY(): number {
    const angleRadians = (140+(this.currentSpeed * 260 / 180))* Math.PI / 180;
    return this.centerX + this.centerX * Math.sin(angleRadians);
  }
}