|
|
@@ -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 |
|
|
|
}) |