优化 toPx 过程

lib/downloader.js

@@ -1,3 +1,5 @@
+const util = require('./util');
+
 const SAVED_FILES_KEY = 'savedFiles';
 const KEY_TOTAL_SIZE = 'totalSize';
 const KEY_PATH = 'path';
@@ -26,7 +28,7 @@ export default class Dowloader {
    */
   download(url) {
     return new Promise((resolve, reject) => {
-      if (!(url && url.startsWith('http'))) {
+      if (!(url && util.isValidUrl(url))) {
         resolve(url);
         return;
       }

lib/pen.js

@@ -1,6 +1,3 @@
-import Downloader from './downloader';
-
-const downloader = new Downloader();
 const QR = require('./qrcode.js');
 
 export default class Painter {
@@ -27,7 +24,7 @@ export default class Painter {
     this.ctx.save();
     const {
       width,
-      height
+      height,
     } = this.style;
     const bg = this.data.background;
     this.ctx.translate(width / 2, height / 2);
@@ -78,7 +75,7 @@ export default class Painter {
       // 防止在某些机型上周边有黑框现象，此处如果直接设置 setFillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会
       // setGlobalAlpha 在 1.9.90 起支持，低版本下无效，但把 setFillStyle 设为了 white，相对默认的 black 要好点
       this.ctx.setGlobalAlpha(0);
-      this.ctx.setFillStyle("white");
+      this.ctx.setFillStyle('white');
       this.ctx.beginPath();
       this.ctx.arc(-width / 2 + r, -height / 2 + r, r, 1 * Math.PI, 1.5 * Math.PI);
       this.ctx.lineTo(width / 2 - r, -height / 2);
@@ -124,7 +121,7 @@ export default class Painter {
       case 'center':
         this.ctx.translate(x, y + height / 2);
         break;
-      case "right":
+      case 'right':
         this.ctx.translate(x - width / 2, y + height / 2);
         break;
       default:
@@ -193,4 +190,4 @@ export default class Painter {
   _getAngle(angle) {
     return Number(angle) * Math.PI / 180;
   }
-}
+}

lib/util.js

@@ -0,0 +1,8 @@
+function isValidUrl(url) {
+  return /(ht|f)tp(s?):\/\/([^ \\/]*\.)+[^ \\/]*(:[0-9]+)?\/?/.test(url);
+}
+
+module.exports = {
+  isValidUrl,
+};
+

painter.js

@@ -1,6 +1,8 @@
 import Pen from './lib/pen';
 import Downloader from './lib/downloader';
 
+const util = require('./lib/util');
+
 const downloader = new Downloader();
 
 // 最大尝试的绘制次数
@@ -33,6 +35,10 @@ Component({
     painterStyle: '',
   },
 
+  attached() {
+    setStringPrototype();
+  },
+
   methods: {
     /**
      * 判断一个 object 是否为 空
@@ -57,15 +63,19 @@ Component({
         return;
       }
 
-      if (!(getApp().systemInfo && getApp().systemInfo.screenWidth)) {
+      if (!getApp().painterScreenRatio) {
         try {
-          getApp().systemInfo = wx.getSystemInfoSync();
+          const systemInfo = wx.getSystemInfoSync();
+          getApp().painterScreenRatio = systemInfo.screenWidth / 750;
         } catch (e) {
-          console.error(`painter get system info failed, ${JSON.stringify(e)}`);
+          const error = `Painter get system info failed, ${JSON.stringify(e)}`;
+          that.triggerEvent('imgErr', { error: error });
+          console.error(error);
+          return;
         }
       }
-      screenK = getApp().systemInfo.screenWidth / 750;
-      
+      screenK = getApp().painterScreenRatio;
+
       this.downloadImages().then((palette) => {
         const { width, height } = palette;
         this.canvasWidthInPx = width.toPx();
@@ -82,25 +92,24 @@ Component({
         pen.paint(() => {
           this.saveImg();
         });
-      })
+      });
     },
 
     downloadImages() {
       return new Promise((resolve, reject) => {
         let preCount = 0;
         let completeCount = 0;
-        const allDownloads = [];
         const paletteCopy = JSON.parse(JSON.stringify(this.properties.palette));
-        if (paletteCopy.background && /https?:\/\//.test(paletteCopy.background)) {
-          preCount ++;
+        if (paletteCopy.background && util.isValidUrl(paletteCopy.background)) {
+          preCount++;
           downloader.download(paletteCopy.background).then((path) => {
             paletteCopy.background = path;
-            completeCount ++;
+            completeCount++;
             if (preCount === completeCount) {
               resolve(paletteCopy);
             }
           }, () => {
-            completeCount ++;
+            completeCount++;
             if (preCount === completeCount) {
               resolve(paletteCopy);
             }
@@ -108,16 +117,17 @@ Component({
         }
         if (paletteCopy.views) {
           for (const view of paletteCopy.views) {
-            if (view && view.type === 'image' && view.url && /https?:\/\//.test(view.url)) {
-              preCount ++;
+            if (view && view.type === 'image' && view.url && util.isValidUrl(view.url)) {
+              preCount++;
+              /* eslint-disable no-loop-func */
               downloader.download(view.url).then((path) => {
                 view.url = path;
-                completeCount ++;
+                completeCount++;
                 if (preCount === completeCount) {
                   resolve(paletteCopy);
                 }
               }, () => {
-                completeCount ++;
+                completeCount++;
                 if (preCount === completeCount) {
                   resolve(paletteCopy);
                 }
@@ -128,7 +138,7 @@ Component({
         if (preCount === 0) {
           resolve(paletteCopy);
         }
-      })
+      });
     },
 
     saveImg() {
@@ -170,24 +180,26 @@ Component({
   },
 });
 
-let screenK = 1;
+let screenK = 0.5;
 
-/* eslint-disable no-extend-native */
-String.prototype.toPx = function toPx() {
-  const reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;
-  const results = reg.exec(this);
-  if (!this || !results) {
-    console.error(`The size: ${this} is illegal`);
-    return 0;
-  }
-  const unit = results[2];
-  const value = parseFloat(this);
+function setStringPrototype() {
+  /* eslint-disable no-extend-native */
+  String.prototype.toPx = function toPx() {
+    const reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;
+    const results = reg.exec(this);
+    if (!this || !results) {
+      console.error(`The size: ${this} is illegal`);
+      return 0;
+    }
+    const unit = results[2];
+    const value = parseFloat(this);
 
-  let res = 0;
-  if (unit === 'rpx') {
-    res = value * screenK;
-  } else if (unit === 'px') {
-    res = value;
-  }
-  return res;
-};
+    let res = 0;
+    if (unit === 'rpx') {
+      res = value * screenK;
+    } else if (unit === 'px') {
+      res = value;
+    }
+    return res;
+  };
+}

painter.wxss

@@ -1 +0,0 @@
-/* src/components/kool-canvas/kool-canvas.wxss */