HarmonyOS 鸿蒙Next 日常案例分享之华为闹钟-绘制表盘（UI或功能逐步完善，会将不同时段的结果进行记录和分享，欢迎有兴趣的同学共同交流）

HarmonyOS 鸿蒙Next 日常案例分享之华为闹钟-绘制表盘（UI或功能逐步完善，会将不同时段的结果进行记录和分享，欢迎有兴趣的同学共同交流）

@Entry
@Component
struct TestClockPage {
  //创建ImageBitmap对象  时针,分针,秒针
  private panImg = new ImageBitmap('/images/ic_clock_pan.png')
  private hourImg = new ImageBitmap('/images/ic_hour_pointer.png')
  private minuteImg = new ImageBitmap('/images/ic_minute_pointer.png')
  private secondImg = new ImageBitmap('/images/ic_second_pointer.png')
  //抗锯齿设置
  private setting: RenderingContextSettings = new RenderingContextSettings(true)
  //创建画布实例context
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting)
  //定义画布
  canvasSize = 252
  //时针.分针.秒针对应的宽度
  pointerWidth = 8

  drawPointer(img: ImageBitmap) { //定义绘制通用方法

    //绘制表针（方式1）
    this.context.save() //保存
    //绘制旋转顶点
    this.context.translate(this.canvasSize / 2, this.canvasSize / 2)
    // 画布，图像旋转
    this.context.rotate(180 * Math.PI / 180)
    //设置旋转中心
    this.context.translate(-this.pointerWidth / 2, -this.canvasSize / 2)
    //绘制表针
    this.context.drawImage(img, 0, 0, this.pointerWidth, this.canvasSize)
    //设置旋转中心
    this.context.translate(this.canvasSize / 2, this.canvasSize / 2)
    this.context.restore() //重置
  }

  build() {
    Column() {
      Canvas(this.context)
        .height(this.canvasSize)//画布的高度
        .width(this.canvasSize)//画布的宽度
        .backgroundColor('#CCC')
        .onReady(() => {
          //绘制表盘
          this.context.drawImage(this.panImg, 0, 0, this.canvasSize, this.canvasSize)

          //绘制时针
          this.drawPointer(this.hourImg)

          //绘制分针
          this.drawPointer(this.hourImg)

          //绘制秒针（方式2）
          this.drawPointer(this.secondImg)
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}