增加画笔粗细

index/drawCanvas.js

@@ -34,8 +34,10 @@ class DrawCanvas {
   mouseMove({ x = 0, y = 0 }) {
     if (!this._style) return
     this._executionArr.push([x, y])
-    this._ctx.fillStyle = this._style
-    this._ctx.fillRect(x - 5, y - 5, 10, 10)
+    this._ctx.fillStyle = this._style.fillStyle
+    const X = x - (this._style.w / 2)
+    const Y = y - (this._style.h / 2)
+    this._ctx.fillRect(X,Y, this._style.w, this._style.h)
     console.log('画图并存储');
   }
 
@@ -56,19 +58,24 @@ class DrawCanvas {
         const el = this._pathArr[k];
         for (let j = 0; j < el.path.length; j++) {
           const es = el.path[j];
-          this._ctx.fillStyle = el.fillStyle
-          this._ctx.fillRect(es[0] - 5, es[1] - 5, 10, 10)
+          this._ctx.fillStyle = el.style.fillStyle
+          const X = es[0] - (el._style.w / 2)
+          const Y = es[1] - (el._style.h / 2)
+          this._ctx.fillRect(X,Y, el.style.w, el.style.h)
         }
       }
     }
   }
 
   // 切换画笔
-  changeBrush(url = '') {
+  changeBrush(url = '', w = 10, h = 10) {
     if (!url) return
     const img = this._canvas.createImage()
     img.onload = () => {
-      this._style = this._ctx.createPattern(img, 'repeat')
+      this._style = {
+        fillStyle: this._ctx.createPattern(img, 'repeat'),
+        w, h
+      }
     }
     img.src = url
   }

index/index.js

@@ -5,11 +5,15 @@ Page({
     list: [
       {
         name: '1',
-        url: './1.png'
+        url: './1.png',
+        w: 10,
+        h: 10
       },
       {
         name: '2',
-        url: './2.png'
+        url: './2.png',
+        w: 10,
+        h: 10
       },
     ],
     dicTypePath: {
@@ -60,9 +64,9 @@ Page({
   },
 
   changeTool(e) {
-    const { url } = e.target.dataset.item
+    const { url, w, h } = e.target.dataset.item
     if (!url) return
-    this.drawCanvas.changeBrush(url)
+    this.drawCanvas.changeBrush(url, w, h)
   },
 
   save() {