jianbuzou_v2/pages/topic/xunzhang.js

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