[[432129]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

隨著科技的發達，在日常生活中我們逐漸的脫離的筆和紙，但往往還有許多場景我們還是需要涂涂畫畫，不論是開會或者設計等等剛好身邊沒有筆紙，我們的畫板就排上用場了。我們還可以擴展將其作為和鍵盤鼠標一樣的輸入設備等等。還有更多的使用場景讓我們一起探索。

功能介紹

畫板組件是基于HarmonyOS下的JavaScript UI框架開發的一款組件，主要特點如下：

1. 支持畫筆粗細選擇
2. 支持畫筆顏色定義選中
3. 畫筆顏色除了默認顏色，可點擊色盤，選擇自己想要的顏色
4. 一鍵清除畫板
5. 支持橡皮擦功能
6. 支持保存圖片功能

注意：

• 保存功能需要api >= 6，得到的是一個base64的數據，可以根據自己的需要自行調整
• 功能操作區域可左右滑動選擇

組件使用說明

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

主要代碼

組件傳值

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

初始化畫布

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; 
   } 

設置畫板工具

setTool(item,index) { 
       console.log(index); 
       if(index == 0 || index == 1){ 
           this.toolOn = index; 
       } 
       let type = item.type; 
       switch(type){ 
           case 1: 
               // 畫筆 
               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; 
       } 
   }, 

畫筆顏色選擇

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

畫筆粗細設置

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

開始畫線

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; //畫板標記 
}, 

保存功能

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

效果演示

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com