鸿蒙ArkTS开始实例：【canvas实现签名板功能】

使用ArkTS中的canvas实现签名板的功能，canvas画布大家都很熟悉，我们会用它经常实现一些画板或者图表、表格之类的功能。canvas签名板是我在开发APP过程中实现的一个功能，开发过程中也是遇到比较多的问题。我会按照以下几点来讲解开发整个过程：

一、屏幕旋转

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

• 在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));
    }
  }
}