diff --git a/lib/pen.js b/lib/pen.js index a109ef2..fcda199 100644 --- a/lib/pen.js +++ b/lib/pen.js @@ -215,7 +215,29 @@ export default class Painter { width, height, } = this._preProcess(view); - this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height); + // 获得缩放到图片大小级别的裁减框 + let rWidth; + let rHeight; + let startX = 0; + let startY = 0; + if (width > height) { + rHeight = Math.round((view.sWidth / width) * height); + rWidth = view.sWidth; + } else { + rWidth = Math.round((view.sHeight / height) * width); + rHeight = view.sHeight; + } + if (view.sWidth > rWidth) { + startX = Math.round((view.sWidth - rWidth) / 2); + } + if (view.sHeight > rHeight) { + startY = Math.round((view.sHeight - rHeight) / 2); + } + if (view.css.mode === 'aspectFit') { + 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); + } this.ctx.restore(); this._doBorder(view, width, height); } diff --git a/painter.js b/painter.js index ab79355..54fc50f 100644 --- a/painter.js +++ b/painter.js @@ -99,7 +99,7 @@ Component({ let preCount = 0; let completeCount = 0; const paletteCopy = JSON.parse(JSON.stringify(this.properties.palette)); - if (paletteCopy.background && util.isValidUrl(paletteCopy.background)) { + if (paletteCopy.background) { preCount++; downloader.download(paletteCopy.background).then((path) => { paletteCopy.background = path; @@ -116,15 +116,28 @@ Component({ } if (paletteCopy.views) { for (const view of paletteCopy.views) { - if (view && view.type === 'image' && view.url && util.isValidUrl(view.url)) { + if (view && view.type === 'image' && view.url) { preCount++; /* eslint-disable no-loop-func */ downloader.download(view.url).then((path) => { view.url = path; - completeCount++; - if (preCount === completeCount) { - resolve(paletteCopy); - } + wx.getImageInfo({ + src: view.url, + success: (res) => { + // 获得一下图片信息,供后续裁减使用 + view.sWidth = res.width; + view.sHeight = res.height; + }, + fail: (error) => { + console.error(`getImageInfo failed, ${Json.stringify(error)}`); + }, + complete: () => { + completeCount++; + if (preCount === completeCount) { + resolve(paletteCopy); + } + }, + }); }, () => { completeCount++; if (preCount === completeCount) {