?JavaScript+HarmonyOS?實現一個手繪板
前言
最近在學習openHarmony，恰好之前了解過canvas，所以本篇文章分享一下我實現的一個手繪板，利用openHarmony內置的API cnavas組件實現。
這是一個手繪板，并且可以根據滑動屏幕速度，動態(tài)生成線條大小，當用戶觸摸屏幕，會生成線條，并且速度越快，線條越細。
效果展示
原理分析
1.繪制原理
使用前，需要線了解canvas組件，可以參考harmonyOS開發(fā)者文檔，文檔介紹的非常詳細，這里就不多介紹了
首先，我們需要將canvas上下文對象，需要在觸摸移動事件中綁定，因為我們是通過觸摸來生成對應線條的。
然后，屬性選擇lineCap，屬性值有三種：butt、round、square，我嘗試了后發(fā)現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.線條粗細
想要通過速度來計算線條粗細，那么可以是需要獲取兩點之間的時間，通過時間和距離得到速度
當觸發(fā)touchmove事件，將當前時間戳存儲起來，通過上一次觸發(fā)事件獲得的時間-當前觸發(fā)事件獲得的時間，就可以得到兩次觸發(fā)事件的事件間隔，此時我們就獲得了兩點之間的時間
再計算兩點之間的距離（平方和再開根號），通過 路程/時間 = 速度計算出兩點之間的速度，從而可以動態(tài)生成線條粗細
// 計算線條粗細
const currTime = Date.now()
if(this.startTime !== 0){
const duration = currTime - this.startTime
// 傳入倒數第二個點和最后一個點，和持續(xù)時間，會返回加速度
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
// 傳入倒數第二個點和最后一個點，和持續(xù)時間，會返回加速度
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;
}總結
不足點：使用體驗不是很好，后續(xù)還需要優(yōu)化
最后，通過自定義組件，加深對HarmonyOS的開發(fā)，共建鴻蒙生態(tài)
到此這篇關于 JavaScript+HarmonyOS 實現一個手繪板的文章就介紹到這了,更多相關 JavaScript 手繪板內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要是對html與javascript在瀏覽器中的加載順序問題進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
encode腳本和normal腳本混用的問題與解決方法...2007-03-03
這篇文章主要介紹了在小程序中使用騰訊視頻插件播放教程視頻的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了iframe高度自適應及隱藏滾動條的實例詳解的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了使用jsonp跨域調用百度js實現搜索框智能提示，感興趣的小伙伴們可以參考一下2016-08-08
微信小程序基于slider組件動態(tài)修改標簽透明度的方法示例
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標簽透明度的方法,可通過slider組件拖動實現圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下2017-12-12
本文主要介紹了window.print()打印html網頁的兩種方法實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
使用JS批量選中功能實現更改數據庫中的status狀態(tài)值（批量展示）
我們在開發(fā)項目的時候經常會在后臺管理時用到批量展示功能來動態(tài)的修改數據庫的值。下面以修改數據庫的status狀態(tài)值來實現批量展示功能2016-11-11
這篇文章主要介紹了微信公眾號H5之微信分享常見錯誤和問題(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要為大家詳細介紹了JS模擬實現京東快遞單號查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11