大家上午好，今天分享一下仓颉开发语言实现的画板案例。
最近总是有同学说我写 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[0].x; var pointY = e.touches[0].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[0].x, e.touches[0].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 语言 ##仓颉 ##休闲娱乐 #
评论