本期我們給大家帶來的是“畫圖”應用開發者Rick的分享，希望能給你的HarmonyOS開發之旅帶來啟發~
介紹
2021年的華為開發者大會(HDC2021)上，HarmonyOS 發布了新一代的宣告式UI框架——方舟開發框架(ArkUI)，ArkUI框架引入了基于TS擴展的宣告式開發范式，讓開發變得更加簡潔、高效！
已經有很多開發者在使用eTS(extended TypeScript)語言，基于宣告式開發范式開發應用了，本期我們要介紹的就是eTS開發先行者Rick的分享——100行代碼實作“畫圖”應用，帶大家一起領略eTS語言的簡潔之美~
一、實作效果
100行代碼實作的“畫圖”應用是怎樣的？我們先來看看實作效果吧：
圖1 實作效果
“畫圖”應用除了實作必須的畫圖功能外，還能夠設定畫筆的顏色和大小，且提供了撤銷功能，可謂短小而精美了，你心動了嗎？是否也想試試？趕緊跟隨Rick的開發程序，也來嘗試一下吧！
二、開發程序
1. 安裝DevEco Studio
eTS開發需安裝DevEco Studio V3.0.0.601 Beta1或更高版本，
DevEco Studio下載地址：https://developer.harmonyos.com/cn/develop/deveco-studio/
2. 創建eTS工程
(1) 打開DevEco Studio，在選單欄選擇“File > New > New Project”，
(2) 選擇工程模板“Empty Ability”，然后點擊Next，
圖2 選擇工程模板
(3) 工程配置時，注意將“Language”配置為“eTS”，
圖3 工程配置
(4) 最后點擊Finish，DevEco Studio就會自動創建一個eTS工程，
3. 代碼實作
工程創建完成后，可以看到檔案目錄結構如圖4所示，其中，“ets”為代碼實作目錄，宣告式UI實作的布局及邏輯代碼都放在這個目錄里面，
圖4 檔案目錄結構
本次“畫圖”應用的代碼都放在“entry/src/main/ets/default/pages/index.ets”檔案中，
完整的實作代碼可從華為開發者論壇獲取：
https://developer.huawei.com/consumer/cn/forum/topic/0203718600132550166?fid=0101587866109860105&pid=0303718600132550762
下面為大家介紹兩段關鍵代碼：
(1) 畫圖功能實作代碼
// 畫布
@Builder Canvas() {
ForEach(this.pathInfoArray, (pathInfo) => OnePath({ pathInfo: pathInfo })) // 遍歷構建所有畫圖路徑
Stack() // 覆寫層，用于接收觸摸事件，實作畫圖
.width('100%')
.height('100%')
.onTouch((event: TouchEvent) => {
switch (event.type) {
case TouchType.Down: // 按下時，新建一潭訓圖路徑
this.pathInfoArray.push(new PathInfo(`M${event.touches[0].x} ${event.touches[0].y}`, this.paintSize, this.paintColor))
break
case TouchType.Move: // 移動或抬起時，補充畫圖路徑資訊
case TouchType.Up:
this.pathInfoArray[this.pathInfoArray.length-1].commands += `L${event.touches[0].x} ${event.touches[0].y}`
break
}
})
}
以上代碼通過Canvas組件定義畫布，再通過onTouch組件監聽觸摸事件實作了畫圖功能，
(2) “設定畫筆”的界面和功能實作代碼
// 設定畫筆組件
@Builder SetPaint() {
Panel(this.showSetPaint) {
Column({ space: 30 }) {
Row() {
Text('畫圖效果：')
Path()
.width(200)
.height(50)
.backgroundColor(Color.White)
.fillOpacity(0) // 不填充，只要stroke
.commands(`M${vp2px(10)} ${vp2px(10)} S${vp2px(100)} ${vp2px(70)} ${vp2px(190)} ${vp2px(10)}`) // stroke路徑，弧線
.strokeWidth(this.paintSize) // stroke寬度
.stroke(this.paintColor) // stroke顏色
}
Row() {
Text('畫筆大小：')
Slider({ value: this.paintSize, min: this.PAINT_SIZE_MIN, max: this.PAINT_SIZE_MAX })
.onChange((value) => this.paintSize = value) // 改變畫筆大小
.width(200)
}
Row() {
Text('畫筆顏色：')
ForEach(this.COLORS, color => {
Stack() {
Stack()
.width(color == this.paintColor ? 26 : 20) // 若是當前畫筆顏色，則放大一點顯示
.height(color == this.paintColor ? 26 : 20)
.backgroundColor(color)
.onClick(() => this.paintColor = color) // 點擊改變畫筆顏色
}
.width(32)
.height(32)
})
}
}.width('100%').margin({ top: 30 })
}.onChange((value: any) => {
if (value.mode == 'mini') { // 最小顯示狀態時隱藏，不隱藏會阻擋觸摸事件
this.showSetPaint = false
}
})
}
以上代碼通過Panel、Column和Row等容器組件實作了“設定畫筆”界面的布局，
此界面包含三個部分：畫筆顏色、畫筆大小和畫圖效果，代碼中，通過Stack組件展示畫筆的顏色，通過Slider組件調整畫筆大小，通過Path組件繪制弧線來展示畫圖效果，最終實作效果如圖5所示，
圖5 “設定畫筆”界面
至此，“畫圖”應用就開發完成啦！感興趣的小伙伴也可以去嘗試開發哦~
三、學習資源
使用eTS語言開發，僅用短短100行左右的代碼就實作了“畫圖”應用的界面和功能，這正是eTS語言的魅力所在——簡潔、高效！感興趣的小伙伴也趕緊加入我們，開啟你的eTS開發之旅吧~
我們為大家匯總了以下eTS開發的學習資源，強烈建議收藏哦！
宣告式語法：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-general-ui-concepts-0000001215268053
組件說明：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-universal-events-touch-0000001158261221
歡迎更多開發者與我們共享開發成果，分享技術解讀與經驗心得！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/452906.html
標籤：其他
上一篇：【Harmony OS】【JAVA UI】webView 影片加載資源加載影片互動
下一篇：陣列陣列無法正確使用表情符號