可获取文本宽度

lib/pen.js

@@ -5,6 +5,7 @@ export default class Painter {
   constructor(ctx, data) {
     this.ctx = ctx;
     this.data = data;
+    this.globalTextWidth = {};
   }
 
   paint(callback) {
@@ -94,8 +95,8 @@ export default class Painter {
       this.ctx.fill();
       // 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性
       if (!(getApp().systemInfo &&
-          getApp().systemInfo.version <= '6.6.6' &&
+        getApp().systemInfo.version <= '6.6.6' &&
-          getApp().systemInfo.platform === 'ios')) {
+        getApp().systemInfo.platform === 'ios')) {
         this.ctx.clip();
       }
       this.ctx.setGlobalAlpha(1);
@@ -146,7 +147,7 @@ export default class Painter {
     let height;
     let extra;
     switch (view.type) {
-      case 'text':
+      case 'text': {
         const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal';
         view.css.fontSize = view.css.fontSize ? view.css.fontSize : '20rpx';
         this.ctx.font = `normal ${fontWeight} ${view.css.fontSize.toPx()}px ${view.css.fontFamily ? view.css.fontFamily : 'sans-serif'}`;
@@ -160,15 +161,17 @@ export default class Painter {
         height = lineHeight * lines;
         extra = {
           lines: lines,
-          lineHeight: lineHeight
+          lineHeight: lineHeight,
         };
         break;
-      case 'image':
+      }
+      case 'image': {
         // image 如果未设置长宽，则使用图片本身的长宽
         const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;
         width = view.css && view.css.width ? view.css.width.toPx() : Math.round(view.sWidth / ratio);
         height = view.css && view.css.height ? view.css.height.toPx() : Math.round(view.sHeight / ratio);
         break;
+      }
       default:
         if (!(view.css.width && view.css.height)) {
           console.error('You should set width and height');
@@ -178,7 +181,26 @@ export default class Painter {
         height = view.css.height.toPx();
         break;
     }
-    const x = view.css && view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css && view.css.left ? view.css.left.toPx(true) : 0);
+    let x;
+    if (view.css && view.css.right) {
+      if (typeof view.css.right === 'string') {
+        x = this.style.width - view.css.right.toPx(true);
+      } else {
+        // 可以用数组方式，把文字长度计算进去
+        // [right, 文字id, 乘数（默认 1）]
+        const rights = view.css.right;
+        x = this.style.width - rights[0].toPx(true) - this.globalTextWidth[rights[1]] * (rights[2] || 1);
+      }
+    } else if (view.css && view.css.left) {
+      if (typeof view.css.left === 'string') {
+        x = view.css.left.toPx(true);
+      } else {
+        const lefts = view.css.left;
+        x = lefts[0].toPx(true) + this.globalTextWidth[lefts[1]] * (lefts[2] || 1);
+      }
+    } else {
+      x = 0;
+    }
     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);
 
     const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0;
@@ -218,33 +240,33 @@ export default class Painter {
       height: rawHeight,
     } = this._preProcess(view, true);
 
-    let {
+    const {
       background,
-      padding
+      padding,
     } = view.css;
     let pd = [0, 0, 0, 0];
     if (padding) {
-      let pdg = padding.split(/\s+/);
+      const pdg = padding.split(/\s+/);
-      if (pdg.length == 1) {
+      if (pdg.length === 1) {
-        let x = pdg[0].toPx();
+        const x = pdg[0].toPx();
         pd = [x, x, x, x];
       }
-      if (pdg.length == 2) {
+      if (pdg.length === 2) {
-        let x = pdg[0].toPx();
+        const x = pdg[0].toPx();
-        let y = pdg[1].toPx();
+        const y = pdg[1].toPx();
         pd = [x, y, x, y];
       }
-      if (pdg.length == 3) {
+      if (pdg.length === 3) {
-        let x = pdg[0].toPx();
+        const x = pdg[0].toPx();
-        let y = pdg[1].toPx();
+        const y = pdg[1].toPx();
-        let z = pdg[2].toPx();
+        const z = pdg[2].toPx();
         pd = [x, y, z, y];
       }
-      if (pdg.length == 4) {
+      if (pdg.length === 4) {
-        let x = pdg[0].toPx();
+        const x = pdg[0].toPx();
-        let y = pdg[1].toPx();
+        const y = pdg[1].toPx();
-        let z = pdg[2].toPx();
+        const z = pdg[2].toPx();
-        let a = pdg[3].toPx();
+        const a = pdg[3].toPx();
         pd = [x, y, z, a];
       }
     }
@@ -323,11 +345,16 @@ export default class Painter {
     this.ctx.setFillStyle(view.css.color || 'black');
     const {
       lines,
-      lineHeight
+      lineHeight,
     } = extra;
     const preLineLength = Math.round(view.text.length / lines);
     let start = 0;
     let alreadyCount = 0;
+    // 如果设置了id，则保留 text 的长度
+    if (view.id) {
+      const textWidth = this.ctx.measureText(view.text).width;
+      this.globalTextWidth[view.id] = width ? (textWidth < width ? textWidth : width) : textWidth;
+    }
     for (let i = 0; i < lines; ++i) {
       alreadyCount = preLineLength;
       let text = view.text.substr(start, alreadyCount);
@@ -425,14 +452,14 @@ export default class Painter {
     if (!view.css || !view.css.shadow) {
       return;
     }
-    let box = view.css.shadow.replace(/,\s+/g, ',').split(' ');
+    const box = view.css.shadow.replace(/,\s+/g, ',').split(' ');
     if (box.length > 4) {
       console.error('shadow don\'t spread option');
       return;
     }
-    this.ctx.shadowOffsetX = parseInt(box[0])
+    this.ctx.shadowOffsetX = parseInt(box[0], 10);
-    this.ctx.shadowOffsetY = parseInt(box[1])
+    this.ctx.shadowOffsetY = parseInt(box[1], 10);
-    this.ctx.shadowBlur = parseInt(box[2])
+    this.ctx.shadowBlur = parseInt(box[2], 10);
     this.ctx.shadowColor = box[3];
   }