激活 Painter 可操作

lib/pen.js

@@ -19,7 +19,7 @@ export default class Painter {
       this._drawAbsolute(view);
     }
     this.ctx.draw(false, () => {
-      callback();
+      callback && callback();
     });
   }
 
@@ -259,17 +259,40 @@ export default class Painter {
     const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0;
     // 当设置了 right 时，默认 align 用 right，反之用 left
     const align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left');
+    // 记录绘制时的画布
+    let xa = 0;
+    const ya = y + height / 2;
+
     switch (align) {
       case 'center':
-        this.ctx.translate(x, y + height / 2);
+        xa = x;
         break;
       case 'right':
-        this.ctx.translate(x - width / 2, y + height / 2);
+        xa = x - width / 2;
         break;
       default:
-        this.ctx.translate(x + width / 2, y + height / 2);
+        xa = x + width / 2;
         break;
     }
+    this.ctx.translate(xa, ya);
+    // 记录该 view 的有效点击区域
+    // TODO ，旋转和裁剪的判断
+    // 记录在真实画布上的左侧
+    let left = x
+    if (align === 'center') {
+      left = x - width / 2
+    } else if (align === 'right') {
+      left = x - width
+    }
+    view.rect = {
+      left,
+      top: y,
+      right: left + width,
+      bottom: y + height,
+      x: view.css && view.css.right ? (x - width) : x,
+      y
+    };
+
     this.ctx.rotate(angle);
     if (!notClip && view.css && view.css.borderRadius && view.type !== 'rect') {
       this._doClip(view.css.borderRadius, width, height);

painter.js

@@ -11,6 +11,9 @@ Component({
   canvasWidthInPx: 0,
   canvasHeightInPx: 0,
   paintCount: 0,
+  currentPalette: {},
+  globalContext: {},
+  hasIdViews: [],
   /**
    * 组件的属性列表
    */
@@ -36,6 +39,12 @@ Component({
       type: Boolean,
       value: false,
     },
+    actions: {
+      type: Object,
+      observer: function (newVal, oldVal) {
+        this.doAction(newVal)
+      },
+    }
   },
 
   data: {
@@ -63,6 +72,76 @@ Component({
       return true;
     },
 
+    doAction(newVal) {
+      this.hasIdViews.map(view => {
+        if (view.id === newVal.id) {
+          if (Array.isArray(view.css)) {
+            view.css = [...view.css, newVal.css]
+          } else {
+            view.css = [view.css, newVal.css]
+          }
+        }
+      })
+      const pen = new Pen(this.globalContext, this.currentPalette);
+      pen.paint();
+    },
+
+    startX: 0,
+    startY: 0,
+    touchedView: {},
+    onTouchStart(event) {
+      const {
+        x,
+        y
+      } = event.touches[0]
+      this.startX = x
+      this.startY = y
+      for (let view of this.hasIdViews.reverse()) {
+        if (x > view.rect.left && y > view.rect.top && x < view.rect.right && y < view.rect.bottom) {
+          if (view.id) {
+            this.touchedView = view
+            this.triggerEvent('viewTouchStart', {
+              id: view.id,
+              css: view.css
+            })
+          }
+          break;
+        }
+      }
+    },
+
+    onTouchEnd() {
+      this.touchedView = {}
+    },
+
+    onTouchCancel() {
+      this.touchedView = {}
+    },
+
+    onTouchMove(event) {
+      if (!this.touchedView.id) {
+        return
+      }
+      const {
+        x,
+        y
+      } = event.touches[0]
+      const offsetX = x - this.startX
+      const offsetY = y - this.startY
+      this.startX = x
+      this.startY = y
+      const css = {
+        left: `${this.touchedView.rect.x + offsetX}px`,
+        top: `${this.touchedView.rect.y + offsetY}px`,
+        right: undefined,
+        bottom: undefined
+      }
+      this.doAction({
+        id: this.touchedView.id,
+        css
+      })
+    },
+
     startPaint() {
       if (this.isEmpty(this.properties.palette)) {
         return;
@@ -73,7 +152,7 @@ Component({
           getApp().systemInfo = wx.getSystemInfoSync();
         } catch (e) {
           const error = `Painter get system info failed, ${JSON.stringify(e)}`;
-          that.triggerEvent('imgErr', {
+          this.triggerEvent('imgErr', {
             error: error
           });
           console.error(error);
@@ -82,13 +161,20 @@ Component({
       }
       let screenK = getApp().systemInfo.screenWidth / 750;
       setStringPrototype(screenK, 1);
-      
+
       this.downloadImages().then((palette) => {
+        this.currentPalette = palette
+        this.hasIdViews = []
+        palette.views && palette.views.map(view => {
+          if (view.id) {
+            this.hasIdViews.push(view)
+          }
+        })
         const {
           width,
           height
         } = palette;
-        
+
         if (!width || !height) {
           console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
           return;
@@ -99,13 +185,13 @@ Component({
           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;`,
         });
-        const ctx = wx.createCanvasContext('k-canvas', this);
+        this.globalContext = wx.createCanvasContext('k-canvas', this);
-        const pen = new Pen(ctx, palette);
+        const pen = new Pen(this.globalContext, palette);
         pen.paint(() => {
           this.saveImgToLocal();
         });

painter.wxml

@@ -1 +1,6 @@
-<canvas canvas-id="k-canvas" style="{{painterStyle}}{{customStyle}}" />
+<canvas canvas-id="k-canvas" 
+  style="{{painterStyle}}{{customStyle}}" 
+  bindtouchstart="onTouchStart"
+  bindtouchmove="onTouchMove"
+  bindtouchend="onTouchEnd"
+  bindtouchcancel="onTouchCancel"/>