#夏日挑戰賽# HarmonyOS 實作一個手繪闆

本文正在參加星光計劃3.0–夏日挑戰賽

前言

最近在學習openHarmony，恰好之前了解過canvas，是以本篇文章分享一下我實作的一個手繪闆，利用openHarmony内置的API cnavas元件實作。

介紹

這是一個手繪闆，并且可以根據滑動螢幕速度，動态生成線條大小，當使用者觸摸螢幕，會生成線條，并且速度越快，線條越細。

效果展示

原理分析

1.繪制原理

使用前，需要線了解canvas元件，可以參考harmonyOS開發者文檔，文檔介紹的非常詳細，這裡就不多介紹了

首先，我們需要将canvas上下文對象，需要在觸摸移動事件中綁定，因為我們是通過觸摸來生成對應線條的。

然後，屬性選擇lineCap，屬性值有三種：butt、round、square，我嘗試了後發現round效果比較好。

• 屬性值為butt時的效果

• 屬性值為round

  

• 屬性值為square

  

  其實butt效果也還行，就是鋸齒太嚴重，雖然API中有内置抗鋸齒屬性，但是不知道為啥設定了沒有效果，可能粒度太大了，現在這個粒度已經有點卡了，如果把粒度小設定小一點估計更卡

  綜上還是選擇了round，它會将線端點以圓形結束，是以效果上更圓潤

最後将數組中的最後一個值取出，作為moveTo的坐标，将滑鼠移動後的點作為lineTo的坐标，然後再通過stroke就能繪制出圖像。

繪制直線，通常使用moveTo ()與lineTo ()兩個方法。. moveTo ()方法用于将畫筆移至指定點并以改點為直線的開始點，lineTo ()則為結束點。

const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        // 向線條的每個末端添加圓形線帽。
        this.ctx.lineCap = 'square'
        // 每次将數組中最後一個值取出，作為起始點
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
           

2.線條粗細

想要通過速度來計算線條粗細，那麼可以是需要擷取兩點之間的時間，通過時間和距離得到速度

當觸發touchmove事件，将目前時間戳存儲起來，通過上一次觸發事件獲得的時間-目前觸發事件獲得的時間，就可以得到兩次觸發事件的事件間隔，此時我們就獲得了兩點之間的時間

再計算兩點之間的距離（平方和再開根号），通過

路程/時間 = 速度

計算出兩點之間的速度，進而可以動态生成線條粗細

// 計算線條粗細
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            // 傳入倒數第二個點和最後一個點，和持續時間，會傳回加速度
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime
           

完整代碼

index.js

// @ts-nocheck
export default {
    data: {
        ctx:'',
        ArrX:[],
        ArrY:[],
        //        開始時間
        startTime:0,
        lineWidth:14
    },
    // 偏移很多
    touchstart(e){
        //        開始時間清空
        this.startTime = 0
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
    },
    //    計算最後兩點的速度
    speed(x1,y1,x2,y2,s){
        const x = Math.abs(x1-x2)*Math.abs(x1-x2)
        const y = Math.abs(y1-y2)*Math.abs(y1-y2)
        return Math.sqrt(x+y)/s
    },
    touchmove(e){
        // 計算線條粗細
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            // 傳入倒數第二個點和最後一個點，和持續時間，會傳回加速度
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime

        const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        // 向線條的每個末端添加圓形線帽。
        this.ctx.lineCap = 'square'
        // 每次将數組中最後一個值取出，作為起始點
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
    },
    touchend(e){
        this.startTime = 0
    }
}
           

index.hml

<div class="container">
    <canvas ref="canvas" class="canvas" @touchstart="touchstart"
            @touchmove="touchmove" @touchend="touchend"/>
</div>
           

index.css

.container{
    margin: 50px;
}
.canvas{
    height: 100%;
    width: 100%;
    background-color: #eee;
    border: 1px solid #ffc300;
}

           

總結📝

不足點：使用體驗不是很好，後續還需要優化

最後，通過自定義元件，加深對

HarmonyOS

的開發，共建鴻蒙生态！

附件連結：https://ost.51cto.com/resource/2175