如何使用ArkTS中的canvas实现签名板功能

一、屏幕旋转

实现签名板的第一个功能就是旋转屏幕。旋转屏幕在各种框架中都有不一样的方式，比如：

• 在H5端，我们一般是使用CSS中的transform属性中的rotate()方法来强制将网页横屏，然后实现一系列功能
• 在嵌套第三方APP中，我们一般是调用对应的SDK提供的方法，即可实现旋转屏幕
• .....

实现方式还有很多，各有千秋，相信HarmonyOS也会提供对应API方法来设置旋转屏幕。

而我自己则是在页面内通过 Window 对象的 setPreferredOrientation() 方法实现横竖屏切换。以下是我实现的完整代码：

// 在EntryAbility.ts中获取窗口实例并赋值给全局变量，如此所有页面都可以通过全局// 变量去修改窗口信息，不需要重新获取
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
  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
    });
  }
}

// 在具体页面中的使用
import window from '@ohos.window';
@Entry
@Componentstruct SignatureBoard {

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

二、canvas画布

解决了屏幕旋转问题，接下来实现签名功能。因为在之前就已经开发过，只要将对应的语法转成ArkTS的语法就好。以下是代码解析：

2.1 按照官方文档使用canvas组件

@Entry@Component
struct SignatureBoard {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#fff')
        .onReady(() => {
        })
    }
    .width('100%')
    .height('100%')
  }
}

2.2 设置画笔的属性以及绑定手势功能。

在js中我们基本都是使用鼠标事件来实现的，而在ArkTS中是通过手势方法来监听手指在屏幕上的操作，有很多种，大家需要用到的可以去查看对应的文档。

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: any) => {
               // 手指按下的时候
            })
            .onActionUpdate((event: any) => {
               // 手指移动的时候
            })
            .onActionEnd(() => {
               // 手指离开的时候
            })
        )
  }

2.3 我们实现的手势的绑定，那么就可以实现手指在屏幕上滑动之后画布就绘画出对应的轨迹路线了，这里将会使用到一些画布的功能。

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

  draw(startX, startY, endX, endY) {
    // 起点
    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: any) => {
              this.isDown = true;
              // 按下时的点作为起点
              this.lastX = event.localX;
              this.lastY = event.localY;
              // 创建一个新的路径
              this.context.beginPath();
            })
            .onActionUpdate((event: any) => {
              // 没有按下就不管
              if (!this.isDown) return;
              const offsetX = event.localX
              const offsetY = 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%')
  }
}

以上就是我们实现签名板的完整思路以及代码了，有几个需要注意的点是：

1. new PanGestureOptions实例的时候需要把distance设置小一点，值越小灵敏度就越高

2. PanGesture的回调方法中event参数，官方默认给的属性类型为GestureEvent。但是我在编辑器源码中查看该属性没有我们定义我们想要的localX、localY，但是实际是有返回的，如果直接用编辑器会报错。所以需要将event定为any类型，这样就可以获取且不报错了。

这次的画布签名板的功能就分享这些，希望能够帮助各位开发者，后续会继续分享出更多在项目中经常用到的工具。

为了帮助大家更深入有效的学习到鸿蒙开发知识点，小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源，获取完整版方式请点击→《HarmonyOS教学视频》

HarmonyOS教学视频：语法ArkTS、TypeScript、ArkUI等…视频教程

鸿蒙生态应用开发白皮书V2.0PDF：

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

1. 应用开发导读(ArkTS)
2. .……

二、HarmonyOS 概念

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全
5. …

三、如何快速入门？《鸿蒙基础入门学习指南》

1. 基本概念
2. 构建第一个ArkTS应用
3. .……

四、开发基础知识

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. .……

五、基于ArkTS 开发

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 7.网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. .……

更多了解更多鸿蒙开发的相关知识可以参考：《鸿蒙 (Harmony OS)开发学习手册》