签名功能在移动应用中具有广泛的场景和重要作用，而在鸿蒙开发中签名还是可以使用Canvas组件去实现，使用onActionStart、onActionUpdate和onActionEnd,来去写绘制逻辑，效果如下：

还是一样，直接上代码，copy过去就能使用：

import { image } from '@kit.ImageKit';
import display from '@ohos.display';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct SignatureBoard {
  // 获取屏幕宽高（单位：px）
  private screenDisplay: display.Display = display.getDefaultDisplaySync();
  private signatureBoardWidth: number = 375;
  private signatureBoardHeight: number = 500;
  private previousX: number = 0;
  private previousY: number = 0;
  private isFingerDown: boolean = false;
  private panGestureOptions: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All, distance: 1 });
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  aboutToAppear(): void {
    hilog.info(0x0000, 'ScreenDisplayInfo', JSON.stringify(this.screenDisplay));
    // this.signatureBoardWidth = this.screenDisplay.width;
    // this.signatureBoardHeight = this.screenDisplay.height;
  }

  drawLine(startX: number, startY: number, endX: number, endY: number) {
    // 起点
    this.canvasContext.moveTo(startX, startY);
    // 终点
    this.canvasContext.lineTo(endX, endY);
    // 绘制线条
    this.canvasContext.stroke();
  }

  saveSignatureImage(image: image.PixelMap) {
    // 做保存逻辑
    hilog.info(0x0000, 'SignatureImage', String(image));
  }

  build() {
    Column() {
      Canvas(this.canvasContext)
        .width(this.signatureBoardWidth)
        .height(this.signatureBoardHeight)
        .backgroundColor('#ffffff')
        .borderRadius(12)
        .border({ width: 2, color: Color.Gray })
        .onReady(() => {
          this.canvasContext.lineWidth = 3;
          this.canvasContext.strokeStyle = "#333333";
        })
        .gesture(
          PanGesture(this.panGestureOptions)
            .onActionStart((event) => {
              this.isFingerDown = true;
              // 按下时的点作为起点
              this.previousX = event.fingerList[0].localX;
              this.previousY = event.fingerList[0].localY;
              // 创建一个新的路径
              this.canvasContext.beginPath();
            })
            .onActionUpdate((event) => {
              // 没有按下就不管
              if (!this.isFingerDown) return;
              const currentX = event.fingerList[0].localX;
              const currentY = event.fingerList[0].localY;
              // 调用绘制方法
              this.drawLine(this.previousX, this.previousY, currentX, currentY);
              // 把当前移动时的坐标作为下一次的绘制路径的起点
              this.previousX = currentX;
              this.previousY = currentY;
            })
            .onActionEnd(() => {
              this.isFingerDown = false;
              // 关闭路径
              this.canvasContext.closePath();
            })
        )

      Row({ space: 20 }) {
        Button('重新签名')
          .width(120)
          .height(40)
          .backgroundColor('#e0e0e0')
          .fontColor('#333333')
          .borderRadius(8)
          .onClick(() => {
            this.canvasContext.clearRect(0, 0, this.signatureBoardWidth, this.signatureBoardHeight);
          })

        Button('确认签名')
          .width(120)
          .height(40)
          .backgroundColor('#007aff')
          .fontColor('#ffffff')
          .borderRadius(8)
          .onClick(() => {
            const signatureImage = this.canvasContext.getPixelMap(0, 0, this.signatureBoardWidth, this.signatureBoardHeight);
            this.saveSignatureImage(signatureImage);
          })
      }.margin('20')
    }.width('100%')
    .alignItems(HorizontalAlign.Center);
  }
}