223 lines
5.9 KiB
JavaScript
223 lines
5.9 KiB
JavaScript
let App = getApp();
|
||
|
||
Page({
|
||
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
maskHidden:false,
|
||
user_info:[],
|
||
show:true
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function (options) {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function () {
|
||
this.getUserInfo();
|
||
this.formSubmit();
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面隐藏
|
||
*/
|
||
onHide: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload: function () {
|
||
|
||
},
|
||
|
||
getUserInfo: function () {
|
||
let _this = this;
|
||
App._post_form('topic/getUserInfo', {
|
||
user_id: wx.getStorageSync('user_id')
|
||
}, function(result) {
|
||
var user_info = result.data.data;
|
||
if(user_info.wancheng == 1){
|
||
_this.setData({
|
||
show:false
|
||
});
|
||
}
|
||
_this.setData({
|
||
user_info:user_info
|
||
});
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取图片设置数据
|
||
*/
|
||
getImageData: function() {
|
||
console.log('getImageData');
|
||
let _this = this;
|
||
var evalatImage,avatarUrl;
|
||
App._get('wxapp/imageSet', {}, function(result) {
|
||
var imageSet = result.data.new_values;
|
||
wx.getImageInfo({
|
||
src: imageSet.haibaibg,
|
||
success(res) {
|
||
evalatImage = res.path
|
||
wx.getImageInfo({
|
||
src: _this.data.user_info.avatarUrl,
|
||
success(res) {
|
||
avatarUrl = res.path;
|
||
_this.createNewImg(evalatImage,avatarUrl);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
});
|
||
},
|
||
//点击生成海报
|
||
formSubmit: function (e) {
|
||
var that = this;
|
||
wx.showToast({
|
||
title: '海报生成中...',
|
||
icon: 'loading',
|
||
duration: 1000
|
||
});
|
||
that.getImageData();
|
||
setTimeout(function () {
|
||
wx.hideToast()
|
||
that.setData({
|
||
maskHidden: true
|
||
});
|
||
}, 1000);
|
||
},
|
||
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
|
||
createNewImg: function (evalatImage,avatarUrl) {
|
||
var that = this;
|
||
var user_info = that.data.user_info;
|
||
var context = wx.createCanvasContext('mycanvas');
|
||
context.drawImage(evalatImage, 0, 0, 375, 660);
|
||
context.save();//绘制背景
|
||
|
||
//绘制头像
|
||
context.beginPath(); //开始绘制
|
||
//先画个圆，前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
|
||
context.arc(80 / 2 + 145, 80 / 2 + 180, 80 / 2, 0, Math.PI * 2, false);
|
||
context.clip(); //画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
|
||
context.drawImage(avatarUrl, 145, 180, 80, 80);
|
||
context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制
|
||
|
||
// 昵称
|
||
context.setFontSize(18);
|
||
context.setTextAlign('center');
|
||
context.setFillStyle('#333');
|
||
context.fillText(user_info.nickName,187, 300);
|
||
|
||
//历时
|
||
context.setFontSize(14);
|
||
context.setTextAlign('center');
|
||
context.setFillStyle('#333');
|
||
context.fillText('历时:'+user_info.days+'天',187, 330);
|
||
|
||
//排名
|
||
context.setFontSize(14);
|
||
context.setTextAlign('center');
|
||
context.setFillStyle('#333');
|
||
context.fillText('排名:'+user_info.sort+'名',187, 360);
|
||
|
||
//历时日期
|
||
context.setFontSize(14);
|
||
context.setTextAlign('center');
|
||
context.setFillStyle('#333');
|
||
context.fillText(user_info.date,187, 390);
|
||
|
||
context.draw(true);//true表示保留之前绘制内容
|
||
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
|
||
setTimeout(function () {
|
||
wx.canvasToTempFilePath({
|
||
canvasId: 'mycanvas',
|
||
success: function (res) {
|
||
var tempFilePath = res.tempFilePath;
|
||
that.setData({
|
||
imagePath: tempFilePath
|
||
});
|
||
},
|
||
fail: function (res) {
|
||
console.log(res);
|
||
}
|
||
});
|
||
}, 1000);
|
||
},
|
||
//文本换行
|
||
dealWords(options) {
|
||
options.ctx.setFontSize(options.fontSize);//设置字体大小
|
||
var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
|
||
var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
|
||
var endPos = 0;//当前字符串的截断点
|
||
for (var j = 0; j < count; j++) {
|
||
var nowStr = options.word.slice(endPos);//当前剩余的字符串
|
||
var rowWid = 0;//每一行当前宽度
|
||
if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
|
||
for (var m = 0; m < nowStr.length; m++) {
|
||
rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
|
||
if (rowWid > options.maxWidth) {
|
||
if (j === options.maxLine - 1) { //如果是最后一行
|
||
options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 25); //(j+1)*20这是每一行的高度
|
||
} else {
|
||
options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 25);
|
||
}
|
||
endPos += m;//下次截断点
|
||
break;
|
||
}
|
||
}
|
||
} else {//如果当前的字符串宽度小于最大宽度就直接输出
|
||
options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 25);
|
||
}
|
||
}
|
||
},
|
||
//点击保存到相册
|
||
baocun: function () {
|
||
var that = this
|
||
wx.saveImageToPhotosAlbum({
|
||
filePath: that.data.imagePath,
|
||
success(res) {
|
||
wx.showModal({
|
||
content: '图片已保存到相册，赶紧晒一下吧~',
|
||
showCancel: false,
|
||
confirmText: '好的',
|
||
confirmColor: '#333',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
/* 该隐藏的隐藏 */
|
||
that.setData({
|
||
maskHidden: false
|
||
})
|
||
}
|
||
}, fail: function (res) {
|
||
console.log(11111)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|