HarmonyOS NEXT仓颉开发语言实现画板案例

大家上午好，今天分享一下仓颉开发语言实现的画板案例。
最近总是有同学说我写ArkTS冒充仓颉，为了自证清白，截图给大家看一下，确实是仓颉文件：

仓颉提供了画布组件Canvas，我们所有的绘制工作都要在画布上进行，所以首先在页面添加一个足够大的画布组件：

1. Canvas(this.context)
2. .backgroundColor(0xffff00)
3. .width(100.percent)
4. .height(100.percent)

复制代码

看到上面的代码，大家可能会问this.context是什么，幽蓝君将它比作画笔，使用画笔在画布上作画，context可以绘制图形、文本、图片等内容。画笔的样式是可以修改的，比如粗细、颜色等等：

1. var settings: RenderingContextSettings = RenderingContextSettings(antialias: true)
2. var context: CanvasRenderingContext2D = CanvasRenderingContext2D(this.settings)
3. var path2Db: Path2D = Path2D()
6. protected open func onPageShow(){
7.   context.lineWidth(5)
8.   context.strokeStyle(0x0000ff)
9. }

复制代码

今天我们做的是让画笔跟随我们触摸过的轨迹绘制曲线。

要实现这个需求，首先我们需要知道绘制国的轨迹坐标，才能在画布上准确的绘制。
为了让绘制更加准确，我使用了三次贝塞尔曲线，这样我需要记录下至少两个点，然后将这个点的中点也传入贝塞尔曲线的坐标。
触摸滑动事件可以使用onTouch，onTouch的事件有几种类型，如Down、Move等，在仓颉中对类型我使用了非常规的判断方式：

1. .onTouch({e:TouchEvent =>
2.     var pointX = e.touches[0].x;
3.     var pointY = e.touches[0].y;
4.     if(e.eventType.toString() == 'Move'){
5.             let curX = (pointX + this.pointX1)/Float64(2)
6.             let curY = (pointY + this.pointY1)/Float64(2)
7.             this.path2Db.bezierCurveTo(this.pointX1,this.pointY1,this.pointX2,this.pointY2,curX,curY)
8.             this.pointX1 = pointX
9.             this.pointY1 = pointY
10.             this.pointX2 = curX
11.             this.pointY2 = curY
12.             this.context.stroke(this.path2Db)
13.     }else if(e.eventType.toString() == 'Down'){
14.          this.path2Db.moveTo(e.touches[0].x, e.touches[0].y);
15.             this.pointX1 = pointX
16.             this.pointY1 = pointY
17.             this.pointX2 = pointX
18.             this.pointY2 = pointY
19.         }
20.     })

复制代码

实现绘制曲线后，可以使用clearRect方法实现对画布的清空。

1. Button('清空').onClick({e =>  
2.         this.context.clearRect(0, 0, 3000, 3000)
3.   })

复制代码

这样一个简单的画板效果就实现啦，感谢阅读。​​#​​​​#HarmonyOS语言​​##仓颉##休闲娱乐#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！