怎么使用JavaScript+HarmonyOS實現一個手繪板

這篇“怎么使用JavaScript+HarmonyOS實現一個手繪板”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用JavaScript+HarmonyOS實現一個手繪板”文章吧。

效果展示

原理分析

1.繪制原理

首先，我們需要將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;
}

以上就是關于“怎么使用JavaScript+HarmonyOS實現一個手繪板”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。