HarmonyOS 有没有画板签名能力,例如签合同时,需要电子签名,实现一个画板及签名

HarmonyOS
2024-12-27 16:11:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

1、在EntryAbility中获取窗口实例赋值给全局变量,当后面使用签名画板需要旋转屏幕时可以使用

onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, data) => {
    if (err.code) {
      console.error('获取失败' + JSON.stringify(err));
      return;
    }
    console.info('获取主窗口的实例:' + JSON.stringify(data));
    globalThis.windowClass = data // 赋值给全局变量windowClass
  });
}

2、CanvasTest 使用画布以及手势动画完成签名操作

import window from '@ohos.window';

@Entry
@Component
struct CanvasTest {
  private lastX: number = 0;
  private lastY: number = 0;
  private isDown: Boolean = true;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All, distance: 1 })
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  onPageShow() {
    // 获取旋转的方向,具体可以查看对应文档
    let orientation = window.Orientation.LANDSCAPE_INVERTED;
    try {
      // 设置屏幕旋转
      globalThis.windowClass.setPreferredOrientation(orientation, () => {});
    } catch (exception) {
      console.error('设置失败: ' + JSON.stringify(exception));
    }
  }

  draw(startX:number, startY:number, endX:number, endY:number) {
    // 起点
    this.context.moveTo(startX, startY);
    // 终点
    this.context.lineTo(endX, endY);
    // 调用 stroke,即可看到绘制的线条
    this.context.stroke();
  }
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#fff')
        .onReady(() => {
          this.context.lineWidth = 3;
          this.context.strokeStyle = "#000";

        })
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: GestureEvent) => {
              this.isDown = true;
              // 按下时的点作为起点
              this.lastX = event["localX"];
              this.lastY = event["localY"];
              // 创建一个新的路径
              this.context.beginPath();
            })
            .onActionUpdate((event: GestureEvent) => {
              // 没有按下就不管
              if (!this.isDown) return;
              const offsetX:number = event["localX"]
              const offsetY:number = event["localY"]
              // 调用绘制方法
              this.draw(this.lastX, this.lastY, offsetX, offsetY);
              // 把当前移动时的坐标作为下一次的绘制路径的起点
              this.lastX = offsetX;
              this.lastY = offsetY;
            })
            .onActionEnd(() => {
              this.isDown = false;
              // 关闭路径
              this.context.closePath();
            })
        )
    }
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-27 19:03:59
相关问题
HarmonyOS 手写签名实现
142浏览 • 1回复 待解决
HarmonyOS 是否有类似画板功能组件
570浏览 • 1回复 待解决
HarmonyOS 有提供hs256签名能力
163浏览 • 1回复 待解决
HarmonyOS应用签名问题
597浏览 • 1回复 待解决
HarmonyOS 签名固定问题
309浏览 • 1回复 待解决
HarmonyOS 打包签名问题
250浏览 • 1回复 待解决