使用HarmonyOS NEXT實(shí)現(xiàn)簽名板的功能

复制theme: greenwillow

簡(jiǎn)介

大家好，我是一只會(huì)打代碼的羊。今天來分享一篇之前使用ArkTS API9版本實(shí)現(xiàn)的簽名板功能，目前鴻蒙已經(jīng)推出API12了，對(duì)比API9的時(shí)候，現(xiàn)在實(shí)現(xiàn)一個(gè)功能太簡(jiǎn)單了。這期主要講一下之前實(shí)現(xiàn)功能有多難受，以及如何實(shí)現(xiàn)。，現(xiàn)在這套代碼也是可以直接遷移到API12版本的。

對(duì)了，目前我們開發(fā)的圖表組件已經(jīng)開源了，有興趣的伙伴可以參與一下。日常開發(fā)項(xiàng)目需要用圖表組件的也可以安裝立即使用，使用風(fēng)格與Echarts完全一樣，但是效果還在完善，哈哈哈哈。不要嫌棄哈。覺得不錯(cuò)的記得給開源項(xiàng)目點(diǎn)一個(gè)小星星哦。還可以加入交流群，互相學(xué)習(xí)。回歸正題，

复制官方文檔地址：http://meichuang.org.cn/GettingStarted

复制Github地址：https://github.com/Yuan-Mr/mcCharts

工具介紹

這次我要分享的是使用ArkTs中的canvas實(shí)現(xiàn)簽名板的功能，canvas畫布估計(jì)大家都很熟悉，我們會(huì)用它經(jīng)常實(shí)現(xiàn)一些畫板或者圖表、表格之類的功能。canvas簽名板是我在開發(fā)APP過程中實(shí)現(xiàn)的一個(gè)功能，開發(fā)過程中也是遇到比較多的問題。我會(huì)按照以下幾點(diǎn)來講解開發(fā)整個(gè)過程：

一：痛點(diǎn)-屏幕旋轉(zhuǎn)

實(shí)現(xiàn)簽名板的第一個(gè)功能就是旋轉(zhuǎn)屏幕。旋轉(zhuǎn)屏幕在各種框架中都有不一樣的方式，比如：

· 在H5端，我們一般是使用CSS中的transform屬性中的rotate()方法來強(qiáng)制將網(wǎng)頁橫屏，然后實(shí)現(xiàn)一系列功能

· 在嵌套第三方APP中，我們一般是調(diào)用對(duì)應(yīng)的SDK提供的方法，即可實(shí)現(xiàn)旋轉(zhuǎn)屏幕

· .....

實(shí)現(xiàn)方式應(yīng)該還有很多吧，各有千秋，所以Harmony肯定也會(huì)提供對(duì)應(yīng)API方法來設(shè)置旋轉(zhuǎn)屏幕。而在Harmony的開發(fā)文檔里面查找與使用相關(guān)方案的結(jié)果成為我第一個(gè)大痛點(diǎn)。我大概列一下我的經(jīng)歷：

1. 首先我在查閱文檔先看到： @ohos.display 這個(gè)API主要是用來獲取屏幕一些相關(guān)的設(shè)備信息。一開始我還以為可以設(shè)置，一般可以獲取就可以設(shè)置，翻閱到對(duì)應(yīng)的屬性方法后，發(fā)現(xiàn)還是只能獲取不能設(shè)置，既然不行那就只能找其他API了。
2. 后面查閱相關(guān)博客發(fā)現(xiàn)還可以通過module.json5中配置字段為"orientation": "landscape"就可以設(shè)置橫屏了，但是這個(gè)是全局的，我是需要針對(duì)某個(gè)頁面的。
3. 最坑的在這個(gè)API：@ohos.settings。官網(wǎng)是這樣介紹的：“本模塊提供訪問設(shè)置數(shù)據(jù)項(xiàng)的能力”。那證明他是可以獲取或者修改的，我也查到了旋轉(zhuǎn)屏幕的屬性，文檔上是寫著可讀可寫，但是我引入對(duì)應(yīng)修改方法之后一直報(bào)該屬性只可讀。一開始我以為寫錯(cuò)了，查找了很多資料，都沒有找到相關(guān)案例。后面我又懷疑是我API版本的問題，把7.0跟6.0的版本都裝了一下，發(fā)現(xiàn)還是不行。我又換一個(gè)思路，因?yàn)橹耙恢倍际侵苯宇A(yù)覽沒有用模擬器；把模擬器需要的依賴都裝了一遍，最后運(yùn)行起來發(fā)現(xiàn)還是不行，崩潰了，搞了兩天。

最后我只能在博客尋找大佬的支持了，最終在大佬的提示下完成了這個(gè)功能。大佬說：“在頁面內(nèi)通過 Window 對(duì)象的 setPreferredOrientation() 方法實(shí)現(xiàn)橫豎屏切換”。以下是我實(shí)現(xiàn)的完整代碼：

复制// 在EntryAbility.ts中獲取窗口實(shí)例并賦值給全局變量，如此所有頁面都可以通過全局// 變量去修改窗口信息，不需要重新獲取
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('獲取主窗口的實(shí)例：' + JSON.stringify(data));
      globalThis.windowClass = data // 賦值給全局變量windowClass
    });
  }
}

复制// 在具體頁面中的使用
import window from '@ohos.window';
@Entry
@Componentstruct SignatureBoard {
  onPageShow() {
// 獲取旋轉(zhuǎn)的方向，具體可以查看對(duì)應(yīng)文檔
    let orientation = window.Orientation.LANDSCAPE_INVERTED;
    try {
      // 設(shè)置屏幕旋轉(zhuǎn)
      globalThis.windowClass.setPreferredOrientation(orientation, (err) = > {});
    } catch (exception) {
      console.error('設(shè)置失敗: ' + JSON.stringify(exception));
    }
  }
}

好了，第一個(gè)痛點(diǎn)已經(jīng)解決了。果然不懂就要問，或許在別人那里一下子就能幫你解決問題。還是得感謝大佬們?。?！

二：技術(shù)點(diǎn)-canvas畫布

解決了我們的痛點(diǎn)，那接下來就要實(shí)現(xiàn)我們的簽名功能了，這個(gè)很簡(jiǎn)單。因?yàn)樵谥熬鸵呀?jīng)開發(fā)過了，只要將對(duì)應(yīng)的語法轉(zhuǎn)成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 設(shè)置畫筆的屬性以及綁定手勢(shì)功能。在js中我們基本都是使用鼠標(biāo)事件來實(shí)現(xiàn)的，而在ArkTs中是通過手勢(shì)方法來監(jiān)聽手指在屏幕上的操作，有很多種，大家需要用到的可以去查看對(duì)應(yīng)的文檔

复制build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#fff')
        .onReady(() = > {
          this.context.lineWidth = 3; // 設(shè)置畫筆的粗細(xì)
          this.context.strokeStyle = "#000"; // 設(shè)置畫筆的顏色
          // 還可以設(shè)置很多，根據(jù)自己業(yè)務(wù)需要
        })
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: any) = > {
               // 手指按下的時(shí)候
            })
            .onActionUpdate((event: any) = > {
               // 手指移動(dòng)的時(shí)候
            })
            .onActionEnd(() = > {
               // 手指離開的時(shí)候
            })
        )
  }

2.3 我們實(shí)現(xiàn)的手勢(shì)的綁定，那么就可以實(shí)現(xiàn)手指在屏幕上滑動(dòng)之后畫布就繪畫出對(duì)應(yīng)的軌跡路線了，這里將會(huì)使用到一些畫布的功能。

复制@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) {
    // 起點(diǎn)
    this.context.moveTo(startX, startY);
    // 終點(diǎn)
    this.context.lineTo(endX, endY);
    // 調(diào)用 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;
              // 按下時(shí)的點(diǎn)作為起點(diǎn)
              this.lastX = event.localX;
              this.lastY = event.localY;
              // 創(chuàng)建一個(gè)新的路徑
              this.context.beginPath();
            })
            .onActionUpdate((event: any) = > {
              // 沒有按下就不管
              if (!this.isDown) return;
              const offsetX = event.localX
              const offsetY = event.localY
              // 調(diào)用繪制方法
              this.draw(this.lastX, this.lastY, offsetX, offsetY);
              // 把當(dāng)前移動(dòng)時(shí)的坐標(biāo)作為下一次的繪制路徑的起點(diǎn)
              this.lastX = offsetX;
              this.lastY = offsetY;
            })
            .onActionEnd(() = > {
              this.isDown = false;
              // 關(guān)閉路徑
              this.context.closePath();
            })
        )
    }
    .width('100%')
    .height('100%')
  }
}

以上就是我們實(shí)現(xiàn)簽名板的完整思路以及代碼了，有幾個(gè)需要注意的點(diǎn)是：

1. new PanGestureOptions實(shí)例的時(shí)候需要把distance設(shè)置小一點(diǎn)，值越小靈敏度就越高
2. PanGesture的回調(diào)方法中event參數(shù)，官方默認(rèn)給的屬性類型為GestureEvent。但是我在編輯器源碼中查看該屬性沒有我們定義我們想要的localX、localY，但是實(shí)際是有返回的，如果直接用編輯器會(huì)報(bào)錯(cuò)。所以需要將event定為any類型，這樣就可以獲取且不報(bào)錯(cuò)了。不過我不知道有沒有其他方案哈。懂得可以在評(píng)論區(qū)告訴我

這次的畫布簽名板的功能就講到這里了，希望能夠幫助你們，后續(xù)我還會(huì)分享出更多在項(xiàng)目中經(jīng)常用到的工具，感謝大家觀看。

審核編輯 黃宇