优化

index/drawCanvas.js

@@ -38,7 +38,6 @@ class DrawCanvas {
     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('画图并存储');
   }
 
   mouseEnd() {
@@ -68,7 +67,7 @@ class DrawCanvas {
   }
 
   // 切换画笔
-  changeBrush(url = '', w = 10, h = 10, angle = 0) {
+  changeBrush({ url = '', w = 10, h = 10, angle = 0 }) {
     if (!url) return
     const img = this._canvas.createImage()
     img.onload = () => {
@@ -120,14 +119,15 @@ class DrawCanvas {
     this._executionArr = []
     this._pathArr = []
     this._style = null
+    this._matrix = null
   }
 
   // 保存
-  save() {
+  save(callBack) {
     wx.canvasToTempFilePath({
       canvas: this._canvas,
       success(res) {
-        console.log('保存', res.tempFilePath);
+        callBack(res)
       }
     })
   }

index/index.js

@@ -33,7 +33,14 @@ Page({
         node: true,
         size: true
       })
-      .exec(this.init.bind(this))
+      .exec(res => {
+        if (!res || !res.length || !res[0]) return
+        const width = res[0].width
+        const height = res[0].height
+        const canvas = res[0].node
+        this.drawCanvas._init({ width, height, canvas, dicTypePath: this.data.dicTypePath[0] })
+        this.onChange({ target: { dataset: { item: this.data.list[0] } } })
+      })
   },
 
   init(res) {
@@ -64,13 +71,19 @@ Page({
     this.drawCanvas.clear()
   },
 
-  changeTool(e) {
+  onChange(e) {
     const { url, w, h } = e.target.dataset.item
     if (!url) return
-    this.drawCanvas.changeBrush(url, w, h, this.data.angle)
+    this.drawCanvas.changeBrush({ url, w, h, angle: this.data.angle })
   },
 
   save() {
-    this.drawCanvas.save()
+    this.drawCanvas.save(res => {
+      console.log('保存', res);
+    })
+  },
+
+  onUnload() {
+    this.drawCanvas.destory()
   }
 })

index/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="tool">
   <block wx:for="{{list}}" wx:key="item">
-    <image src="{{item.url}}" mode="aspectFit" data-item="{{item}}" bind:tap="changeTool" />
+    <image src="{{item.url}}" mode="aspectFit" data-item="{{item}}" bind:tap="onChange" />
   </block>
 </view>
 <view class="btns">

index/index.wxss

@@ -17,5 +17,7 @@ canvas{
 .btns>view:first-child{
   display: flex;
   align-items: center;
-  padding: 10rpx 0;
+  padding: 20rpx 0;
+  background: #f8f8f8;
+  text-indent: 40rpx;
 }