HarmonyOS NEXT仓颉开发语言实现画板案例
大家上午好，今天分享一下仓颉开发语言实现的画板案例。最近总是有同学说我写ArkTS冒充仓颉，为了自证清白，截图给大家看一下，确实是仓颉文件：
仓颉提供了画布组件Canvas，我们所有的绘制工作都要在画布上进行，所以首先在页面添加一个足够大的画布组件：
Canvas(this.context)
.backgroundColor(0xffff00)
.width(100.percent)
.height(100.percent)看到上面的代码，大家可能会问this.context是什么，幽蓝君将它比作画笔，使用画笔在画布上作画，context可以绘制图形、文本、图片等内容。画笔的样式是可以修改的，比如粗细、颜色等等：
var settings: RenderingContextSettings = RenderingContextSettings(antialias: true)
var context: CanvasRenderingContext2D = CanvasRenderingContext2D(this.settings)
var path2Db: Path2D = Path2D()
protected open func onPageShow(){
context.lineWidth(5)
context.strokeStyle(0x0000ff)
}今天我们做的是让画笔跟随我们触摸过的轨迹绘制曲线。
要实现这个需求，首先我们需要知道绘制国的轨迹坐标，才能在画布上准确的绘制。
为了让绘制更加准确，我使用了三次贝塞尔曲线，这样我需要记录下至少两个点，然后将这个点的中点也传入贝塞尔曲线的坐标。
触摸滑动事件可以使用onTouch，onTouch的事件有几种类型，如Down、Move等，在仓颉中对类型我使用了非常规的判断方式：
.onTouch({e:TouchEvent =>
var pointX = e.touches.x;
var pointY = e.touches.y;
if(e.eventType.toString() == 'Move'){
let curX = (pointX + this.pointX1)/Float64(2)
let curY = (pointY + this.pointY1)/Float64(2)
this.path2Db.bezierCurveTo(this.pointX1,this.pointY1,this.pointX2,this.pointY2,curX,curY)
this.pointX1 = pointX
this.pointY1 = pointY
this.pointX2 = curX
this.pointY2 = curY
this.context.stroke(this.path2Db)
}else if(e.eventType.toString() == 'Down'){
this.path2Db.moveTo(e.touches.x, e.touches.y);
this.pointX1 = pointX
this.pointY1 = pointY
this.pointX2 = pointX
this.pointY2 = pointY
}
})实现绘制曲线后，可以使用clearRect方法实现对画布的清空。
Button('清空').onClick({e =>
this.context.clearRect(0, 0, 3000, 3000)
})这样一个简单的画板效果就实现啦，感谢阅读。##HarmonyOS语言##仓颉##休闲娱乐#
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]