diff --git a/lib/downloader.js b/lib/downloader.js index 19b1f3c..3dc6329 100644 --- a/lib/downloader.js +++ b/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; } diff --git a/lib/pen.js b/lib/pen.js index 31dae80..7bd1545 100644 --- a/lib/pen.js +++ b/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; } -} \ No newline at end of file +} diff --git a/lib/util.js b/lib/util.js new file mode 100644 index 0000000..eef0589 --- /dev/null +++ b/lib/util.js @@ -0,0 +1,8 @@ +function isValidUrl(url) { + return /(ht|f)tp(s?):\/\/([^ \\/]*\.)+[^ \\/]*(:[0-9]+)?\/?/.test(url); +} + +module.exports = { + isValidUrl, +}; + diff --git a/painter.js b/painter.js index c3b62f8..625b1c5 100644 --- a/painter.js +++ b/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; + }; +} diff --git a/painter.wxss b/painter.wxss deleted file mode 100644 index ca2725c..0000000 --- a/painter.wxss +++ /dev/null @@ -1 +0,0 @@ -/* src/components/kool-canvas/kool-canvas.wxss */