100行程式碼實現HarmonyOS“畫圖”應用，eTS開發走起！

HarmonyOS開發者社群發表於2022-03-30

行程

本期我們給大家帶來的是“畫圖”應用開發者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所示。