merge feat 1.1.10 add pixpixelRatio

jasondu · Jul 9, 2019 · 58537ed · 58537ed
2 parents a8a0bc1 + ab3a11c
commit 58537ed
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -68,6 +68,7 @@ yarn add wxa-plugin-canvas --production
 | height          | Number(单位:rpx)         | 是   | 画布高度                                   |
 | backgroundColor | String                   | 否   | 画布颜色                                   |
 | debug           | Boolean                  | 否   | false隐藏canvas，true显示canvas，默认false |
+| pixelRatio      | Number                   | 否   | 1为一般，值越大越清晰 |
 | preload         | Boolean                  | 否   | true：图片资源预下载 默认false             |
 | hide-loading    | Boolean                  | 否   | true：隐藏loading 默认false                |
 | blocks          | Object Array（对象数组） | 否   | 看下文                                     |

diff --git a/miniprogram_dist/index/index.js b/miniprogram_dist/index/index.js
@@ -120,10 +120,10 @@ const main = {
         this.ctx.closePath();
         this.ctx.restore();
     },
-    downloadResource(images = []) {
+    downloadResource({ images = [], pixelRatio = 1 }) {
         const drawList = [];
         this.drawArr = [];
-        images.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index)));
+        images.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index, pixelRatio)));
         return Promise.all(drawList);
     },
     initCanvas(w, h, debug) {
@@ -245,7 +245,7 @@ const helper = {
     /**
       * 下载图片并获取图片信息
       */
-    _downloadImageAndInfo(image, index) {
+    _downloadImageAndInfo(image, index, pixelRatio) {
         return new Promise((resolve, reject) => {
             const { x, y, url, zIndex } = image;
             const imageUrl = url;
@@ -260,8 +260,8 @@ const helper = {
                     const borderRadius = image.borderRadius || 0;
                     const setWidth = image.width;
                     const setHeight = image.height;
-                    const width = this.toRpx(imgInfo.width);
-                    const height = this.toRpx(imgInfo.height);
+                    const width = this.toRpx(imgInfo.width / pixelRatio);
+                    const height = this.toRpx(imgInfo.height / pixelRatio);
 
                     if (width / height <= setWidth / setHeight) {
                         sx = 0;
@@ -337,9 +337,10 @@ const helper = {
     },
     toPx(rpx, int) {
       if (int) {
-        return parseInt(rpx * this.factor);
+        return parseInt(rpx * this.factor * this.pixelRatio);
       }
-      return rpx * this.factor;
+      return rpx * this.factor * this.pixelRatio;
+
     },
     toRpx(px, int) {
       if (int) {
@@ -428,6 +429,7 @@ Component({
         create(config) {
             this.ctx = wx.createCanvasContext('canvasid', this);
 
+            this.pixelRatio = config.pixelRatio || 1;
             const height = this.getHeight(config);
             this.initCanvas(config.width, height, config.debug)
                 .then(() => {

diff --git a/miniprogram_dist/poster/index.js b/miniprogram_dist/poster/index.js
@@ -17,7 +17,7 @@ Component({
         if (this.data.preload) {
             const poster = this.selectComponent('#poster');
             this.downloadStatus = 'doing';
-            poster.downloadResource(this.data.config.images).then(() => {
+            poster.downloadResource(this.data.config).then(() => {
                 this.downloadStatus = 'success';
                 this.trigger('downloadSuccess');
             }).catch((e) => {
@@ -52,7 +52,7 @@ Component({
                         this.once('downloadFail', (e) => reject(e));
                     }
                 } else {
-                    poster.downloadResource(this.data.config.images)
+                    poster.downloadResource(this.data.config)
                         .then(() => {
                             this.downloadStatus = 'success';
                             resolve();

diff --git a/pages/index/index.js b/pages/index/index.js
@@ -7,6 +7,7 @@ const posterConfig = {
         height: 1334,
         backgroundColor: '#fff',
         debug: false,
+        pixelRatio: 1,
         blocks: [
             {
                 width: 690,