原生canvas製做畫圖小工具的踩坑和爬坑

最近在寫一個相似截圖裏的簡易畫圖的小工具，畫線，畫矩形，畫圓，能夠選擇顏色，就像這樣

寫的過程當中遇到了一些坑，還好爬出來了，也獲得幾位大佬的指點，稍微接觸了一下zrender，在這裏記錄一下。

坑1，繪製過程的預覽

用canvas畫線沒什麼問題，moveTo和lineTo就行了，來一段代碼湊字數（😂）

鼠標按下，開始繪製，記錄初始鼠標的位置
startPaint = (e)=>{
    this.startPaintFlag = true;
    this.paintstartX = e.clientX;
    this.paintstartY = e.clientY;
}

鼠標擡起，中止繪製
stopPaint = (e)=>{
    this.startPaintFlag = false;    
}

painting = (e)=>{
    const {activeColor, activeShape} = this.state;
    
    繪製過程當中
    if(this.startPaintFlag){
      const ctx = this.canvas.getContext("2d");
      ctx.strokeStyle = activeColor;
      ctx.lineWidth = 2;
      ctx.beginPath();
    
      if(activeShape === 'pen'){
        ctx.moveTo(this.paintstartX, this.paintstartY);
        ctx.lineTo(e.clientX, e.clientY);
      }
      if(activeShape === 'circle'){
        const r = Math.sqrt(Math.pow(e.clientX - this.paintstartX, 2) + Math.pow(e.clientY - this.paintstartY, 2));
        ctx.arc(this.paintstartX, this.paintstartY, r, 0, 2*Math.PI)
      }
      if(activeShape === 'rect'){
        ctx.rect(this.paintstartX, this.paintstartY, e.clientX - this.paintstartX, e.clientY - this.paintstartY);
      }
      ctx.stroke();
      
      記錄這次移動的最後位置，供下一次繪製使用
      this.paintstartX = e.clientX;
      this.paintstartY = e.clientY;
    }
}
複製代碼

可是畫矩形和圓就出事了，由於截圖工具畫矩形和圓的時候，是有預覽效果的，就是我一邊畫，我一邊能看到我畫出的形狀是多大，若是按照畫線的思路來，會獲得這樣的一串圖形

很好理解，由於mousemove的時候一直在改變位置和距離。那麼若是我一開始就記錄下位置，在畫矩形和圓的時候不改變初始位置呢，那麼會獲得如下圖形

也很好理解，由於沒有擦除，每次繪製的圖形都在畫布上。那擦除不就行了？很差，由於在畫布上畫的不是隻有一個圖形，若是我先畫線，再畫圓，那麼一擦除，以前畫的線就沒了，使人糾結QAQ

我有過一個思路是，只擦除這個圖形內部的形狀，好比上面這一堆同心圓，我只擦除最後繪製的那個圓內部的內容，惋惜仍是不行，一方面內部可能有別的線事先繪製了，一方面圖形能夠拖動放大，也能夠拖動縮小，那麼怎麼辦呢？

在嘆了一口大氣，喝了一杯水，凝視了一下窗外以後，想出了一個辦法，我在畫布上再疊一個畫布不就行了，我在疊上去的這個畫布上就能夠隨心所欲了不是咩。

來個示意圖，黑色框框是咱們展現用的畫布，黑色形狀表示已經繪製上去的內容，紅色框框是咱們在畫有預覽效果的圖形時所使用的臨時畫布，紅色形狀表示咱們鼠標拖動過程當中繪製的預覽內容，每次須要繪製預覽內容咱們就生成一個臨時畫布，放在頂層，爲所欲爲的繪製，繪製完畢（鼠標擡起）將臨時畫布銷燬，在展現用的畫布（黑色框框）上繪製最終的圖形

來一段代碼幫助理解

startPaint = (e) => {
  this.startPaintFlag = true;
  this.paintstartX = e.clientX;
  this.paintstartY = e.clientY;

  畫矩形和圓形時臨時生成一個canvas
  if (this.state.activeShape !== "pen") {
    this.tempCanvas = document.createElement("canvas");
    this.tempCanvas.width = this.canvas.width;
    this.tempCanvas.height = this.canvas.height;
    
    設置一些定位樣式
    this.tempCanvas.style.cssText = "position: absolute; top: 0; left: 0; z-index: 0;";
    
    append到須要的容器元素裏
    document.querySelector(".contain").appendChild(this.tempCanvas);
  }
};

stopPaint = (e) => {
  this.startPaintFlag = false;
  const { activeShape, activeColor } = this.state;
  if (activeShape !== "pen") {
    
    從容器元素裏刪除臨時畫布
    document.querySelector(".contain").removeChild(this.tempCanvas);
    this.tempCanvas = null;
    
    將lastDrawData記錄的繪製數據，繪製到展現用的畫布上
    const ctx = this.canvas.getContext("2d");
    ctx.strokeStyle = activeColor;
    ctx.lineWidth = 2;
    ctx.beginPath();
    if (activeShape === "circle") {
      const { x, y, r } = this.lastDrawData;
      ctx.arc(x, y, r, 0, 2 * Math.PI);
    } else {
      const { x, y, width, height } = this.lastDrawData;
      ctx.rect(x, y, width, height);
    }
    ctx.stroke();
    this.lastDrawData = null;
  }
};

painting = (e) => {
  const { activeColor, activeShape } = this.state;

  if (this.startPaintFlag) {
    const ctx = this.canvas.getContext("2d");
    ctx.strokeStyle = activeColor;
    ctx.lineWidth = 2;

    畫線的邏輯不動
    if (activeShape === "pen") {
      ctx.beginPath();
      ctx.moveTo(this.paintstartX, this.paintstartY);
      ctx.lineTo(e.clientX, e.clientY);
      ctx.stroke();
      this.paintstartX = e.clientX;
      this.paintstartY = e.clientY;
    } else {

      有預覽的圖形繪製在臨時畫布上
      const tempCtx = this.tempCanvas.getContext("2d");
      tempCtx.strokeStyle = activeColor;
      tempCtx.lineWidth = 2;

      每次繪製前清除畫布
      tempCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      tempCtx.beginPath();
      if (activeShape === "circle") {
        const r = Math.sqrt(
          Math.pow(e.clientX - this.paintstartX, 2) +
            Math.pow(e.clientY - this.paintstartY, 2)
        );
        tempCtx.arc(this.paintstartX, this.paintstartY, r, 0, 2 * Math.PI);

        繪製的數據記錄在一個變量裏
        this.lastDrawData = {
          x: this.paintstartX,
          y: this.paintstartY,
          r,
        };
      } else {
        tempCtx.rect(
          this.paintstartX,
          this.paintstartY,
          e.clientX - this.paintstartX,
          e.clientY - this.paintstartY
        );
        this.lastDrawData = {
          x: this.paintstartX,
          y: this.paintstartY,
          width: e.clientX - this.paintstartX,
          height: e.clientY - this.paintstartY,
        };
      }
      tempCtx.stroke();
    }
  }
};

複製代碼

坑2，窗口大小變動

若是畫着畫着，忽然用戶將窗口大小變了，你說我是保持畫布大小不變呢，仍是讓畫布大小隨着窗口改變而改變，若是窗口縮小，那麼保持畫布大小不變是沒什麼大問題的，可是窗口若是變大，畫布區域又是自適應的，那麼就不得不跟隨改變了，可是canvas的寬高改變的話，內容是會清除的，那麼就面臨兩種選擇：

1. 用變量將繪製的每個座標記錄下來，寬高變動後從新繪製；
2. 將畫布的內容直接做爲圖像（這個形容不許確，理解意思就行）保存下來

第一種我沒試過，不過可想而知若是畫的內容多了，應該會閃爍一下，第二種，就我所知有兩種形式

第一種，用getImageData保存圖像，改變大小後，用putImageData繪製，putImageData只能裁剪圖像，不能拉伸
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
canvas.width = newWidth;
canvas.height = newHeight;
ctx.putImageData(imgData, 0, 0);

第二種，仍是建立一個臨時畫布，將圖形繪製下來，改變大小後，用drawImage繪製，drawImage是能夠拉伸圖像的
const newCanvas = document.createElement("canvas");
newCanvas.width = canvas.width;
newCanvas.height = canvas.height;
newCanvas.getContext("2d").drawImage(canvas, 0, 0);
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(newCanvas, 0, 0);
複製代碼

開始我選的是drawImage，窗口若是不是等比縮放（通常不可能等比），圖像能夠拉伸，可是拉伸一兩次圖形就變得很模糊，因此可能還不如不改變圖像的比例爲好，具體仍是看場景