作為一名web前端開發(fā)者,還在持續(xù)自學(xué)HarmonyOS,學(xué)習(xí)過程中我會(huì)分享自己做的一些工具,包括開發(fā)難點(diǎn)與解決方案,希望對(duì)各位HarmonyOS開發(fā)者有所啟發(fā)。
這次我要分享的是使用ArkTS中的canvas實(shí)現(xiàn)簽名板的功能,canvas畫布大家都很熟悉,我們會(huì)用它經(jīng)常實(shí)現(xiàn)一些畫板或者圖表、表格之類的功能。canvas簽名板是我在開發(fā)APP過程中實(shí)現(xiàn)的一個(gè)功能,開發(fā)過程中也是遇到比較多的問題。我會(huì)按照以下幾點(diǎn)來講解開發(fā)整個(gè)過程:
屏幕旋轉(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)方式還有很多,各有千秋,相信HarmonyOS也會(huì)提供對(duì)應(yīng)API方法來設(shè)置旋轉(zhuǎn)屏幕。
而我自己則是在頁面內(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)); } } }
(左右滑動(dòng)查看更多)
二
canvas畫布
解決了屏幕旋轉(zhuǎn)問題,接下來實(shí)現(xià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%') } }(左右滑動(dòng)查看更多)
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í)候 }) ) }
(左右滑動(dòng)查看更多)
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%') } }
(左右滑動(dòng)查看更多)
以上就是我們實(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ò)了。
這次的畫布簽名板的功能就分享這些,希望能夠幫助各位開發(fā)者,后續(xù)會(huì)繼續(xù)分享出更多在項(xiàng)目中經(jīng)常用到的工具。
審核編輯:湯梓紅
-
Web
+關(guān)注
關(guān)注
2文章
1254瀏覽量
69202 -
屏幕
+關(guān)注
關(guān)注
6文章
1185瀏覽量
55669 -
開發(fā)者
+關(guān)注
關(guān)注
1文章
541瀏覽量
16956 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
1954瀏覽量
29897
原文標(biāo)題:【開發(fā)者說】手把手教你使用ArkTS中的canvas實(shí)現(xiàn)簽名板功能
文章出處:【微信號(hào):HarmonyOS_Dev,微信公眾號(hào):HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論