使用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));
}
}
}
此次開發文檔參考[qr23.cn/AKFP8k
]
二、canvas畫布
鴻蒙開發文檔或者添加+mau123789是v直接領
解決了屏幕旋轉問題,接下來實現簽名功能。因為在之前就已經開發過,只要將對應的語法轉成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%')
}
}
以上就是我們實現簽名板的完整思路以及代碼了,有幾個需要注意的點是:
- new PanGestureOptions實例的時候需要把distance設置小一點,值越小靈敏度就越高
- PanGesture的回調方法中event參數,官方默認給的屬性類型為GestureEvent。但是我在編輯器源碼中查看該屬性沒有我們定義我們想要的localX、localY,但是實際是有返回的,如果直接用編輯器會報錯。所以需要將event定為any類型,這樣就可以獲取且不報錯了。
審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
Canvas
+關注
關注
0文章
15瀏覽量
10952 -
鴻蒙
+關注
關注
55文章
1769瀏覽量
42153 -
HarmonyOS
+關注
關注
79文章
1878瀏覽量
29336
發布評論請先 登錄
相關推薦
使用ArkTS中的canvas實現簽名板功能
作為一名web前端開發者,還在持續自學HarmonyOS,學習過程中我會分享自己做的一些工具,包括開發難點與解決方案,希望對各位HarmonyOS開發者有所啟發。
鴻蒙ArkTS的起源和簡介
,ArkTS也會結合應用開發及運行的其他方面需求持續演進:
更完善的類型系統
我們已經設計并實現了專門運行時,利用ArkTS的類型輸入,在程序執行一開始就獲得較高的運行性能(不像其它傳
發表于 01-16 16:23
鴻蒙語言ArkTS(更好的生產力與性能)
ArkTS是鴻蒙生態的應用開發語言
ArkTS提供了聲明式UI范式、狀態管理支持等相應的能力,讓開發者可以以更簡潔、更自然的方式開發應用。
同時,它在保持TypeScript(簡稱TS)基本語法
發表于 02-17 15:56
鴻蒙實戰項目開發:【短信服務】
||---SmsModel.ets// 封裝短信類
具體實現
發送短信功能在SmsModel中 :
/*
* Copyright (c) 2022 Huawei Device Co., Ltd.
發表于 03-03 21:29
使用canvas畫隨機運動小球的教程
,可以先創建一個構造函數;給構造函數添加對應的屬性和方法;實例化出多個對象,并且保存在數組中;遍歷每個對象,實現畫圓;間隔修改每個球的x,y值。先準備畫布確定對應的寬高:<canvas
發表于 03-23 10:44
如何使用鴻蒙canvas.drawPictur()繪制一張資源圖片?
安卓中使用canvas.drawBitmap(); 發現鴻蒙中有個canvas.drawPictur()方法,但是不知道如何構建參數,達到引用資源圖片的目的。 或者我調用的繪制圖片方法不對,求指教???
發表于 05-07 11:51
請問鴻蒙自定義控件中如何刷新canvas?
自定義控件通過addDrawTask在DrawTask中使用canvas進行繪制,需要實現一個動畫效果,需要刷新一下canvas,不知道通過哪個方法進行刷新
發表于 05-31 16:16
HarmonyOS/OpenHarmony應用開發-ArkTS畫布組件Canvas
提供畫布組件,用于自定義繪制圖形。該組件從API Version 8開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。子組件,不支持。接口: Canvas(context
發表于 02-27 09:49
手把手教你使用ArkTS中的canvas實現簽名板功能
問題,接下來實現簽名功能。因為在之前就已經開發過,只要將對應的語法轉成 ArkTS 的語法就好。以下是代碼解析:2.1 按照官方文檔使用 canva
發表于 12-20 10:33
如何通過Canvas組件實現涂鴉功能
新增的功能可以幫助開發者開發出更流暢、更美觀的應用。本篇文章將為大家分享如何通過Canvas組件實現涂鴉功能,用戶可以選擇空白畫布或者簡筆圖進行自由繪畫。
鴻蒙開發之ArkTS基礎知識
一、ArkTS簡介 ArkTS是HarmonyOS優選的主力應用開發語言。它在TypeScript(簡稱TS)的基礎上,匹配了鴻蒙的ArkUI框架,擴展了聲明式UI、狀態管理等相應的能力,讓開
鴻蒙OS開發實例:【ArkTS類庫多線程@Concurrent裝飾器校驗并發函數】
在使用TaskPool時,執行的并發函數需要使用該裝飾器修飾,否則無法通過相關校驗。從API version 9開始,該裝飾器支持在ArkTS卡片中使用。
評論