手機端寫字板、畫板vue組件

一個簡單的canvas寫字板、畫板vue組件,因爲項目需求目前只提供清空功能
代碼及demo

使用

1.引入組件

import draw from './inDraw/index'

components: {
    draw,
  },

2.使用組件，能夠放在一個自定義樣式的div中

<div id="draw-box">                  
        <draw ref="in-draw"
          :inRatio="3"                     //retina屏兼容,畫布大小放大倍數，Number   
          :inLineColor="'#999'"            //筆觸顏色
          :inLineWidth="5"                 //筆觸寬度，Number
          :inShadowBlur="5"                //筆觸陰影大小，Number
        ></draw>
        <div class="draw-delete" @click="drawDelete()">清空</div> 
      </div>

3.自定義清空按鈕，調用組件方法inDeleteCanvas清空畫布

methods: {
      drawDelete(){
        this.$refs["in-draw"].inDeleteCanvas()
      },
  }

開發筆記

1.須要兼容retina屏一倍圖模糊的問題，將畫布大小設置爲canvas元素的2或3倍

//this.inRatio=3;
  let canvasDom=this.$refs['in-draw-canvas'];
  this.inCanvasBound = canvasDom.getBoundingClientRect();
  canvasDom.width=this.inCanvasBound.width*this.inRatio;
  canvasDom.height=this.inCanvasBound.height*this.inRatio;

  this.inCtx.lineWidth=10*this.inRatio;

2.筆觸鋸齒問題，設置陰影

this.inCtx.shadowBlur = 5;
   this.inCtx.shadowColor = "#000";

3.適應需求在不一樣位置的畫布，筆觸實際位置爲當前座標減去畫布位置

let x=(e.changedTouches[0].pageX - this.inCanvasBound.left + 0.5)*this.inRatio;
   let y=(e.changedTouches[0].pageY- this.inCanvasBound.top + 0.5)*this.inRatio;