// 头像
drawImg(ctx, windowWidth, windowHeight) {
var that = this;
ctx.save(); //恢复之前保存的绘图上下文
that.drawHeader(ctx, windowWidth, windowHeight);
wx.getImageInfo({
src: that.data.userInfo.avatarUrl,
success(res) {
console.log(res)
console.log(res.width)
console.log(res.height);
console.log(windowWidth);
var img_x = (windowWidth) / 2;
that.setData({
imgHeight: res.height * 0.4
})
ctx.beginPath() //开始创建一个路径
ctx.arc(img_x, 43, 27, 0, 2 * Math.PI, false) //画一个圆形裁剪区域
ctx.clip() //裁剪
ctx.drawImage(res.path, img_x - 27, 16, res.width * 0.4, res.height * 0.4) //绘制图片
ctx.restore() //恢复之前保存的绘图上下文
// 用户名
that.drawUsername(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 打卡天数标题
that.drawPunchDayTit(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 打卡天数
that.drawPunchDay(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 横线
that.drawLine(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 出处
that.drawProvenance(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 训练营
that.drawTraining(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 参与人
that.drawParticipant(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 底部
that.drawFoot(ctx, img_x, windowWidth, that.data.imgHeight + 14, that.data.windowHeight);
// 核心课程
that.drawKernel(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 免费听课日期
that.drawData(ctx, img_x, windowWidth, that.data.imgHeight + 14);
// 二维码图片
that.drawErrCode(ctx, img_x, windowWidth, that.data.imgHeight + 14);
}
})
},
// 背景色
drawHeader(ctx, windowWidth, windowHeight) {
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, windowWidth, windowHeight);
},
// 用户名
drawUsername(ctx, img_x, windowWidth, imgHeight) {
ctx.font = 'PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center')
ctx.setFontSize(14);
ctx.setFillStyle("#304d67");
// ctx.font = 'bold 14px arial';
ctx.fillText(this.data.userInfo.nickName, img_x, imgHeight + 30);
},
// 打卡标题
drawPunchDayTit(ctx, img_x, windowWidth, imgHeight) {
ctx.setTextAlign('center')
ctx.setFontSize(16);
ctx.setFillStyle("#304d67");
ctx.fillText('已在LaiCode坚持打卡', img_x, imgHeight + 63);
},
// 打卡天数
drawPunchDay(ctx, img_x, windowWidth, imgHeight) {
ctx.setTextAlign('center')
ctx.setFontSize(16);
ctx.setFillStyle("#304d67");
ctx.font = 'bold 36px PingFangSC-Semibod, sans-serif';
ctx.fillText(that.data.clockDays, img_x, imgHeight + 118);
const metrics = ctx.measureText(that.data.clockDays)
console.log(metrics.width);
ctx.setFontSize(16);
ctx.fillText('第', img_x - metrics.width / 2 - 20, imgHeight + 116);
ctx.setFontSize(16);
ctx.fillText('天', img_x + metrics.width / 2 + 20, imgHeight + 116);
},
// 横线
drawLine(ctx, img_x, windowWidth, imgHeight) {
ctx.lineWidth = 1; //设置线宽
ctx.moveTo(0, imgHeight + 148);
ctx.lineTo(windowWidth, imgHeight + 148);
ctx.strokeStyle = "#e7eaef"; //线条的颜色
ctx.stroke();
},
// 出处
drawProvenance(ctx, img_x, windowWidth, imgHeight) {
ctx.font = '12px PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center');
ctx.setFontSize(14);
ctx.setFillStyle("#304d67");
ctx.fillText('来自来Offer打卡小程序', img_x, imgHeight + 176);
},
// 训练营
drawTraining(ctx, img_x, windowWidth, imgHeight) {
var that = this,
name = this.data.activityJoinInfo.name ? this.data.activityJoinInfo.name : '';
ctx.font = 'bold 16px PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center');
ctx.setFillStyle("#304d67");
ctx.fillText(name, img_x, imgHeight + 206);
},
// 参与人
drawParticipant(ctx, img_x, windowWidth, imgHeight) {
ctx.font = '14px PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center');
ctx.setFillStyle("#304d67");
ctx.fillText(this.data.activityJoinInfo.participantCnt + '人正在参与', img_x, imgHeight + 234);
},
// 底部
drawFoot(ctx, img_x, windowWidth, imgHeight, windowHeight) {
ctx.setFillStyle('#03a9f5');
ctx.fillRect(0, imgHeight + 274, windowWidth, windowHeight - (imgHeight + 274));
},
// 核心课程
drawKernel(ctx, img_x, windowWidth, imgHeight) {
ctx.font = '16px PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center');
ctx.setFillStyle("#fff");
ctx.fillText('软件工程师旗舰核心课程', img_x, imgHeight + 306);
},
// 免费听课日期
drawData(ctx, img_x, windowWidth, imgHeight) {
ctx.font = '16px PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center');
ctx.setFillStyle("#fff");
ctx.fillText('12月13日免费试听', img_x, imgHeight + 330);
},
// 长按图片
drawBegin(ctx, img_x, windowWidth, imgHeight, erCodeHeight) {
ctx.font = '14px PingFangSC-Semibod, sans-serif';
ctx.setTextAlign('center');
ctx.setFillStyle("#fff");
ctx.fillText('长按识别二维码开始你的打卡', img_x, imgHeight + erCodeHeight + 350);
},
// 二维码
drawErrCode(ctx, img_x, windowWidth, imgHeight) {
var that = this;
wx.getImageInfo({
src: 'https://www.doublev2v.com/group1/M00/1B/47/wMDAC1vzyx-EAMTnAAAAAKvDEIw925.png',
success(res) {
console.log(res);
console.log(res.width);
console.log(res.height);
console.log(windowWidth);
ctx.drawImage(res.path, img_x - res.width / 2 + 12, imgHeight + 346, res.width * 0.8, res.height * 0.8);
that.drawBegin(ctx, img_x, windowWidth, imgHeight, res.height);
that.setData({
errCodeHeight: res.height
});
// 底部logo
wx.getImageInfo({
src: 'https://www.doublev2v.com/group1/M00/4B/03/wMDAC1xFJx-EMBI1AAAAAOkVpLY565.png',
success(res) {
console.log(res);
console.log(res.width);
console.log(res.height);
console.log(windowWidth);
console.log(img_x)
ctx.drawImage(res.path, img_x - res.width / 4 + 24, imgHeight + that.data.errCodeHeight + 360, res.width * 0.3, res.height * 0.3);
ctx.restore(); //恢复之前保存的绘图上下文
ctx.draw(false, function() {
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: that.data.windowWidth,
height: that.data.windowHeight,
success: function(res) {
wx.hideToast()
console.log('canvas保存图片')
console.log(res.tempFilePath)
// 保存在本地相册
setTimeout(function() {
util.savePicToAlbum(that, res.tempFilePath);
}, 1000)
},
fail: function(res) {
console.log(res)
}
})
}, 1000);
});
}
})
}
})
},
// 保存图片
saveImgToPhotosAlbumTap() {
console.log('saveImgToPhotosAlbumTap事件进来了');
wx.showLoading({
title: '保存图片中',
});
var that = this,
// canvas画布
ctx = wx.createCanvasContext('myCanvas'),
windowWidth = that.data.windowWidth,
windowHeight = that.data.windowHeight;
// 画图片
that.drawImg(ctx, windowWidth, windowHeight);
},
小程序canvas绘制海报并保存
猜你喜欢
转载自blog.csdn.net/qinyongqaq/article/details/88869304
今日推荐
周排行