优化代码

index/drawCanvas.js

@@ -6,7 +6,6 @@ class DrawCanvas {
     this._executionArr = []
     this._pathArr = []
     this._style = null
-
     this.baseMapUrl = null
     this.baseWidth = null
     this.baseHeight = null
@@ -19,15 +18,6 @@ class DrawCanvas {
     canvas.width = width * dpr
     canvas.height = height * dpr
     ctx.scale(dpr, dpr)
-    // 添加底图
-    if (baseMapUrl) {
-      const img = canvas.createImage()
-      img.onload = () => {
-        this._ctx.drawImage(img, 0, 0, width, height)
-        this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
-      }
-      img.src = baseMapUrl
-    }
     this._canvas = canvas
     this._ctx = ctx
     this._executionArr = [] //每移动一笔的数据
@@ -35,6 +25,7 @@ class DrawCanvas {
     this.baseHeight = height
     this.baseWidth = width
     this.baseMapUrl = baseMapUrl
+    if (baseMapUrl) this.addBaseMap()
   }
 
   mouseStart() {
@@ -64,10 +55,7 @@ class DrawCanvas {
       this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
       this._pathArr.pop()
       // 画上底图
-      const img = this._canvas.createImage()
-      img.onload = () => {
-        this._ctx.drawImage(img, 0, 0, this.baseWidth, this.baseHeight)
-        this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
+      this.addBaseMap(() => {
         // 画上路径
         for (let k = 0; k < this._pathArr.length; k++) {
           const el = this._pathArr[k];
@@ -77,11 +65,21 @@ class DrawCanvas {
             this._ctx.fillRect(es[0] - 5, es[1] - 5, 10, 10)
           }
         }
-      }
-      img.src = this.baseMapUrl
+      })
     }
   }
 
+  // 添加底图
+  addBaseMap(callback) {
+    const img = this._canvas.createImage()
+    img.onload = () => {
+      this._ctx.drawImage(img, 0, 0, this.baseWidth, this.baseHeight)
+      this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
+      if (callback) callback()
+    }
+    img.src = this.baseMapUrl
+  }
+
   // 切换画笔
   changeBrush(url = '') {
     if (!url) return
@@ -98,16 +96,10 @@ class DrawCanvas {
     this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
     this._ctx.globalCompositeOperation = "source-over" //覆盖
     // 画上底图
-    const img = this._canvas.createImage()
-    img.onload = () => {
-      this._ctx.drawImage(img, 0, 0, this.baseWidth, this.baseHeight)
-      this._ctx.globalCompositeOperation = "source-atop" //画笔重叠部分覆盖
-    }
-    img.src = this.baseMapUrl
+    this.addBaseMap()
     // 清除路径数据
     this._pathArr = []
     this._executionArr = []
-    this._style = null
   }
 
   // 保存