|
@@ -25,7 +25,8 @@ Page({
|
|
|
'https://ts1.cn.mm.bing.net/th/id/R-C.d8333a26a5494dfe1dc88e9fdd04fb31?rik=08fpnYZSbboHfQ&riu=http%3a%2f%2fpic.ibaotu.com%2fspiders%2f33817-59a6262d3ff70.jpg&ehk=fKs2FTTgk2k0kqet%2fVO%2bAS3D0Q6zlNyUPmT8UE%2bvpdY%3d&risl=&pid=ImgRaw&r=0',
|
|
|
'https://pic.nximg.cn/file/20230420/12106414_122949747127_2.jpg'
|
|
|
],
|
|
|
- randomImage:''
|
|
|
+ randomImage: '',
|
|
|
+ saveimage: ''
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -147,6 +148,7 @@ Page({
|
|
|
this.setData({
|
|
|
sharList
|
|
|
});
|
|
|
+ this.saveImage()
|
|
|
console.log(this.data.sharList);
|
|
|
},
|
|
|
//随机展示图片
|
|
@@ -156,4 +158,294 @@ Page({
|
|
|
randomImage: this.data.images[randomIndex]
|
|
|
});
|
|
|
},
|
|
|
+ //绘制canvas
|
|
|
+ rpxToPx(rpx) {
|
|
|
+ const systemInfo = wx.getSystemInfoSync();
|
|
|
+ return rpx * (systemInfo.windowWidth / 750);
|
|
|
+ },
|
|
|
+ //rpx
|
|
|
+ saveImage() {
|
|
|
+ // console.log('运行了');
|
|
|
+ const canvas = wx.createCanvasContext('myCanvas');
|
|
|
+ const width = this.rpxToPx(670);
|
|
|
+ const height = this.rpxToPx(1100);
|
|
|
+ // console.log(width, height);
|
|
|
+ canvas.width = this.rpxToPx(670);
|
|
|
+ canvas.height = this.rpxToPx(1100);
|
|
|
+
|
|
|
+ // 绘制背景
|
|
|
+ canvas.setFillStyle('#CAE1FD'); // 背景色
|
|
|
+ canvas.fillRect(0, 0, width, height);
|
|
|
+ canvas.setFillStyle('#0178EE');
|
|
|
+
|
|
|
+ // 加载主图片
|
|
|
+ wx.getImageInfo({
|
|
|
+ src: this.data.randomImage,
|
|
|
+ success: (res) => {
|
|
|
+ canvas.drawImage(res.path, 0, 0, width, this.rpxToPx(500)); // 调整图片高度
|
|
|
+ // console.log('主图片加载成功');
|
|
|
+
|
|
|
+ // 加载用户头像
|
|
|
+ wx.getImageInfo({
|
|
|
+ src: this.data.sharList[0].user.avatar,
|
|
|
+ success: (avatarRes) => {
|
|
|
+ // 绘制带圆角的头像
|
|
|
+ const avatarX = this.rpxToPx(40);
|
|
|
+ const avatarY = this.rpxToPx(540);
|
|
|
+ const avatarSize = this.rpxToPx(83);
|
|
|
+ const radius = avatarSize / 2; // 半径为头像大小的一半
|
|
|
+
|
|
|
+ // 绘制圆角矩形
|
|
|
+ canvas.save(); // 保存当前状态
|
|
|
+ canvas.beginPath(); // 开始路径
|
|
|
+ canvas.moveTo(avatarX + radius, avatarY); // 左上角
|
|
|
+ canvas.lineTo(avatarX + avatarSize - radius, avatarY); // 上边
|
|
|
+ canvas.arc(avatarX + avatarSize - radius, avatarY + radius, radius, 1.5 * Math.PI, 0, false); // 右上角
|
|
|
+ canvas.lineTo(avatarX + avatarSize, avatarY + avatarSize - radius); // 右边
|
|
|
+ canvas.arc(avatarX + avatarSize - radius, avatarY + avatarSize - radius, radius, 0, 0.5 * Math.PI, false); // 右下角
|
|
|
+ canvas.lineTo(avatarX + radius, avatarY + avatarSize); // 下边
|
|
|
+ canvas.arc(avatarX + radius, avatarY + avatarSize - radius, radius, 0.5 * Math.PI, Math.PI, false); // 左下角
|
|
|
+ canvas.lineTo(avatarX, avatarY + radius); // 左边
|
|
|
+ canvas.arc(avatarX + radius, avatarY + radius, radius, Math.PI, 1.5 * Math.PI, false); // 左上角
|
|
|
+ canvas.closePath(); // 关闭路径
|
|
|
+ canvas.clip(); // 剪切
|
|
|
+
|
|
|
+ // 绘制头像
|
|
|
+ canvas.drawImage(avatarRes.path, avatarX, avatarY, avatarSize, avatarSize); // 头像位置和大小
|
|
|
+ canvas.restore(); // 恢复状态
|
|
|
+ // console.log('头像加载成功');
|
|
|
+
|
|
|
+ // 绘制昵称和时间
|
|
|
+ const nickname = this.data.sharList[0].user.nickname;
|
|
|
+ const currentTime = this.data.sharList[0].currentTime;
|
|
|
+ const rank = this.data.sharList[0].rank;
|
|
|
+ const steps = this.data.sharList[0].steps || 0;
|
|
|
+ const distance = this.data.sharList[0].distance || 0;
|
|
|
+
|
|
|
+ canvas.setFontSize(this.rpxToPx(30));
|
|
|
+ canvas.fillText(nickname, this.rpxToPx(140), this.rpxToPx(580)); // 昵称位置
|
|
|
+ // console.log('昵称加载成功');
|
|
|
+ canvas.setFontSize(this.rpxToPx(28));
|
|
|
+ canvas.fillText(currentTime, this.rpxToPx(140), this.rpxToPx(610)); // 时间位置
|
|
|
+ // console.log('时间加载成功');
|
|
|
+
|
|
|
+ // 绘制其他文本
|
|
|
+ canvas.setFontSize(this.rpxToPx(55));
|
|
|
+ canvas.fillText('梦想家', this.rpxToPx(40), this.rpxToPx(720));
|
|
|
+ // console.log('梦想家加载成功');
|
|
|
+ canvas.setFontSize(this.rpxToPx(30));
|
|
|
+ canvas.fillText('用汗水实现想象,用脚步丈量梦想', this.rpxToPx(40), this.rpxToPx(780));
|
|
|
+ // console.log('汗水加载成功');
|
|
|
+
|
|
|
+ // 绘制排名、步数和公里数
|
|
|
+ canvas.setFontSize(this.rpxToPx(28));
|
|
|
+ // canvas.fillText('今日排名: ' + rank, 20, 400);
|
|
|
+ canvas.fillText('今日排名', this.rpxToPx(40), this.rpxToPx(840));
|
|
|
+ // console.log('排名加载成功');
|
|
|
+ // canvas.fillText('今日步数: ' + steps, 20, 420);
|
|
|
+ canvas.fillText('今日步数', this.rpxToPx(240), this.rpxToPx(840));
|
|
|
+ // console.log('步数加载成功');
|
|
|
+ // canvas.fillText('公里数: ' + distance + 'km', 20, 430);
|
|
|
+ canvas.fillText('公里数', this.rpxToPx(440), this.rpxToPx(840));
|
|
|
+ // console.log('公里数加载成功');
|
|
|
+ canvas.setFontSize(this.rpxToPx(40));
|
|
|
+ canvas.fillText(rank, this.rpxToPx(80), this.rpxToPx(900));
|
|
|
+ canvas.fillText(steps, this.rpxToPx(240), this.rpxToPx(900));
|
|
|
+ canvas.fillText(distance + 'km', this.rpxToPx(444), this.rpxToPx(900));
|
|
|
+
|
|
|
+ // 绘制二维码(如果有)
|
|
|
+ canvas.setFillStyle('red'); // 示例二维码
|
|
|
+ canvas.fillRect(width - this.rpxToPx(140), height - this.rpxToPx(160), this.rpxToPx(120), this.rpxToPx(120)); // QR 位置
|
|
|
+ // console.log('二维码绘制');
|
|
|
+
|
|
|
+ canvas.setFillStyle('#0178EE');
|
|
|
+ canvas.setFontSize(this.rpxToPx(28));
|
|
|
+ canvas.fillText('长按二维码加入跑团', width - this.rpxToPx(420), height - this.rpxToPx(120));
|
|
|
+ canvas.fillText('和我一起运动', width - this.rpxToPx(380), height - this.rpxToPx(80));
|
|
|
+ // 完成绘制
|
|
|
+ canvas.draw(false, () => {
|
|
|
+ console.log('123');
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: (res) => {
|
|
|
+ console.log('绘制完成', res);
|
|
|
+ this.setData({
|
|
|
+ saveimage: res.tempFilePath
|
|
|
+ });
|
|
|
+ console.log(this.data.saveimage);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('canvasToTempFilePath 失败', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.error('用户头像加载失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.error('主图片加载失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //px
|
|
|
+ // saveImage() {
|
|
|
+ // // console.log('运行了');
|
|
|
+ // const canvas = wx.createCanvasContext('myCanvas');
|
|
|
+ // const width = 335;
|
|
|
+ // const height = 550;
|
|
|
+ // // console.log(width, height);
|
|
|
+ // canvas.width = 335;
|
|
|
+ // canvas.height = 550;
|
|
|
+
|
|
|
+ // // 绘制背景
|
|
|
+ // canvas.setFillStyle('#CAE1FD'); // 背景色
|
|
|
+ // canvas.fillRect(0, 0, width, height);
|
|
|
+ // canvas.setFillStyle('#0178EE');
|
|
|
+
|
|
|
+ // // 加载主图片
|
|
|
+ // wx.getImageInfo({
|
|
|
+ // src: this.data.randomImage,
|
|
|
+ // success: (res) => {
|
|
|
+ // canvas.drawImage(res.path, 0, 0, width, 250); // 调整图片高度
|
|
|
+ // // console.log('主图片加载成功');
|
|
|
+
|
|
|
+ // // 加载用户头像
|
|
|
+ // wx.getImageInfo({
|
|
|
+ // src: this.data.sharList[0].user.avatar,
|
|
|
+ // success: (avatarRes) => {
|
|
|
+ // // 绘制带圆角的头像
|
|
|
+ // const avatarX = 20;
|
|
|
+ // const avatarY = 270;
|
|
|
+ // const avatarSize = 42.5;
|
|
|
+ // const radius = avatarSize / 2; // 半径为头像大小的一半
|
|
|
+
|
|
|
+ // // 绘制圆角矩形
|
|
|
+ // canvas.save(); // 保存当前状态
|
|
|
+ // canvas.beginPath(); // 开始路径
|
|
|
+ // canvas.moveTo(avatarX + radius, avatarY); // 左上角
|
|
|
+ // canvas.lineTo(avatarX + avatarSize - radius, avatarY); // 上边
|
|
|
+ // canvas.arc(avatarX + avatarSize - radius, avatarY + radius, radius, 1.5 * Math.PI, 0, false); // 右上角
|
|
|
+ // canvas.lineTo(avatarX + avatarSize, avatarY + avatarSize - radius); // 右边
|
|
|
+ // canvas.arc(avatarX + avatarSize - radius, avatarY + avatarSize - radius, radius, 0, 0.5 * Math.PI, false); // 右下角
|
|
|
+ // canvas.lineTo(avatarX + radius, avatarY + avatarSize); // 下边
|
|
|
+ // canvas.arc(avatarX + radius, avatarY + avatarSize - radius, radius, 0.5 * Math.PI, Math.PI, false); // 左下角
|
|
|
+ // canvas.lineTo(avatarX, avatarY + radius); // 左边
|
|
|
+ // canvas.arc(avatarX + radius, avatarY + radius, radius, Math.PI, 1.5 * Math.PI, false); // 左上角
|
|
|
+ // canvas.closePath(); // 关闭路径
|
|
|
+ // canvas.clip(); // 剪切
|
|
|
+
|
|
|
+ // // 绘制头像
|
|
|
+ // canvas.drawImage(avatarRes.path, avatarX, avatarY, avatarSize, avatarSize); // 头像位置和大小
|
|
|
+ // canvas.restore(); // 恢复状态
|
|
|
+ // // console.log('头像加载成功');
|
|
|
+
|
|
|
+ // // 绘制昵称和时间
|
|
|
+ // const nickname = this.data.sharList[0].user.nickname;
|
|
|
+ // const currentTime = this.data.sharList[0].currentTime;
|
|
|
+ // const rank = this.data.sharList[0].rank;
|
|
|
+ // const steps = this.data.sharList[0].steps || 0;
|
|
|
+ // const distance = this.data.sharList[0].distance || 0;
|
|
|
+
|
|
|
+ // canvas.setFontSize(15);
|
|
|
+ // canvas.fillText(nickname, 70, 290); // 昵称位置
|
|
|
+ // // console.log('昵称加载成功');
|
|
|
+ // canvas.setFontSize(14);
|
|
|
+ // canvas.fillText(currentTime, 70, 305); // 时间位置
|
|
|
+ // // console.log('时间加载成功');
|
|
|
+
|
|
|
+ // // 绘制其他文本
|
|
|
+ // canvas.setFontSize(27.5);
|
|
|
+ // canvas.fillText('梦想家', 20, 360);
|
|
|
+ // // console.log('梦想家加载成功');
|
|
|
+ // canvas.setFontSize(15);
|
|
|
+ // canvas.fillText('用汗水实现想象,用脚步丈量梦想', 20, 390);
|
|
|
+ // // console.log('汗水加载成功');
|
|
|
+
|
|
|
+ // // 绘制排名、步数和公里数
|
|
|
+ // canvas.setFontSize(14);
|
|
|
+ // // canvas.fillText('今日排名: ' + rank, 20, 400);
|
|
|
+ // canvas.fillText('今日排名', 20, 420);
|
|
|
+ // // console.log('排名加载成功');
|
|
|
+ // // canvas.fillText('今日步数: ' + steps, 20, 420);
|
|
|
+ // canvas.fillText('今日步数', 120, 420);
|
|
|
+ // // console.log('步数加载成功');
|
|
|
+ // // canvas.fillText('公里数: ' + distance + 'km', 20, 430);
|
|
|
+ // canvas.fillText('公里数', 220, 420);
|
|
|
+ // // console.log('公里数加载成功');
|
|
|
+ // canvas.setFontSize(20);
|
|
|
+ // canvas.fillText(rank, 40, 450);
|
|
|
+ // canvas.fillText(steps, 122, 450);
|
|
|
+ // canvas.fillText(distance + 'km', 222, 450);
|
|
|
+
|
|
|
+ // // 绘制二维码(如果有)
|
|
|
+ // canvas.setFillStyle('red'); // 示例二维码
|
|
|
+ // canvas.fillRect(width - 70, height - 80, 60, 60); // QR 位置
|
|
|
+ // // console.log('二维码绘制');
|
|
|
+
|
|
|
+ // canvas.setFillStyle('#0178EE');
|
|
|
+ // canvas.setFontSize(14);
|
|
|
+ // canvas.fillText('长按二维码加入跑团', width - 210, height - 60);
|
|
|
+ // canvas.fillText('和我一起运动', width - 190, height - 40);
|
|
|
+ // // 完成绘制
|
|
|
+ // canvas.draw(false, () => {
|
|
|
+ // console.log('123');
|
|
|
+ // wx.canvasToTempFilePath({
|
|
|
+ // canvasId: 'myCanvas',
|
|
|
+ // success: (res) => {
|
|
|
+ // console.log('绘制完成', res);
|
|
|
+ // this.setData({
|
|
|
+ // saveimage: res.tempFilePath
|
|
|
+ // });
|
|
|
+ // console.log(this.data.saveimage);
|
|
|
+ // },
|
|
|
+ // fail: (err) => {
|
|
|
+ // console.error('canvasToTempFilePath 失败', err);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // fail: () => {
|
|
|
+ // console.error('用户头像加载失败');
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // fail: () => {
|
|
|
+ // console.error('主图片加载失败');
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ // },
|
|
|
+ //点击保存图片
|
|
|
+ async savepic() {
|
|
|
+ await this.saveImage()
|
|
|
+ const imagePath = this.data.saveimage; // 获取保存的图片路径
|
|
|
+ if (imagePath) {
|
|
|
+ // 调用保存图片到相册的方法
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: imagePath,
|
|
|
+ success: () => {
|
|
|
+ wx.showToast({
|
|
|
+ title: '保存成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('保存失败', err);
|
|
|
+ wx.showToast({
|
|
|
+ title: '保存失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ wx.showToast({
|
|
|
+ title: '没有可保存的图片',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|