测试iOS裁切bug

index/drawCanvas.js

@@ -9,7 +9,7 @@ class DrawCanvas {
     this._matrix = null
   }
 
-  _init({ width, height, canvas, dicTypePath = '' }) {
+  _init({ width, height, canvas, dicTypePath = '', callBack }) {
     if (!width || !height || !canvas) return
     const ctx = canvas.getContext('2d')
     canvas.width = width
@@ -19,12 +19,14 @@ class DrawCanvas {
     this._matrix = ctx.getTransform() //矩阵
     this._executionArr = [] //每移动一笔的数据
     this._pathArr = [] //抬起落下为一笔
-    if (dicTypePath) {
-      // 添加路径底图
-      const path = this.sPath2cPath(dicTypePath)
+    // 添加路径底图 
+    const path = this.sPath2cPath(dicTypePath)
+    if (path) {
       this._ctx.stroke(path)
-      this._ctx.clip(path)
+      this._ctx.clip(path) //IOS 下裁切后无法继续画图
     }
+    callBack()
+    console.log('初始化完成');
   }
 
   mouseStart() {
@@ -33,8 +35,8 @@ class DrawCanvas {
   }
 
   mouseMove({ x = 0, y = 0 }) {
+    if (!this._style || !this._style.fillStyle) return
     console.log('移动中');
-    if (!this._style) return
     this._executionArr.push([x, y])
     this._ctx.fillStyle = this._style.fillStyle
     const X = x - (this._style.w / 2)
@@ -43,6 +45,7 @@ class DrawCanvas {
   }
 
   mouseEnd() {
+    if (!this._style || !this._style.fillStyle) return
     console.log('移动结束');
     this._pathArr.push({
       fillStyle: this._style,
@@ -52,48 +55,43 @@ class DrawCanvas {
 
   mouseBack() {
     // 删除每个移动数据
-    if (this._pathArr.length) {
-      // 清空画布
-      this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
-      this._pathArr.pop()
-      // 重画
-      for (let k = 0; k < this._pathArr.length; k++) {
-        const el = this._pathArr[k];
-        for (let j = 0; j < el.path.length; j++) {
-          const es = el.path[j];
-          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)
-        }
+    if (!this._pathArr.length || !this._ctx) return
+    // 清空画布
+    this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
+    this._pathArr.pop()
+    // 重画
+    for (let k = 0; k < this._pathArr.length; k++) {
+      const el = this._pathArr[k];
+      for (let j = 0; j < el.path.length; j++) {
+        const es = el.path[j];
+        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 = '', w = 10, h = 10, angle = 0 }) {
-    console.log('切换画笔');
-    if (!url) return
+    if (!url || !this._ctx || !this._canvas) return
     const img = this._canvas.createImage()
     img.src = url
     img.onload = () => {
-      setTimeout(() => {
-        const fillStyle = this._ctx.createPattern(img, 'repeat')
-        console.log('画笔样式', fillStyle);
-        // 旋转 + 矩阵变化
-        if (angle && this._matrix) {
-          this._matrix.rotateSelf(angle)
-          fillStyle.setTransform(this._matrix)
-        }
-        this._style = { fillStyle, w, h }
-      }, 500);
-
+      const fillStyle = this._ctx.createPattern(img, 'repeat')
+      console.log('画笔样式', fillStyle);
+      // 旋转 + 矩阵变化
+      if (angle && this._matrix) {
+        this._matrix.rotateSelf(angle)
+        fillStyle.setTransform(this._matrix)
+      }
+      this._style = { fillStyle, w, h }
     }
   }
 
   // svg 路径转 canvas 路径
   sPath2cPath(path = '') {
-    if (!path || !this._canvas) return
+    if (!path || !this._canvas) return null
     const arr = path.split(/(^|\s+)(?=[A-Z])/).filter(el => el !== ' ')
     const PATH = this._canvas.createPath2D();
     for (let k = 0; k < arr.length; k++) {
@@ -113,6 +111,7 @@ class DrawCanvas {
 
   // 清除画布
   clear() {
+    if (!this._ctx) return
     // 清空画布
     this._ctx.clearRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height)
     // 清除路径数据
@@ -132,6 +131,7 @@ class DrawCanvas {
 
   // 保存
   save(callBack) {
+    if (!this._canvas) return callBack('')
     wx.canvasToTempFilePath({
       canvas: this._canvas,
       success(res) {

index/index.js

@@ -38,18 +38,14 @@ Page({
         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] } } })
+        this.drawCanvas._init({
+          width, height, canvas, dicTypePath: this.data.dicTypePath[0], callBack: () => {
+            this.onChange({ target: { dataset: { item: this.data.list[1] } } })
+          }
+        })
       })
   },
 
-  init(res) {
-    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] })
-  },
-
   start() {
     this.drawCanvas.mouseStart()
   },

index/index.wxml

@@ -7,7 +7,7 @@
 </view>
 <view class="btns">
   <view>
-    旋转角度： <input type="text" model:value="{{angle}}"/>
+    旋转角度： <input type="number" model:value="{{angle}}" />
   </view>
   <button bind:tap="back">撤销</button>
   <button bind:tap="clear">清空</button>

project.private.config.json

@@ -2,7 +2,8 @@
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "canvas-demo",
   "setting": {
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "skylineRenderEnable": true
   },
   "libVersion": "3.4.9"
 }