From a2d03ea50d1aa372dd2e6e87c7ec147a15a6428c Mon Sep 17 00:00:00 2001
From: CPPAlien <creaspan@gmail.com>
Date: Tue, 7 Aug 2018 15:28:35 +0800
Subject: [PATCH] =?UTF-8?q?image=20=E5=8A=A0=E5=85=A5=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=95=BF=E5=AE=BD=E7=9A=84=E6=83=85=E5=86=B5=E5=92=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/pen.js | 72 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/lib/pen.js b/lib/pen.js
index 5463df7..4a8c5fa 100644
--- a/lib/pen.js
+++ b/lib/pen.js
@@ -47,7 +47,7 @@ export default class Painter {
 
   _drawAbsolute(view) {
     // 证明 css 为数组形式，需要合并
-    if (view.css.length) {
+    if (view.css && view.css.length) {
       /* eslint-disable no-param-reassign */
       view.css = Object.assign(...view.css);
     }
@@ -103,6 +103,9 @@ export default class Painter {
    * 画边框
    */
   _doBorder(view, width, height) {
+    if (!view.css) {
+      return;
+    }
     const {
       borderRadius,
       borderWidth,
@@ -138,38 +141,45 @@ export default class Painter {
   _preProcess(view, notClip) {
     let width;
     let height;
-    let x;
-    let y;
     let extra;
-    if (view.type === '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 sans-serif`;
-      // this.ctx.setFontSize(view.css.fontSize.toPx());
-      const textLength = this.ctx.measureText(view.text).width;
-      width = view.css.width ? view.css.width.toPx() : textLength;
-      // 计算行数
-      const calLines = Math.ceil(textLength / width);
-      const lines = view.css.maxLines < calLines ? view.css.maxLines : calLines;
-      const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx();
-      height = lineHeight * lines;
-
-      x = view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css.left ? view.css.left.toPx(true) : 0);
-      y = view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css.top ? view.css.top.toPx(true) : 0);
-      extra = { lines: lines, lineHeight: lineHeight };
-    } else {
-      if (!(view.css.width && view.css.height)) {
-        console.error('You should set width and height');
-        return;
+    switch (view.type) {
+      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 sans-serif`;
+        // this.ctx.setFontSize(view.css.fontSize.toPx());
+        const textLength = this.ctx.measureText(view.text).width;
+        width = view.css.width ? view.css.width.toPx() : textLength;
+        // 计算行数
+        const calLines = Math.ceil(textLength / width);
+        const lines = view.css.maxLines < calLines ? view.css.maxLines : calLines;
+        const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx();
+        height = lineHeight * lines;
+        extra = { lines: lines, lineHeight: lineHeight };
+        break;
+      }
+      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');
+          return;
+        }
+        width = view.css.width.toPx();
+        height = view.css.height.toPx();
       }
-      width = view.css.width.toPx();
-      height = view.css.height.toPx();
-      x = view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css.left ? view.css.left.toPx(true) : 0);
-      y = view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css.top ? view.css.top.toPx(true) : 0);
     }
-    const angle = view.css.rotate ? this._getAngle(view.css.rotate) : 0;
+    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);
+    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;
     // 当设置了 right 时，默认 align 用 right，反之用 left
-    const align = view.css.align ? view.css.align : (view.css.right ? 'right' : 'left');
+    const align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left');
     switch (align) {
       case 'center':
         this.ctx.translate(x, y + height / 2);
@@ -182,7 +192,7 @@ export default class Painter {
         break;
     }
     this.ctx.rotate(angle);
-    if (!notClip) {
+    if (!notClip && view.css && view.css.borderRadius) {
       this._doClip(view.css.borderRadius, width, height);
     }
 
@@ -233,7 +243,7 @@ export default class Painter {
     if (view.sHeight > rHeight) {
       startY = Math.round((view.sHeight - rHeight) / 2);
     }
-    if (view.css.mode === 'scaleToFill') {
+    if (view.css && view.css.mode === 'scaleToFill') {
       this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
     } else {
       this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height);