大家上午好，今天分享一下倉(cāng)頡開(kāi)發(fā)語(yǔ)言實(shí)現(xiàn)的畫(huà)板案例。

最近總是有同學(xué)說(shuō)我寫(xiě)ArkTS冒充倉(cāng)頡，為了自證清白，截圖給大家看一下，確實(shí)是倉(cāng)頡文件：

image.png

倉(cāng)頡提供了畫(huà)布組件Canvas，我們所有的繪制工作都要在畫(huà)布上進(jìn)行，所以首先在頁(yè)面添加一個(gè)足夠大的畫(huà)布組件：

Canvas(this.context)
.backgroundColor(0xffff00)
.width(100.percent)
.height(100.percent)

看到上面的代碼，大家可能會(huì)問(wèn)this.context是什么，幽藍(lán)君將它比作畫(huà)筆，使用畫(huà)筆在畫(huà)布上作畫(huà)，context可以繪制圖形、文本、圖片等內(nèi)容。畫(huà)筆的樣式是可以修改的，比如粗細(xì)、顏色等等：

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)
}

今天我們做的是讓畫(huà)筆跟隨我們觸摸過(guò)的軌跡繪制曲線(xiàn)。

image.png

要實(shí)現(xiàn)這個(gè)需求，首先我們需要知道繪制國(guó)的軌跡坐標(biāo)，才能在畫(huà)布上準(zhǔn)確的繪制。

為了讓繪制更加準(zhǔn)確，我使用了三次貝塞爾曲線(xiàn)，這樣我需要記錄下至少兩個(gè)點(diǎn)，然后將這個(gè)點(diǎn)的中點(diǎn)也傳入貝塞爾曲線(xiàn)的坐標(biāo)。

觸摸滑動(dòng)事件可以使用onTouch，onTouch的事件有幾種類(lèi)型，如Down、Move等，在倉(cāng)頡中對(duì)類(lèi)型我使用了非常規(guī)的判斷方式：

.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
        }
    })

實(shí)現(xiàn)繪制曲線(xiàn)后，可以使用clearRect方法實(shí)現(xiàn)對(duì)畫(huà)布的清空。

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

這樣一個(gè)簡(jiǎn)單的畫(huà)板效果就實(shí)現(xiàn)啦，感謝閱讀。[#](javascript:;)[#HarmonyOS語(yǔ)言](javascript:;)##倉(cāng)頡##休閑娛樂(lè)#