共计 2731 个字符，预计需要花费 7 分钟才能阅读完成。
介绍
2021 年的华为开发者大会 (HDC2021) 上，HarmonyOS 公布了新一代的申明式 UI 框架——方舟开发框架(ArkUI)。ArkUI 框架引入了基于 TS 扩大的申明式开发范式，让开发变得更加简洁、高效！
曾经有很多开发者在应用 eTS(extended TypeScript)语言，基于申明式开发范式开发利用了。本期咱们要介绍的就是 eTS 开发先行者 Rick 的分享——100 行代码实现“画图”利用，带大家一起领略 eTS 语言的简洁之美~
一、实现成果
100 行代码实现的“画图”利用是怎么的？咱们先来看看成果吧：
图 1 实现成果
“画图”利用除了实现必须的画图性能外，还可能设置画笔的色彩和大小，且提供了撤销性能，堪称短小而精美了。你心动了吗？是否也想试试？连忙追随 Rick 的开发过程，也来尝试一下吧！
二、开发过程
- 装置 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…
欢送更多开发者与咱们共享开发成绩，分享技术解读与教训心得!
