|
@@ -15,7 +15,11 @@ Component({
|
|
|
*/
|
|
|
data: {
|
|
|
shareFlag: true,
|
|
|
- imgUrls: ''
|
|
|
+ imgUrls: '',
|
|
|
+ avatar: '',
|
|
|
+ author: '',
|
|
|
+ iconImg: '',
|
|
|
+ title: '',
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -33,44 +37,59 @@ Component({
|
|
|
ctx.setFillStyle('#fff')
|
|
|
ctx.fill()
|
|
|
ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
|
|
|
- ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
|
|
|
- ctx.drawImage('../../../static/groupImg/Bitmap1.png', 148, 8, 100, 100); //插入图片
|
|
|
+ ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内
|
|
|
+ ctx.drawImage(this.data.avatar, 148, 8, 100, 100); //插入图片
|
|
|
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
|
|
|
ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('#000')
|
|
|
- ctx.fillText('喔喔', 166, 115)
|
|
|
+ ctx.setFillStyle('#535353')
|
|
|
+ ctx.fillText(this.data.author, (370 - ctx.measureText(this.data.author).width) / 2, 115)
|
|
|
ctx.setFillStyle('#FF4400')
|
|
|
- ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
|
|
|
- ctx.drawImage('../../../static/groupImg/Bitmap1.png', 9, 156, 352, 145);
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.setFillStyle('#000')
|
|
|
- ctx.fillText('一年级语文上学期', 12, 329)
|
|
|
- ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
|
|
|
- ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
|
|
|
- ctx.setFontSize(14)
|
|
|
- ctx.setFillStyle('#fff')
|
|
|
- ctx.fillText('五人团', 149, 373)
|
|
|
- ctx.setFontSize(16)
|
|
|
- ctx.setFillStyle('#A95A00')
|
|
|
- ctx.fillText('原价', 24, 373)
|
|
|
- ctx.setStrokeStyle('red')
|
|
|
- ctx.moveTo(64, 368)
|
|
|
- ctx.lineTo(114, 368)
|
|
|
- ctx.stroke()
|
|
|
- ctx.fillText('¥99元', 64, 373)
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.fillText('团购价仅需', 20, 403)
|
|
|
- ctx.fillText('元', 144, 403)
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText('¥1', 109, 403)
|
|
|
- ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
- ctx.setFontSize(20)
|
|
|
- ctx.setFillStyle('red')
|
|
|
- ctx.fillText('名额有限,售完截止', 9, 467)
|
|
|
- ctx.setFontSize(18)
|
|
|
- ctx.setFillStyle('#000')
|
|
|
- ctx.fillText('长按识别二维码参加团购', 9, 493)
|
|
|
+ if (this.data.shareType === 'works') {
|
|
|
+ ctx.fillText('已使出洪荒之力,声情并茂的为', (370 - ctx.measureText('已使出洪荒之力,声情并茂的为').width) / 2, 138)
|
|
|
+ ctx.fillText(`《${this.data.title}》`, (370 - ctx.measureText(`《${this.data.title}》`).width) / 2, 160)
|
|
|
+ ctx.fillText(`配了一段惊世之作`, (370 - ctx.measureText(`配了一段惊世之作`).width) / 2, 182)
|
|
|
+ ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.setFillStyle('#000')
|
|
|
+ ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('red')
|
|
|
+ ctx.fillText('为TA疯狂打CALL', 9, 467)
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.setFillStyle('#000')
|
|
|
+ ctx.fillText('长按识别二维码,快去听听', 9, 493)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
|
|
|
+ ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
|
|
|
+ ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
|
|
|
+ ctx.setFontSize(14)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fillText('五人团', 149, 373)
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('#A95A00')
|
|
|
+ ctx.fillText('原价', 24, 373)
|
|
|
+ ctx.setStrokeStyle('red')
|
|
|
+ ctx.moveTo(64, 368)
|
|
|
+ ctx.lineTo(114, 368)
|
|
|
+ ctx.stroke()
|
|
|
+ ctx.fillText('¥99元', 64, 373)
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.fillText('团购价仅需', 20, 403)
|
|
|
+ ctx.fillText('元', 144, 403)
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('red')
|
|
|
+ ctx.fillText('¥1', 109, 403)
|
|
|
+ ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
|
|
|
+ ctx.setFontSize(20)
|
|
|
+ ctx.setFillStyle('red')
|
|
|
+ ctx.fillText('名额有限,售完截止', 9, 467)
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.setFillStyle('#000')
|
|
|
+ ctx.fillText('长按识别二维码参加团购', 9, 493)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
ctx.drawImage('../../../static/groupImg/code.png', 217, 374, 135, 135);
|
|
|
ctx.draw(true, function (res) {
|
|
|
wx.canvasToTempFilePath({
|
|
@@ -81,30 +100,36 @@ Component({
|
|
|
destWidth: 370,
|
|
|
destHeight: 507,
|
|
|
canvasId: 'myCanvas',
|
|
|
- success:(res) => {
|
|
|
- console.log(res.tempFilePath)
|
|
|
- // wx.saveImageToPhotosAlbum({
|
|
|
- // filePath: res.path,
|
|
|
- // success(res) {
|
|
|
- // console.log(res);
|
|
|
- // }
|
|
|
- // })
|
|
|
- that.setData({
|
|
|
- imgUrls: res.tempFilePath
|
|
|
- })
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.tempFilePath)
|
|
|
+ // wx.saveImageToPhotosAlbum({
|
|
|
+ // filePath: res.path,
|
|
|
+ // success(res) {
|
|
|
+ // console.log(res);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ that.setData({
|
|
|
+ imgUrls: res.tempFilePath
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- share: function () {
|
|
|
+ share: function (data) {
|
|
|
+ console.log(this.data)
|
|
|
+ console.log(data)
|
|
|
this.setData({
|
|
|
- shareFlag: !this.data.shareFlag
|
|
|
+ shareFlag: !this.data.shareFlag,
|
|
|
+ avatar: data.avatar,
|
|
|
+ author: data.author,
|
|
|
+ iconImg: data.iconImg,
|
|
|
+ title: data.title,
|
|
|
})
|
|
|
},
|
|
|
PreservationImg: function () {
|
|
|
wx.saveImageToPhotosAlbum({
|
|
|
filePath: this.data.imgUrls,
|
|
|
- success(res) {
|
|
|
+ success(res) {
|
|
|
console.log('保存成功')
|
|
|
}
|
|
|
})
|
|
@@ -113,4 +138,4 @@ Component({
|
|
|
this.triggerEvent('customevent', {})
|
|
|
}
|
|
|
}
|
|
|
-})
|
|
|
+})
|