[[432129]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

隨著科技的發(fā)達(dá)，在日常生活中我們逐漸的脫離的筆和紙，但往往還有許多場(chǎng)景我們還是需要涂涂畫(huà)畫(huà)，不論是開(kāi)會(huì)或者設(shè)計(jì)等等剛好身邊沒(méi)有筆紙，我們的畫(huà)板就排上用場(chǎng)了。我們還可以擴(kuò)展將其作為和鍵盤(pán)鼠標(biāo)一樣的輸入設(shè)備等等。還有更多的使用場(chǎng)景讓我們一起探索。

功能介紹

畫(huà)板組件是基于HarmonyOS下的JavaScript UI框架開(kāi)發(fā)的一款組件，主要特點(diǎn)如下：

1. 支持畫(huà)筆粗細(xì)選擇
2. 支持畫(huà)筆顏色定義選中
3. 畫(huà)筆顏色除了默認(rèn)顏色，可點(diǎn)擊色盤(pán)，選擇自己想要的顏色
4. 一鍵清除畫(huà)板
5. 支持橡皮擦功能
6. 支持保存圖片功能

注意：

• 保存功能需要api >= 6，得到的是一個(gè)base64的數(shù)據(jù)，可以根據(jù)自己的需要自行調(diào)整
• 功能操作區(qū)域可左右滑動(dòng)選擇

組件使用說(shuō)明

<element name="drawing-board" src="../../common/component/drawingBoard.hml"></element> 
<drawing-board @event-dataurl="getUrl"></drawing-board> 
 
// 獲取圖片信息,可以根據(jù)自己的圖片組件需要，處理對(duì)應(yīng)的base64 數(shù)據(jù) 
getUrl(valueUrl){ 
    console.log('得到圖片信息'+JSON.stringify(valueUrl)); // "data:image/png;base64,xxxxxxxx..." 
} 

主要代碼

組件傳值

// 可以根據(jù)自己的實(shí)際情況，傳入需要的畫(huà)筆顏色和畫(huà)筆大小 
props: { 
// 畫(huà)筆粗細(xì) 
brushSizes: { 
    type: Array, 
    default: [3,8,16] 
}, 
// 畫(huà)筆顏色 
brushColor: { 
    type: Array, 
    default: ['#ffffff',"#000000","#ff9800",'#3f51b5','#ff5722',"#4caf50"] 
} 

初始化畫(huà)布

initCanvas(){ 
       this.canvas = this.$refs.canvas; 
       this.canvasTxt = this.canvas.getContext('2d',{ antialias: true }); 
       this.canvasTxt.strokeStyle = this.signColor; 
       this.canvasTxt.lineJoin = "round"; 
       this.canvasTxt.lineCap = "round"; 
       this.canvasTxt.globalCompositeOperation = this.penType; 
       this.canvasTxt.lineWidth = this.lineWidth; 
   } 

設(shè)置畫(huà)板工具

setTool(item,index) { 
       console.log(index); 
       if(index == 0 || index == 1){ 
           this.toolOn = index; 
       } 
       let type = item.type; 
       switch(type){ 
           case 1: 
               // 畫(huà)筆 
               this.penType = 'source-over'; 
               this.canvasTxt.lineWidth = this.lineWidth; 
               this.canvasTxt.globalCompositeOperation = this.penType; 
               break; 
           case 2: 
              // 橡皮檫 
               this.penType = 'destination-out'; 
               this.canvasTxt.lineWidth = this.lineWidth; 
               this.canvasTxt.globalCompositeOperation = this.penType; 
               break; 
           case 3: 
               this.overwrite(); 
               break; 
           case 4: 
               // 保存 
               this.savaCanvas(); 
               break; 
       } 
   }, 

畫(huà)筆顏色選擇

selectColor(color,index) { 
    this.colorOn = index; 
    this.signColor = color; 
    this.canvasTxt.fillStyle = this.signColor; 
    this.canvasTxt.strokeStyle = this.signColor; 
    this.canvasTxt.lineWidth = this.lineWidth; 
}, 

畫(huà)筆粗細(xì)設(shè)置

selectSize(size,index) { 
        this.sizeOn = index; 
        this.lineWidth = size; 
        this.canvasTxt.lineWidth = this.lineWidth; 
    }, 

開(kāi)始畫(huà)線

drawLine(beginPoint, controlPoint, endPoint) { 
  this.canvasTxt.beginPath(); 
  this.canvasTxt.moveTo(beginPoint.x, beginPoint.y); 
  this.canvasTxt.quadraticCurveTo( 
      controlPoint.x, 
      controlPoint.y, 
      endPoint.x, 
      endPoint.y 
  ); 
  this.canvasTxt.stroke(); 
  this.canvasTxt.closePath(); 
}, 

一鍵清除功能

overwrite() { 
  this.canvasTxt.clearRect(0, 0, 1920,1920); 
  this.points = []; 
  this.isDraw = false; //畫(huà)板標(biāo)記 
}, 

保存功能

savaCanvas(){ 
    var dataURL = this.$refs.canvas.toDataURL(); 
    // 保存畫(huà)板的到的是base64信息 
    this.$emit('eventDataurl',dataURL) 
} 

效果演示

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com