【共创季稿事节】画板应用：ArkTS 中的触摸事件处理

一、引言
画板（Drawing Board）是移动设备上最受欢迎的创意工具之一。从简单的随手涂鸦到复杂的设计草图，触摸画板为用户提供了最自然的手绘体验。

在 ArkTS 中实现画板应用，核心挑战在于如何处理触摸事件（TouchEvent）以及如何将触摸轨迹转化为可视化的图形。本文将讲解其中的关键技术点。

二、触摸事件基础
2.1 TouchEvent 的三阶段
触摸事件分为三个阶段：

阶段 TouchType 触发时机
按下 TouchType.Down 手指触碰屏幕
移动 TouchType.Move 手指在屏幕上滑动
抬起 TouchType.Up 手指离开屏幕
2.2 事件监听
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
// 开始新一笔
}
if (event.type === TouchType.Move) {
// 记录移动轨迹
}
if (event.type === TouchType.Up) {
// 结束当前笔
}
})
三、简化设计
考虑到 ArkTS 中 Canvas API 的复杂性，本文的简化画板使用文本组件状态来模拟绘画交互：

@State strokes: number = 0;
@State touchInfo: string = ‘在白色区域触摸画图’;
当用户触摸画布区域时：

TouchType.Down：更新提示信息为"触摸中…"
TouchType.Up：增加笔画计数
这种简化设计虽然不能实际绘制图形轨迹，但演示了 ArkTS 中最核心的触摸事件处理模式。

四、颜色与粗细选择
4.1 颜色选择器
ForEach(this.colors, (c: string) => {
Text(‘’)
.width(28).height(28)
.borderRadius(14)
.backgroundColor©
.border({ width: this.currentColor === c ? 3 : 0, color: ‘#FFF’ })
.onClick(() => { this.currentColor = c; })
})
选中的颜色圆点会显示白色边框作为高亮。

4.2 粗细选择
ForEach([2, 4, 6, 8, 12], (w: number) => {
Text(‘’)
.width(20 + w).height(20 + w)
.borderRadius((20 + w) / 2)
.backgroundColor(‘#333’)
.opacity(this.currentWidth === w ? 1.0 : 0.3)
.onClick(() => { this.currentWidth = w; })
})
展示不同粗细的圆点，选中的不透明显示。

五、移动触摸与桌面交互的差异
在移动端开发中，触摸事件（TouchEvent）与鼠标事件（MouseEvent）有本质差异：

特性 触摸事件 鼠标事件
输入方式 手指/触控笔 鼠标/触控板
多点触控 支持 不支持
事件对象 TouchEvent.touches[] MouseEvent.clientX/Y
点击精度 较低（手指面积大） 较高（光标精确）
对于画板应用，正确的触摸处理需要关注 event.touches 数组中的第一个触摸点。

六、扩展方向
完整的画板应用可以在以下方向扩展：

实际笔迹绘制：使用 Canvas 组件 + Path2D API 绘制触摸轨迹
撤销/重做：维护一个绘制操作栈，支持撤销上一步操作
图片导出：将画布内容导出为 PNG 图片
手势识别：识别简单的手势（画圆、画方）并自动规整
七、总结
画板应用让我们接触到了移动开发中最核心的交互方式——触摸事件。在 ArkTS 中，TouchEvent 提供了完整的触摸处理能力，支持多点触控。本文由于篇幅和 Canvas 绘图的复杂度限制采用了简化方案，但在实际产品中，结合 Canvas 组件可以实现真正的笔迹绘制。