?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板
前言
最近在學(xué)習(xí)openHarmony，恰好之前了解過(guò)canvas，所以本篇文章分享一下我實(shí)現(xiàn)的一個(gè)手繪板，利用openHarmony內(nèi)置的API cnavas組件實(shí)現(xiàn)。
這是一個(gè)手繪板，并且可以根據(jù)滑動(dòng)屏幕速度，動(dòng)態(tài)生成線條大小，當(dāng)用戶觸摸屏幕，會(huì)生成線條，并且速度越快，線條越細(xì)。
效果展示
原理分析
1.繪制原理
使用前，需要線了解canvas組件，可以參考harmonyOS開(kāi)發(fā)者文檔，文檔介紹的非常詳細(xì)，這里就不多介紹了
首先，我們需要將canvas上下文對(duì)象，需要在觸摸移動(dòng)事件中綁定，因?yàn)槲覀兪峭ㄟ^(guò)觸摸來(lái)生成對(duì)應(yīng)線條的。
然后，屬性選擇lineCap，屬性值有三種：butt、round、square，我嘗試了后發(fā)現(xiàn)round效果比較好。
屬性值為butt時(shí)的效果：
屬性值為round：
屬性值為square：
其實(shí)butt效果也還行，就是鋸齒太嚴(yán)重，雖然API中有內(nèi)置抗鋸齒屬性，但是不知道為啥設(shè)置了沒(méi)有效果，可能粒度太大了，現(xiàn)在這個(gè)粒度已經(jīng)有點(diǎn)卡了，如果把粒度小設(shè)置小一點(diǎn)估計(jì)更卡
綜上還是選擇了round，它會(huì)將線端點(diǎn)以圓形結(jié)束，所以效果上更圓潤(rùn)
最后將數(shù)組中的最后一個(gè)值取出，作為moveTo的坐標(biāo)，將鼠標(biāo)移動(dòng)后的點(diǎn)作為lineTo的坐標(biāo)，然后再通過(guò)stroke就能繪制出圖像。
繪制直線，通常使用moveTo ()與lineTo ()兩個(gè)方法。. moveTo ()方法用于將畫(huà)筆移至指定點(diǎn)并以改點(diǎn)為直線的開(kāi)始點(diǎn)，lineTo ()則為結(jié)束點(diǎn)。
const el = this.$refs.canvas;
this.ctx = el.getContext('2d')
this.ctx.lineWidth =this.lineWidth/2
this.ctx.beginPath()
// 向線條的每個(gè)末端添加圓形線帽。
this.ctx.lineCap = 'square'
// 每次將數(shù)組中最后一個(gè)值取出，作為起始點(diǎn)
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.線條粗細(xì)
想要通過(guò)速度來(lái)計(jì)算線條粗細(xì)，那么可以是需要獲取兩點(diǎn)之間的時(shí)間，通過(guò)時(shí)間和距離得到速度
當(dāng)觸發(fā)touchmove事件，將當(dāng)前時(shí)間戳存儲(chǔ)起來(lái)，通過(guò)上一次觸發(fā)事件獲得的時(shí)間-當(dāng)前觸發(fā)事件獲得的時(shí)間，就可以得到兩次觸發(fā)事件的事件間隔，此時(shí)我們就獲得了兩點(diǎn)之間的時(shí)間
再計(jì)算兩點(diǎn)之間的距離（平方和再開(kāi)根號(hào)），通過(guò) 路程/時(shí)間 = 速度計(jì)算出兩點(diǎn)之間的速度，從而可以動(dòng)態(tài)生成線條粗細(xì)
// 計(jì)算線條粗細(xì)
const currTime = Date.now()
if(this.startTime !== 0){
const duration = currTime - this.startTime
// 傳入倒數(shù)第二個(gè)點(diǎn)和最后一個(gè)點(diǎn)，和持續(xù)時(shí)間，會(huì)返回加速度
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:[],
// 開(kāi)始時(shí)間
startTime:0,
lineWidth:14
},
// 偏移很多
touchstart(e){
// 開(kāi)始時(shí)間清空
this.startTime = 0
this.ArrX.push(e.touches[0].localX)
this.ArrY.push(e.touches[0].localY)
},
// 計(jì)算最后兩點(diǎn)的速度
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){
// 計(jì)算線條粗細(xì)
const currTime = Date.now()
if(this.startTime !== 0){
const duration = currTime - this.startTime
// 傳入倒數(shù)第二個(gè)點(diǎn)和最后一個(gè)點(diǎn)，和持續(xù)時(shí)間，會(huì)返回加速度
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()
// 向線條的每個(gè)末端添加圓形線帽。
this.ctx.lineCap = 'square'
// 每次將數(shù)組中最后一個(gè)值取出，作為起始點(diǎn)
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;
}總結(jié)
不足點(diǎn)：使用體驗(yàn)不是很好，后續(xù)還需要優(yōu)化
最后，通過(guò)自定義組件，加深對(duì)HarmonyOS的開(kāi)發(fā)，共建鴻蒙生態(tài)
到此這篇關(guān)于 JavaScript+HarmonyOS 實(shí)現(xiàn)一個(gè)手繪板的文章就介紹到這了,更多相關(guān) JavaScript 手繪板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
echarts同一頁(yè)面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
這篇文章主要給大家介紹了關(guān)于echarts同一頁(yè)面中四個(gè)圖表切換的js數(shù)據(jù)交互的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的幫助，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
基于HTML+CSS+JS實(shí)現(xiàn)紙牌記憶游戲
這篇文章主要介紹了如何利用HTML、CSS?和?JavaScript?制作紙牌記憶游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-04-04
uni-app彈出層uni-popup使用及修改默認(rèn)樣式的方法實(shí)例
我們?cè)谑褂胾niapp開(kāi)發(fā)的時(shí)候,有時(shí)可以使用uniapp自有的樣式模板,這樣可以提高開(kāi)發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于uni-app彈出層uni-popup使用及修改默認(rèn)樣式的相關(guān)資料,需要的朋友可以參考下2022-11-11
在js中實(shí)現(xiàn)數(shù)組排序，采用數(shù)組中sort方法實(shí)現(xiàn)還是比較簡(jiǎn)單的，下面有個(gè)不錯(cuò)的示例大家可以參考下2013-10-10
await/async無(wú)法捕獲與處理錯(cuò)誤信息的解決方案分享
async await 中添加錯(cuò)誤處理個(gè)人認(rèn)為是有必要的,下面這篇文章主要給大家介紹了關(guān)于await/async無(wú)法捕獲與處理錯(cuò)誤信息的解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程
在社交小程序里有個(gè)常見(jiàn)的場(chǎng)景是關(guān)注功能，我們本篇以關(guān)注已經(jīng)發(fā)布的文章為例，講解一下關(guān)注功能如何實(shí)現(xiàn)2022-08-08
這篇文章主要介紹了javascript入門(mén)教程，全部?jī)?nèi)容都是javascript的基礎(chǔ)知識(shí)，內(nèi)容很全面，特別適合剛剛學(xué)習(xí)javascript的朋友學(xué)習(xí)，希望大家仔細(xì)閱讀javascript教程。2015-11-11
js實(shí)現(xiàn)超簡(jiǎn)單的展開(kāi)、折疊目錄代碼
這篇文章主要介紹了js實(shí)現(xiàn)超簡(jiǎn)單的展開(kāi)、折疊目錄代碼,通過(guò)javascript操作鼠標(biāo)點(diǎn)擊事件控制頁(yè)面元素樣式的動(dòng)態(tài)改變實(shí)現(xiàn)該功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
換圖片效果想必大家都有見(jiàn)到過(guò)吧，但是定時(shí)換圖片，貌似就很少見(jiàn)了，下面本文通過(guò)一個(gè)示例為大家詳細(xì)介紹下2014-06-06
JS設(shè)置cookie、讀取cookie、刪除cookie
Js操作Cookie總結(jié)（設(shè)置，讀取，刪除），工作中經(jīng)常會(huì)用到的哦！下面是詳細(xì)代碼，如有錯(cuò)誤，請(qǐng)留言指正！2015-04-04