开源 Arkts 鸿蒙应用开发（十五）自定义绘图控件--仪表盘

import { CanvasCom } from './CanvasCom'
import { router } from '@kit.ArkUI'


const  btnStep = 10;

@Entry
@Component
struct Index {

  @State currentSpeed: string = '0' // 添加状态管理speed
  @State intspeed:number = 0;
  build() {
    Column() {
      // 速度控制按钮组
      Row() {
        Button('加速')
          .onClick(() => {
              this.intspeed = this.intspeed + btnStep;
              if(this.intspeed>240)this.intspeed=0;
              this.currentSpeed = this.intspeed.toString();
          })
          .margin(10)

        Text(`当前速度: ${this.currentSpeed}`)
          .fontSize(20)
          .margin(10)

      }
      .margin({ top: 20 })

      // 或者直接嵌入使用
      CanvasCom({
        desc: '车速表',
        title: '时钟示例',
        speed: this.currentSpeed
      })
    }
    .width('100%')
    .height('100%')
  }

}

2.2 CanvasCom.ets

这是核心组件，实现了一个模拟车速表的功能，主要特点：

组件结构

接收desc、title和speed作为输入，使用@Watch装饰器监听_speed变化，触发表针移动，使用Canvas绘制车速表界面

表盘绘制：使用analog_clock_bg.png作为表盘背景，使用analog_clock_second_hand.png作为指针

速度映射：将速度值(0-240)映射到表盘角度(225°-45°)，使用watchStart(225)和watchProp(180/160=1.125)进行线性映射

动画效果：

使用TimeChangeListener每200ms刷新一次界面

在timeChanged()方法中根据当前速度重绘指针位置

以下为代码

复制代码

import { router } from '@kit.ArkUI';


import { TimeChangeListener } from './TimeChangeListener';
import { BusinessError } from '@kit.BasicServicesKit';
import image from '@ohos.multimedia.image';

// 常量定义
const ANGLE_PRE_SECOND = 1;
const CANVAS_SIZE = 250;
const CANVAS_ASPACTRADIO = 1;
const IMAGE_WIDTH = 10*3;
// 时钟图片名称
const CLOCK_BG_PATH = 'analog_clock_bg.png';
const CLOCK_SECOND_PATH = 'analog_clock_second_hand.png';

const  watchStart = 225;
const  watchProp = 180/(200-40);


@Entry
@Component
export  struct CanvasCom {

  @State desc: string = '';
  @State title: string = '';
  @Prop  speed:string ='0';
  // 2. 内部真正驱动绘制的状态
  @State @Watch('onSpeedChange') _speed: number =0;

  // 主要代码区域
  @State time: string = '';
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private renderContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private canvasSize: number = CANVAS_SIZE;
  private clockRadius: number = this.canvasSize / 2;
  private resourceDir: string = getContext(this).resourceDir;
  private clockPixelMap: image.PixelMap | null = null;
  private secondPixelMap: image.PixelMap | null = null;
  private timeListener: TimeChangeListener | null = null;


   onSpeedChange() {
    // 把 speed 映射到秒针角度
    //const second = this._speed ;
     const second = watchStart+ this._speed *  watchProp;
    this.timeChanged(second);
  }

  onPageShow(): void {
    const params = router.getParams() as Record<string, string>;
    if (params) {
      this.desc = params.desc as string;
      this.title = params.value as string;
      // 移除 this.speed = params.value as string
    }
  }

  aboutToAppear(): void {
    //this._speed = Number(this.speed) || 245;

    this.init();
  }

  aboutToDisappear(): void {
    if (this.timeListener) {
      this.timeListener.clearInterval();
    }
  }
  // 生命周期：父组件传值变化
  aboutToUpdate(): void {

  }

  build() {
    Column() {
      // 顶部描述文本
      Text(this.desc)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin(20)

      // 中间 Canvas
      Canvas(this.renderContext)
        .width(this.canvasSize)
        .aspectRatio(CANVAS_ASPACTRADIO)
        .onReady(() => {
          this.paintTask();
        })

      // 底部时间文本
      Text(`当前速度: ${this.speed}`)
        .fontSize(20)
        .margin(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }

  /**
   * 初始化表盘和表针对应的变量，并首次绘制。
   */
  private init() {
    const clockBgSource = image.createImageSource(this.resourceDir + '/' + CLOCK_BG_PATH);
    const secondSource = image.createImageSource(this.resourceDir + '/' + CLOCK_SECOND_PATH);

    // 创建表盘对应的PixelMap并绘制。
    let paintDial = clockBgSource.createPixelMap().then((pixelMap: image.PixelMap) => {
      this.clockPixelMap = pixelMap;
      this.paintDial();
    }).catch((err: BusinessError) => {
      console.log('打印错误信息')
    });

    // 创建秒针对应的PixelMap并绘制。
    secondSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
      await paintDial;
      //this.paintPin(ANGLE_PRE_SECOND * 10, pixelMap);
      this.paintPin(ANGLE_PRE_SECOND * watchStart, pixelMap);
      this.secondPixelMap = pixelMap;
    }).catch((err: BusinessError) => {
      console.log('打印错误信息')
    });
  }

  /**
   * 绘制模拟时钟任务
   */
  private paintTask() {
    // 1.先将绘制原点转到画布中央
    this.renderContext.translate(this.clockRadius, this.clockRadius);

    // 2.监听时间变化，每秒重新绘制一次
    this.timeListener = new TimeChangeListener(
      (hour: number, minute: number, second: number) => {
        this.renderContext.clearRect(-this.clockRadius, -this.clockRadius, this.canvasSize, this.canvasSize);
        this.paintDial();
        //this.timeChanged(15);
        //const initSecond = Number(this.speed) || 0;

        const initSecond = watchStart + watchProp * Number(this.speed);
        //this.timeChanged(initSecond % 60);
        this.timeChanged(initSecond );
      },
    );
  }



  /**
   * 时间变化回调函数
   */
  private timeChanged(newSecond: number) {
    this.paintPin(ANGLE_PRE_SECOND * newSecond, this.secondPixelMap);
  }

  /**
   * 绘制表盘
   */
  private paintDial() {
    this.renderContext.beginPath();
    if (this.clockPixelMap) {
      this.renderContext.drawImage(
        this.clockPixelMap,
        -this.clockRadius,
        -this.clockRadius,
        this.canvasSize,
        this.canvasSize)
    } else {
      console.log('打印错误信息')
    }
  }

  /**
   * 绘制表针
   */
  private paintPin(degree: number, pinImgRes: image.PixelMap | null) {
    this.renderContext.save();
    const angleToRadian = Math.PI / 180;
    let theta = degree * angleToRadian;
    this.renderContext.rotate(theta);

    this.renderContext.beginPath();
    if (pinImgRes) {
      this.renderContext.drawImage(
        pinImgRes,
        -IMAGE_WIDTH / 2,
        -this.clockRadius /2,
        IMAGE_WIDTH,
        this.canvasSize / 2 );
    } else {
      console.log('打印错误信息')
    }
    this.renderContext.restore();
  }


}

2.3 TimeChangeListener.ets

这是一个辅助类，用于定期触发回调：每200ms获取当前时间并回调,提供清理定时器的方法

以下为代码

复制代码

// 回调声明
type TimeChangeCallback = (hour: number, minute: number, second: number,) => void;

// 时钟刷新间隔
const REFRESH_INTERVAL = 200;

export class TimeChangeListener {
  private onTimeChange: TimeChangeCallback;
  private intervalId: number = 0;

  constructor(
    onTimeChange: TimeChangeCallback
  ) {
    // Store the callbacks
    this.onTimeChange = onTimeChange;

    // Start the time checking loop
    this.intervalId = setInterval(() => this.checkTime(), REFRESH_INTERVAL); // Check every second
  }

  private checkTime(): void {
    const now = new Date();
    const currentHour = now.getHours();
    const currentMinute = now.getMinutes();
    const currentSecond = now.getSeconds();

    // Check for second change

    if (this.onTimeChange) {
      this.onTimeChange(currentHour, currentMinute, currentSecond);
    }
  }

  public clearInterval():void {
    clearInterval(this.intervalId);
  }
}

三、图片资源

analog_clock_bg.png

analog_clock_second_hand.png

四、演示效果

五、工程下载网址：https://download.csdn.net/download/ajassi2000/91681188

开源 Arkts 鸿蒙应用 开发（十五）自定义绘图控件--仪表盘

开源 Arkts 鸿蒙应用开发（十五）自定义绘图控件--仪表盘