支持 百分比布局

lib/pen.js

@@ -257,19 +257,19 @@ export default class Painter {
     let x;
     if (view.css && view.css.right) {
       if (typeof view.css.right === 'string') {
-        x = this.style.width - view.css.right.toPx(true);
+        x = this.style.width - view.css.right.toPx(true, this.style.width);
       } else {
         // 可以用数组方式，把文字长度计算进去
         // [right, 文字id, 乘数（默认 1）]
         const rights = view.css.right;
-        x = this.style.width - rights[0].toPx(true) - this.globalWidth[rights[1]] * (rights[2] || 1);
+        x = this.style.width - rights[0].toPx(true, this.style.width) - this.globalWidth[rights[1]] * (rights[2] || 1);
       }
     } else if (view.css && view.css.left) {
       if (typeof view.css.left === 'string') {
-        x = view.css.left.toPx(true);
+        x = view.css.left.toPx(true, this.style.width);
       } else {
         const lefts = view.css.left;
-        x = lefts[0].toPx(true) + this.globalWidth[lefts[1]] * (lefts[2] || 1);
+        x = lefts[0].toPx(true, this.style.width) + this.globalWidth[lefts[1]] * (lefts[2] || 1);
       }
     } else {
       x = 0;
@@ -277,14 +277,14 @@ export default class Painter {
     //const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0);
     let y;
     if (view.css && view.css.bottom) {
-      y = this.style.height - height - view.css.bottom.toPx(true);
+      y = this.style.height - height - view.css.bottom.toPx(true, this.style.height);
     } else {
       if (view.css && view.css.top) {
         if (typeof view.css.top === 'string') {
-          y = view.css.top.toPx(true);
+          y = view.css.top.toPx(true, this.style.height);
         } else {
           const tops = view.css.top;
-          y = tops[0].toPx(true) + this.globalHeight[tops[1]] * (tops[2] || 1);
+          y = tops[0].toPx(true, this.style.height) + this.globalHeight[tops[1]] * (tops[2] || 1);
         }
       } else {
         y = 0

painter.js

@@ -28,7 +28,7 @@ Component({
     },
     palette: {
       type: Object,
-      observer: function(newVal, oldVal) {
+      observer: function (newVal, oldVal) {
         if (this.isNeedRefresh(newVal, oldVal)) {
           this.paintCount = 0;
           this.startPaint();
@@ -37,7 +37,7 @@ Component({
     },
     dancePalette: {
       type: Object,
-      observer: function(newVal, oldVal) {
+      observer: function (newVal, oldVal) {
         if (!this.isEmpty(newVal)) {
           this.initDancePalette(newVal);
         }
@@ -54,7 +54,7 @@ Component({
     },
     action: {
       type: Object,
-      observer: function(newVal, oldVal) {
+      observer: function (newVal, oldVal) {
         if (newVal) {
           this.doAction(newVal)
         }
@@ -88,7 +88,7 @@ Component({
       return true;
     },
 
-    getBox(rect) {
+    getBox(rect, type) {
       const boxArea = {
         type: 'rect',
         css: {
@@ -96,11 +96,16 @@ Component({
           width: `${rect.right - rect.left}px`,
           left: `${rect.left}px`,
           top: `${rect.top}px`,
-          borderWidth: '2rpx',
+          borderWidth: '4rpx',
-          borderColor: '#0000ff',
+          borderColor: '#1A7AF8',
           color: 'transparent'
         }
       }
+      if (type === 'text') {
+        boxArea.css = Object.assign({}, boxArea.css, {
+          borderStyle: 'dashed'
+        })
+      }
       if (this.properties.customActionStyle && this.properties.customActionStyle.border) {
         boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border)
       }
@@ -219,7 +224,7 @@ Component({
       this.block = {
         width: this.currentPalette.width,
         height: this.currentPalette.height,
-        views: this.isEmpty(doView) ? [] : [this.getBox(rect)]
+        views: this.isEmpty(doView) ? [] : [this.getBox(rect, doView.type)]
       }
       if (css && css.scalable) {
         this.block.views.push(this.getScaleIcon(rect, type))
@@ -310,13 +315,8 @@ Component({
           }
           this.touchedView = touchAble[i].view
           this.findedIndex = touchAble[i].index
-          const {
-            id,
-            css
-          } = this.touchedView
           this.triggerEvent('touchStart', {
-            id: id,
+            view: this.touchedView
-            css: css,
           })
         }
       }
@@ -628,10 +628,10 @@ Component({
       setTimeout(() => {
         wx.canvasToTempFilePath({
           canvasId: 'photo',
-          success: function(res) {
+          success: function (res) {
             that.getImageInfo(res.tempFilePath);
           },
-          fail: function(error) {
+          fail: function (error) {
             console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
             that.triggerEvent('imgErr', {
               error: error
@@ -681,16 +681,17 @@ function setStringPrototype(screenK, scale) {
   /**
    * 是否支持负数
    * @param {Boolean} minus 是否支持负数
+   * @param {Number} baseSize 当设置了 % 号时，设置的基准值
    */
-  String.prototype.toPx = function toPx(minus) {
+  String.prototype.toPx = function toPx(minus, baseSize) {
     if (this === '0') {
       return 0
     }
     let reg;
     if (minus) {
-      reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;
+      reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px|%)$/g;
     } else {
-      reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;
+      reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px|%)$/g;
     }
     const results = reg.exec(this);
     if (!this || !results) {
@@ -705,7 +706,9 @@ function setStringPrototype(screenK, scale) {
       res = Math.round(value * (screenK || 0.5) * (scale || 1));
     } else if (unit === 'px') {
       res = Math.round(value * (scale || 1));
+    } else if (unit === '%') {
+      res = Math.round(value * baseSize / 100);
     }
     return res;
   };
-}
+}