OpenHarmony學(xué)生挑戰(zhàn)賽項(xiàng)目經(jīng)驗(yàn)分享
??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??
背景
現(xiàn)在的電子設(shè)備太普及，用筆的頻率大大降低，導(dǎo)致現(xiàn)在很多人 提筆忘字、寫(xiě)字“丑 ”、錯(cuò)字、用法不當(dāng)、頻頻出現(xiàn)。文字是我國(guó)傳統(tǒng)文化最為重要悠久的積淀，包含前人無(wú)數(shù)智慧和經(jīng)驗(yàn)，我們不應(yīng)舍棄。于是，我開(kāi)發(fā)多功能手寫(xiě)板，并且實(shí)現(xiàn)了練字功能。多功能手寫(xiě)板的存在，可以告別紙張字帖，實(shí)現(xiàn)字帖自由，能在設(shè)備上臨摹。很多人筆畫(huà)不規(guī)范，寫(xiě)字會(huì)有倒筆順的現(xiàn)象，這直接導(dǎo)致書(shū)寫(xiě)不美觀(guān)，針對(duì)這個(gè)問(wèn)題，實(shí)現(xiàn)了筆順糾錯(cuò)，評(píng)分功能。
符合的聯(lián)合國(guó)17項(xiàng)可持續(xù)發(fā)展目標(biāo)
優(yōu)質(zhì)教育。
標(biāo)準(zhǔn)設(shè)備環(huán)境準(zhǔn)備
以潤(rùn)和大禹系列HH-SCDAYU200開(kāi)發(fā)板套件為例
- 開(kāi)發(fā)板上新 | RK3568開(kāi)發(fā)板上絲滑體驗(yàn)OpenHarmony標(biāo)準(zhǔn)系統(tǒng)
應(yīng)用編譯環(huán)境準(zhǔn)備
- 下載DevEco Studio??下載地址??。
- SDK 版本 ：OpenHarmony SDK API 8，請(qǐng)參考??配置OpenHarmony SDK??，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
目錄結(jié)構(gòu)
└─src
├─main
│ │ config.json // 應(yīng)用配置文件
│ │
│ ├─js
│ │ └─MainAbility
│ │ │ app.js // 應(yīng)用程序主入口
│ │ │
│ │ ├─common
│ │ │ ├─components
│ │ │ │ ├─Draw // 繪畫(huà)模塊
│ │ │ │ │ index.css
│ │ │ │ │ index.hml
│ │ │ │ │ index.js
│ │ │ │ │
│ │ │ │ ├─layout // tab欄
│ │ │ │ │ layout.css
│ │ │ │ │ layout.hml
│ │ │ │ │ layout.js
│ │ │ │ │
│ │ │ │ ├─Note // 筆記模塊
│ │ │ │ │ index.css
│ │ │ │ │ index.hml
│ │ │ │ │ index.js
│ │ │ │ │
│ │ │ │ └─Write // 練字模塊
│ │ │ │ index.css
│ │ │ │ index.hml
│ │ │ │ index.js
│ │ │ │
│ │ │ └─images
│ │ └─pages
│ │ └─index // 首頁(yè)
│ │ index.css
│ │ index.hml
│ │ index.js
│ │
│ └─resources
│ ├─base
│ │ ├─element
│ │ │ color.json
│ │ │ string.json
│ │ │
│ │ └─media
│ │ icon.png
│ │
│ └─rawfile
功能模塊
1、練字
模擬寫(xiě)字，通過(guò)速度實(shí)現(xiàn)畫(huà)筆粗細(xì)，從而模擬寫(xiě)字效果。筆順檢測(cè)，通過(guò)提前設(shè)置寫(xiě)字位置，實(shí)現(xiàn)用戶(hù)筆順檢測(cè)。評(píng)分功能，當(dāng)用戶(hù)寫(xiě)完時(shí)，點(diǎn)擊保存，系統(tǒng)會(huì)根據(jù)書(shū)寫(xiě)的準(zhǔn)確性進(jìn)行評(píng)分。
2、繪畫(huà)
用戶(hù)可以選擇不同粗細(xì)的畫(huà)筆，選擇不同顏色的畫(huà)筆，進(jìn)行繪圖。還設(shè)置了一些功能鍵，方便用戶(hù)使用，如：清空、橡皮擦、存儲(chǔ)、回退、前進(jìn)。
3、筆記
傳入富文本，通過(guò)richtextAPI，解析富文本，渲染到屏幕中，用戶(hù)可以通過(guò)點(diǎn)擊右側(cè)的小圖標(biāo)，進(jìn)入筆記功能，可以對(duì)文章進(jìn)行批注。
關(guān)鍵代碼解讀
1、繪制原理
使用前，需要線(xiàn)了解canvas組件，可以參考harmonyOS開(kāi)發(fā)者文檔。
首先，我們需要將canvas上下文對(duì)象，需要在觸摸移動(dòng)事件中綁定，因?yàn)槲覀兪峭ㄟ^(guò)觸摸來(lái)生成對(duì)應(yīng)線(xiàn)條的。
繪制直線(xiàn)，通常使用moveTo ()與lineTo ()兩個(gè)方法。. moveTo ()方法用于將畫(huà)筆移至指定點(diǎn)并以改點(diǎn)為直線(xià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()
// 向線(xiàn)條的每個(gè)末端添加圓形線(xiàn)帽。
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)
將數(shù)組中的最后一個(gè)值取出，作為moveTo的坐標(biāo)，將鼠標(biāo)移動(dòng)后的點(diǎn)作為lineTo的坐標(biāo)，然后再通過(guò)stroke就能繪制出圖像。
2、線(xiàn)條粗細(xì)
想要通過(guò)速度來(lái)計(jì)算線(xiàn)條粗細(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)生成線(xiàn)條粗細(xì)。
// 計(jì)算線(xiàn)條粗細(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[.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
文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2313。
??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
