#星光计划1.0# HarmonyOS 自定义JS组件之画板组件 原创 精华

<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..."
}
1.
2.
3.
4.
5.
6.
7.

// 可以根据自己的实际情况，传入需要的画笔颜色和画笔大小
props: {
// 画笔粗细
brushSizes: {
    type: Array,
    default: [3,8,16]
},
// 画笔颜色
brushColor: {
    type: Array,
    default: ['#ffffff',"#000000","#ff9800",'#3f51b5','#ff5722',"#4caf50"]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

 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;
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.

 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;
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

selectColor(color,index) {
    this.colorOn = index;
    this.signColor = color;
    this.canvasTxt.fillStyle = this.signColor;
    this.canvasTxt.strokeStyle = this.signColor;
    this.canvasTxt.lineWidth = this.lineWidth;
},
1.
2.
3.
4.
5.
6.
7.

selectSize(size,index) {
        this.sizeOn = index;
        this.lineWidth = size;
        this.canvasTxt.lineWidth = this.lineWidth;
    },
1.
2.
3.
4.
5.

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();
},
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

overwrite() {
  this.canvasTxt.clearRect(0, 0, 1920,1920);
  this.points = [];
  this.isDraw = false; //画板标记
},
1.
2.
3.
4.
5.

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