From 04f1e181a581a4471727ab767dde4723dcfefc3d Mon Sep 17 00:00:00 2001
From: Charles Lo <charleslo@sina.com>
Date: Sat, 11 Aug 2018 18:27:34 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=AF=B9=20background:=20transparent=20?=
 =?UTF-8?q?=E5=80=BC=E5=81=9A=E7=89=B9=E6=AE=8A=E5=A4=84=E7=90=86=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=E9=80=8F=E6=98=8E=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复指定 transparent 属性值会当做本地图片处理以至于出现 VM22878:2 Failed to load local image resource 的错误，已在背景填充颜色逻辑上对 transparent 做了特殊判断处理
---
 lib/pen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/pen.js b/lib/pen.js
index 4a8c5fa..c4e803b 100644
--- a/lib/pen.js
+++ b/lib/pen.js
@@ -34,7 +34,7 @@ export default class Painter {
       // 如果未设置背景，则默认使用白色
       this.ctx.setFillStyle('#fff');
       this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
-    } else if (bg.startsWith('#') || bg.startsWith('rgba')) {
+    } else if (bg.startsWith('#') || bg.startsWith('rgba') || bg.toLowerCase() === 'transparent') {
       // 背景填充颜色
       this.ctx.setFillStyle(bg);
       this.ctx.fillRect(-(width / 2), -(height / 2), width, height);

From eabd1fe26a07e1428f17c5b884c83650c2a57d14 Mon Sep 17 00:00:00 2001
From: Charles Lo <charleslo@sina.com>
Date: Wed, 15 Aug 2018 19:32:07 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E9=80=9A=E8=BF=87=20properties=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20dirty=20=E5=B1=9E=E6=80=A7=E8=AE=A9=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E8=80=85=E6=8E=A7=E5=88=B6=E6=98=AF=E5=90=A6=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E8=84=8F=E6=A3=80=E6=9F=A5=EF=BC=8C=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=20mpvue=20=E4=B8=8B=E5=BE=AA=E7=8E=AF=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 dirty 属性启用脏检查，默认关闭状态。由于 mpvue 机制的原因，更新了 data 中的一个数据会导致了全部 data 数据都被刷新，从而触发 Painter 重绘。已使用 https://github.com/epoberezkin/fast-deep-equal 这个短小精悍的库进行了脏检查，mpvue 开发者可使用 dirty 属性来避免循环渲染的问题
---
 lib/util.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 painter.js  |  7 ++++++-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/lib/util.js b/lib/util.js
index 98a1d94..672cc81 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -3,7 +3,65 @@ function isValidUrl(url) {
   return /(ht|f)tp(s?):\/\/([^ \\/]*\.)+[^ \\/]*(:[0-9]+)?\/?/.test(url);
 }
 
+/**
+ * 深度对比两个对象是否一致
+ * from: https://github.com/epoberezkin/fast-deep-equal
+ * @param  {Object} a 对象a
+ * @param  {Object} b 对象b
+ * @return {Boolean}   是否相同
+ */
+function equal(a, b) {
+  if (a === b) return true;
+
+  if (a && b && typeof a == 'object' && typeof b == 'object') {
+    var arrA = Array.isArray(a)
+      , arrB = Array.isArray(b)
+      , i
+      , length
+      , key;
+
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (!equal(a[i], b[i])) return false;
+      return true;
+    }
+
+    if (arrA != arrB) return false;
+
+    var dateA = a instanceof Date
+      , dateB = b instanceof Date;
+    if (dateA != dateB) return false;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+
+    var regexpA = a instanceof RegExp
+      , regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return false;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+
+    var keys = Object.keys(a);
+    length = keys.length;
+
+    if (length !== Object.keys(b).length)
+      return false;
+
+    for (i = length; i-- !== 0;)
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+
+    for (i = length; i-- !== 0;) {
+      key = keys[i];
+      if (!equal(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  return a!==a && b!==b;
+}
+
 module.exports = {
   isValidUrl,
+  equal
 };
 
diff --git a/painter.js b/painter.js
index 73d9bd5..4776de4 100644
--- a/painter.js
+++ b/painter.js
@@ -27,6 +27,11 @@ Component({
         }
       },
     },
+    // 启用脏检查，默认 false
+    dirty: {
+      type: Boolean,
+      value: false
+    }
   },
 
   data: {
@@ -52,7 +57,7 @@ Component({
     },
 
     isNeedRefresh(newVal, oldVal) {
-      if (!newVal || this.isEmpty(newVal)) {
+      if (!newVal || this.isEmpty(newVal) || (this.data.dirty && util.equal(newVal, oldVal))) {
         return false;
       }
       return true;

From e6cbfd37be7dc54e9b7aec009e46d79a78911c08 Mon Sep 17 00:00:00 2001
From: CPPAlien <creaspan@gmail.com>
Date: Fri, 17 Aug 2018 12:24:44 +0800
Subject: [PATCH 3/3] fix lint

---
 lib/util.js | 1 +
 painter.js  | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/util.js b/lib/util.js
index 672cc81..292df2a 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -10,6 +10,7 @@ function isValidUrl(url) {
  * @param  {Object} b 对象b
  * @return {Boolean}   是否相同
  */
+/* eslint-disable */
 function equal(a, b) {
   if (a === b) return true;
 
diff --git a/painter.js b/painter.js
index 4776de4..871013c 100644
--- a/painter.js
+++ b/painter.js
@@ -30,8 +30,8 @@ Component({
     // 启用脏检查，默认 false
     dirty: {
       type: Boolean,
-      value: false
-    }
+      value: false,
+    },
   },
 
   data: {