海报页bug修复

496_dongfengqichen/pages/poster/poster.js

@@ -1,5 +1,14 @@
 // pages/poster/poster.js
 const app = getApp()
+//用于绘制海报的图片
+let _savePostBg = []
+//用户绘制海报的小程序码
+let _saveQrCodeUrl = ""
+//用户绘制头像的地址
+let _saveUserHeadUrl = ""
+let _totalDownloadTask = 10;//绘制需要下载的图片总数
+let _currentSuccessDownloadTask = 0;//已完成下载的图片数
+let _saveImg = false;
 Page({
 
   /**
@@ -54,6 +63,9 @@ Page({
             src: this.data.imgUrl + '/newImages3/tempImg'+(i+1)+'.jpg?v=009',
             success: res => {
               this.data.posterBg[i] = res.path;
+              _savePostBg[i] = res.path;
+              _currentSuccessDownloadTask ++;
+              this.posterDrawing(this.data.swiperCurrent + 1);
             }
           })
         }
@@ -61,6 +73,9 @@ Page({
           src: this.data.qrCodeUrl,
           success: res => {
             this.data.qrCodeUrl = res.path;
+            _saveQrCodeUrl = res.path;
+            _currentSuccessDownloadTask++;
+            this.posterDrawing(this.data.swiperCurrent + 1);
           }
         })
         if (this.data.userHead) {
@@ -68,6 +83,9 @@ Page({
             src: this.data.userHead,
             success: res => {
               this.data.userHead = res.path;
+              _saveUserHeadUrl = res.path;
+              _currentSuccessDownloadTask++;
+              this.posterDrawing(this.data.swiperCurrent + 1);
             }
           })
         }
@@ -81,24 +99,32 @@ Page({
           src: this.data.imgUrl + '/newImages4/5.png?v=004',
           success: res => {
             this.data.numBg[0] = res.path;
+            _currentSuccessDownloadTask++;
+            this.posterDrawing(this.data.swiperCurrent + 1);
           }
         })
         wx.getImageInfo({//缓存数字背景2
           src: this.data.imgUrl + '/newImages4/6.png?v=004',
           success: res => {
             this.data.numBg[1] = res.path;
+            _currentSuccessDownloadTask++;
+            this.posterDrawing(this.data.swiperCurrent + 1);
           }
         })
         wx.getImageInfo({//缓存数字背景3
           src: this.data.imgUrl + '/newImages4/4.png?v=004',
           success: res => {
             this.data.numBg[2] = res.path;
+            _currentSuccessDownloadTask++;
+            this.posterDrawing(this.data.swiperCurrent + 1);
           }
         })
         wx.getImageInfo({//缓存数字背景4
           src: this.data.imgUrl + '/newImages3/51.png?v=005',
           success: res => {
             this.data.numBg[3] = res.path;
+            _currentSuccessDownloadTask++;
+            this.posterDrawing(this.data.swiperCurrent + 1);
           }
         })
 
@@ -107,6 +133,8 @@ Page({
           src: this.data.imgUrl + "/newImages/posterBottom.png?v=002",
           success: res => {
             this.data.posterBottom = res.path;
+            _currentSuccessDownloadTask++;
+            this.posterDrawing(this.data.swiperCurrent + 1);
           }
         })
         for (let i = 0; i < this.data.rankNum.length; i++) {
@@ -114,6 +142,8 @@ Page({
             src: this.data.imgUrl + '/images/nums/' + this.data.rankNum[i] + '.png',
             success: res => {
               this.data.rankNum[i] = res.path;
+              _currentSuccessDownloadTask ++;
+              this.posterDrawing(this.data.swiperCurrent + 1);
             }
           })
         }
@@ -124,7 +154,9 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    _totalDownloadTask = 10;
+    _currentSuccessDownloadTask = 0;
+    _saveImg = false;
   },
 
   /**
@@ -172,6 +204,8 @@ Page({
         title: '海报合成中',
         mask:true
       })
+      console.log("swiperCurrent = " + this.data.swiperCurrent)
+      _saveImg = true;
       this.posterDrawing(this.data.swiperCurrent + 1);
     }else{
       this.savePic();
@@ -229,6 +263,13 @@ Page({
     })
   },
   posterDrawing: function (e) {//海报绘制
+    // console.log("_totalDownloadTask = " + _totalDownloadTask)
+    // console.log("_currentSuccessDownloadTask = " + _currentSuccessDownloadTask)
+    //图片尚未下载完成，禁止绘制
+    if(_currentSuccessDownloadTask < _totalDownloadTask || !_saveImg){
+      return;
+    }
+    // return;
     var ctx = this.data.canvasContron;//canvas对象
     var scale = this.data.windowScale;//屏幕缩放比
     //背景
@@ -239,6 +280,7 @@ Page({
     //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
     ctx.arc(scale * 80 / 2 + scale * 84, scale * 80 / 2 + scale * 908, scale * 80 / 2, 0, Math.PI * 2, false);
     ctx.clip(); //剪切
+    console.log(this.data.userHead)
     ctx.drawImage(this.data.userHead, scale * 84, scale * 908, scale * 80, scale * 80); //头像
     ctx.restore(); //恢复之前保存的绘图上下文
     //名称
@@ -315,6 +357,7 @@ Page({
         }else{
           this.data.rankNum = "0".split("");
         }
+        _totalDownloadTask += this.data.rankNum.length;
         this.setData({
           rankNum: this.data.rankNum
         })