修复bug 和 拆开操作和图片生成

painter.js

@@ -17,7 +17,6 @@ Component({
   frontContext: {},
   bottomContext: {},
   topContext: {},
-  hasIdViews: [],
   /**
    * 组件的属性列表
    */
@@ -34,6 +33,14 @@ Component({
         }
       },
     },
+    dancePalette: {
+      type: Object,
+      observer: function (newVal, oldVal) {
+        if (!this.isEmpty(newVal)) {
+          this.initDancePalette(newVal);
+        }
+      },
+    },
     widthPixels: {
       type: Number,
       value: 0
@@ -58,6 +65,7 @@ Component({
   },
 
   methods: {
+
     /**
      * 判断一个 object 是否为 空
      * @param {object} object
@@ -79,9 +87,9 @@ Component({
     doAction(newVal) {
       if (newVal && newVal.css) {
         if (Array.isArray(this.touchedView.css)) {
-          this.touchedView.css = [...this.touchedView.css, newVal.css]
+          this.touchedView.css = Object.assign({}, ...this.touchedView.css, newVal.css)
         } else {
-          this.touchedView.css = [this.touchedView.css, newVal.css]
+          this.touchedView.css = Object.assign({}, this.touchedView.css, newVal.css)
         }
       }
       const draw = {
@@ -91,7 +99,9 @@ Component({
       }
       const pen = new Pen(this.globalContext, draw);
       pen.paint();
-      const { rect } = this.touchedView
+      const {
+        rect
+      } = this.touchedView
       const block = {
         width: this.currentPalette.width,
         height: this.currentPalette.height,
@@ -151,7 +161,9 @@ Component({
       let canBeTouched = []
       for (let i = totalLayerCount - 1; i >= 0; i--) {
         const view = this.currentPalette.views[i]
-        const { rect } = view
+        const {
+          rect
+        } = view
         if (this.inArea(x, y, rect, hasTouchedView)) {
           canBeTouched.push({
             view,
@@ -179,7 +191,11 @@ Component({
           }
           this.touchedView = touchAble[i].view
           this.findedIndex = touchAble[i].index
-          const { rect, id, css } = this.touchedView
+          const {
+            rect,
+            id,
+            css
+          } = this.touchedView
           this.triggerEvent('touchStart', {
             id: id,
             css: css,
@@ -242,8 +258,10 @@ Component({
       this.startX = x
       this.startY = y
       this.startTimeStamp = new Date().getTime()
-      if (this.touchedView && JSON.stringify(this.touchedView) !== JSON.stringify({})) {
+      if (this.touchedView && !this.isEmpty(this.touchedView)) {
-        const { rect } = this.touchedView
+        const {
+          rect
+        } = this.touchedView
         if (rect.right - ACTION_POINT_RADIUS < x && x < rect.right + ACTION_POINT_RADIUS && rect.bottom - ACTION_POINT_RADIUS < y && y < rect.bottom + ACTION_POINT_RADIUS) {
           this.isScale = true
           this.startH = rect.bottom - rect.top
@@ -256,15 +274,17 @@ Component({
 
     onTouchEnd(e) {
       const current = new Date().getTime()
-      if ((current - this.startTimeStamp) <= 100 && !this.hasMove) {
+      if ((current - this.startTimeStamp) <= 500 && !this.hasMove) {
         this.onClick(e)
+      } else if (this.touchedView && !this.isEmpty(this.touchedView)) {
+        // 传出镜像
+        this.triggerEvent('touchEnd', this.currentPalette)
       }
       this.hasMove = false
-      this.triggerEvent('touchEnd')
     },
 
-    onTouchCancel() {
+    onTouchCancel(e) {
-      this.triggerEvent('touchCancel')
+      this.onTouchEnd(e)
     },
 
     hasMove: false,
@@ -279,7 +299,10 @@ Component({
       } = event.touches[0]
       const offsetX = x - this.startX
       const offsetY = y - this.startY
-      const { rect, type } = this.touchedView
+      const {
+        rect,
+        type
+      } = this.touchedView
       let css = {}
       if (this.isScale) {
         const newW = this.startW + offsetX > 1 ? this.startW + offsetX : 1
@@ -314,34 +337,27 @@ Component({
       })
     },
 
-    startPaint() {
+    initScreenK() {
-      if (this.isEmpty(this.properties.palette)) {
+      if (!(getApp() && getApp().systemInfo && getApp().systemInfo.screenWidth)) {
-        return;
-      }
-
-      if (!(getApp().systemInfo && getApp().systemInfo.screenWidth)) {
         try {
           getApp().systemInfo = wx.getSystemInfoSync();
         } catch (e) {
-          const error = `Painter get system info failed, ${JSON.stringify(e)}`;
+          console.error(`Painter get system info failed, ${JSON.stringify(e)}`);
-          this.triggerEvent('imgErr', {
-            error: error
-          });
-          console.error(error);
           return;
         }
       }
-      let screenK = getApp().systemInfo.screenWidth / 750;
+      this.screenK = 0.5;
-      setStringPrototype(screenK, 1);
+      if (getApp() && getApp().systemInfo && getApp().systemInfo.screenWidth) {
-
+        this.screenK = getApp().systemInfo.screenWidth / 750;
-      this.downloadImages().then((palette) => {
-        this.currentPalette = palette
-        this.hasIdViews = []
-        palette.views && palette.views.map(view => {
-          if (view.id) {
-            this.hasIdViews.push(view)
       }
-        })
+      setStringPrototype(this.screenK, 1);
+    },
+
+    initDancePalette() {
+      this.initScreenK();
+
+      this.downloadImages(this.properties.dancePalette).then((palette) => {
+        this.currentPalette = palette
         const {
           width,
           height
@@ -351,33 +367,55 @@ Component({
           console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
           return;
         }
+        this.setData({
+          painterStyle: `width:${width.toPx()}px;height:${height.toPx()}px;`,
+        });
+        this.frontContext = wx.createCanvasContext('front', this);
+        this.bottomContext = wx.createCanvasContext('bottom', this);
+        this.topContext = wx.createCanvasContext('top', this);
+        this.globalContext = wx.createCanvasContext('k-canvas', this);
+        new Pen(this.globalContext, palette).paint();
+      });
+    },
+
+    startPaint() {
+      this.initScreenK();
+
+      this.downloadImages(this.properties.palette).then((palette) => {
+        const {
+          width,
+          height
+        } = palette;
+
+        if (!width || !height) {
+          console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
+          return;
+        }
+
+        // 生成图片时，根据设置的像素值重新绘制
         this.canvasWidthInPx = width.toPx();
         if (this.properties.widthPixels) {
-          // 如果重新设置过像素宽度，则重新设置比例
+          setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx)
-          setStringPrototype(screenK, this.properties.widthPixels / this.canvasWidthInPx)
           this.canvasWidthInPx = this.properties.widthPixels
         }
 
         this.canvasHeightInPx = height.toPx();
         this.setData({
-          painterStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
+          photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
         });
-        this.globalContext = wx.createCanvasContext('k-canvas', this);
+        const photoContext = wx.createCanvasContext('photo', this);
-        const pen = new Pen(this.globalContext, palette);
+
-        pen.paint(() => {
+        new Pen(photoContext, palette).paint(() => {
           this.saveImgToLocal();
         });
-        this.frontContext = wx.createCanvasContext('front', this);
-        this.bottomContext = wx.createCanvasContext('bottom', this);
-        this.topContext = wx.createCanvasContext('top', this)
       });
     },
 
-    downloadImages() {
+    downloadImages(palette) {
       return new Promise((resolve, reject) => {
         let preCount = 0;
         let completeCount = 0;
-        const paletteCopy = JSON.parse(JSON.stringify(this.properties.palette));
+        const paletteCopy = JSON.parse(JSON.stringify(palette));
         if (paletteCopy.background) {
           preCount++;
           downloader.download(paletteCopy.background).then((path) => {
@@ -438,7 +476,7 @@ Component({
       const that = this;
       setTimeout(() => {
         wx.canvasToTempFilePath({
-          canvasId: 'k-canvas',
+          canvasId: 'photo',
           success: function (res) {
             that.getImageInfo(res.tempFilePath);
           },
@@ -510,7 +548,7 @@ function setStringPrototype(screenK, scale) {
 
     let res = 0;
     if (unit === 'rpx') {
-      res = Math.round(value * screenK * (scale || 1));
+      res = Math.round(value * (screenK || 0.5) * (scale || 1));
     } else if (unit === 'px') {
       res = Math.round(value * (scale || 1));
     }

painter.wxml

@@ -1,4 +1,5 @@
-<view style='position: relative;{{painterStyle}}{{customStyle}}'>
+<view style='position: relative;{{customStyle}}'>
+  <canvas canvas-id="photo" style="{{photoStyle}};position: absolute;top: -9999rpx;" />
   <canvas canvas-id="bottom" style="{{painterStyle}};position: absolute;" />
   <canvas canvas-id="k-canvas" style="{{painterStyle}};position: absolute;" />
   <canvas canvas-id="top" style="{{painterStyle}};position: absolute;" />