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[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语言##仓颉##休闲娱乐#