使用ArkTS中的canvas實現簽名板功能

作為一名web前端開發者，還在持續自學HarmonyOS，學習過程中我會分享自己做的一些工具，包括開發難點與解決方案，希望對各位HarmonyOS開發者有所啟發。

這次我要分享的是使用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));
    }
  }
}

（左右滑動查看更多）

二

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類型，這樣就可以獲取且不報錯了。

這次的畫布簽名板的功能就分享這些，希望能夠幫助各位開發者，后續會繼續分享出更多在項目中經常用到的工具。

審核編輯：湯梓紅