介绍

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.c...

2.创立eTS工程

(1) 关上DevEco Studio，在菜单栏抉择“File > New > New Project”。
(2) 抉择工程模板“Empty Ability”，而后点击Next。

图2 抉择工程模板
(3) 工程配置时，留神将“Language”配置为“eTS”。


图3 工程配置
(4) 最初点击Finish，DevEco Studio就会主动创立一个eTS工程。

三、代码实现

工程创立实现后，能够看到文件目录构造如图4所示。其中，“ets”为代码实现目录，申明式UI实现的布局及逻辑代码都放在这个目录外面。


图4 文件目录构造
本次“画图”利用的代码都放在“entry/src/main/ets/default/pages/index.ets”文件中。
残缺的实现代码可从华为开发者论坛获取：

https://developer.huawei.com/...
上面为大家介绍两段要害代码：

(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.c...
组件阐明：
https://developer.harmonyos.c...
欢送更多开发者与咱们共享开发成绩，分享技术解读与教训心得!