From de0cbb3d625ae2077b21e15c54acaf06e31cf192 Mon Sep 17 00:00:00 2001 From: meo <18801474720@163.com> Date: Tue, 28 May 2019 14:35:34 +0800 Subject: [PATCH] =?UTF-8?q?[canvas][=E4=BF=AE=E6=94=B9]:[=E7=94=9F?= =?UTF-8?q?=E6=88=90=E6=B5=B7=E6=8A=A5=E5=88=86=E4=BA=AB=E5=88=B0=E6=9C=8B?= =?UTF-8?q?=E5=8F=8B=E5=9C=88]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/canvas/index.js | 183 +++++++++++++++++++++------------------- pages/canvas/index.wxss | 21 +++-- 2 files changed, 109 insertions(+), 95 deletions(-) diff --git a/pages/canvas/index.js b/pages/canvas/index.js index 2435294..e98d8de 100644 --- a/pages/canvas/index.js +++ b/pages/canvas/index.js @@ -12,7 +12,7 @@ Page({ windowWidth: wx.getSystemInfoSync().windowWidth, windowHeight: wx.getSystemInfoSync().screenHeight, totalHeight: 0, - mallname:'',//商场名字 + mallname: '', //商场名字 qrCodeL: "", //小程序码 couponList: [], //活动劵列表 canvasScale: 1.0 // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图 @@ -64,9 +64,9 @@ Page({ id: id }; Http.get({ - url: config.api.merchantList, - data: data - }) + url: config.api.merchantList, + data: data + }) .then(res => { that.setData({ data: res.data.list[0] @@ -88,13 +88,14 @@ Page({ wx.showLoading({ title: "生成中..." }); - var that = this; // 适配屏幕 - let scale = this.data.windowWidth / 375.0; + let scale = this.data.windowWidth / 375.0 + console.log(scale) this.setData({ - totalHeight: 767 * scale - }); + totalHeight: 667 * scale + }) + // 获取Canvas let ctx = wx.createCanvasContext("myCanvas"); // 获取宽高 @@ -123,27 +124,26 @@ Page({ let src2 = ""; //劵详情海报 if (options && options.couponChannelId) { - src1 =that.data.data.coverImg +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; + src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; src2 = util.getProxyImgUrl(src1); - + } else if (options && options.merchantId) { //商户详情海报 - src1 =that.data.data.merchantImgUrl +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; + src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`; src2 = util.getProxyImgUrl(src1); - } wx.getImageInfo({ src: src2, success: function(res) { // 绘制白色背景 ctx.setFillStyle("#fbfbfb"); - ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight); - ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight); - that.roundRect(ctx,12, 270, 320, 150,10) - that.drawOtherImage(ctx, scale); - that.drawOtherContent(ctx, scale,options); - that.drawAvatarimg(ctx, scale); - that.drawqrCode(ctx, scale); + ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight); + ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight); + that.roundRect(ctx, 15 * scale, 270 * scale, 325 * scale, 125 * scale, 10); + that.drawOtherImage(ctx, scale); + that.drawOtherContent(ctx, scale, options); + that.drawAvatarimg(ctx, scale); + that.drawqrCode(ctx, scale); wx.hideLoading(); } }); @@ -151,52 +151,59 @@ Page({ //绘制微信头像 drawAvatarimg(ctx, scale) { var that = this; - //商户详情海报 - let src1 =that.data.avatarUrl +`?imageView/2/w/${100}/h/${100}`; - let src2 = util.getProxyImgUrl(src1); + //商户详情海报 + let src1 = that.data.avatarUrl + `?imageView/2/w/${100}/h/${100}`; + let src2 = util.getProxyImgUrl(src1); wx.getImageInfo({ src: src2, success: function(res) { - that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35); + that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35); } }); }, // 商户海报绘制 - drawOtherContent(ctx, scale,options) { - //昵称 - this.drawNormalText(ctx,this.data.nickName,60 * scale,25 * scale,16 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx," 向您推荐",120 * scale,25 * scale,16 * scale,"#848484","left","middle",scale); - this.drawNormalText(ctx,"---"+this.data.mallname+"---",175 * scale,530 * scale,16 * scale,"#000","left","middle",scale); - if (options && options.merchantId) { - //店铺名 - this.drawNormalText(ctx,"商户名称:"+this.data.data.merchantName,40 * scale,310 * scale,22 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,"商户位置:"+this.data.data.shopVoList[0].buildingName+this.data.data.shopVoList[0].floorName+"--"+this.data.data.shopVoList[0].shopNumber,40 * scale,350 * scale,18 * scale,"#F4AA91","left","middle",scale); - this.drawNormalText(ctx,"商户电话:"+this.data.data.merchantLinkPhone,40 * scale,390 * scale,16 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,"长按识别,进店去看看",155 * scale,510 * scale,16 * scale,"#000","left","middle",scale); - if (this.data.couponList.length > 0) { - for (let i = 0; i < this.data.couponList.length; i++) { - // 第一个商品信息 - this.drawNormalText(ctx,this.substrTile(this.data.couponList[1].title),30 * scale,396 * scale,14 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,"价格:" + this.data.couponList[1].salePrice,30 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale); - //第二个商品信息 - this.drawNormalText(ctx,this.substrTile(this.data.couponList[2].title),145 * scale,396 * scale,14 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,"价格:" + this.data.couponList[2].salePrice,145 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale); - //第三个商品信息 - this.drawNormalText(ctx,this.substrTile(this.data.couponList[3].title),260 * scale,396 * scale,14 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,"价格:" + this.data.couponList[3].salePrice,260 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale); + drawOtherContent(ctx, scale, options) { + let that = this; + //昵称 + this.drawNormalText(ctx, this.data.nickName, 43 * scale, 24 * scale, 16 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, " 向您推荐", 120 * scale, 25 * scale, 16 * scale, "#848484", "left", "middle", scale); + this.drawNormalText(ctx, "---" + this.data.mallname + "---", 175 * scale, 500 * scale, 16 * scale, "#000", "left", "middle", scale); + if (options && options.merchantId) { + //店铺名 + this.drawNormalText(ctx, "商户名称:" + this.data.data.merchantName, 40 * scale, 310 * scale, 22 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, "商户位置:" + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].floorName + "--" + this.data.data.shopVoList[0].shopNumber, 40 * scale, 350 * scale, 18 * scale, "#F4AA91", "left", "middle", scale); + this.drawNormalText(ctx, "商户电话:" + this.data.data.merchantLinkPhone, 40 * scale, 390 * scale, 16 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, "长按识别,进店去看看", 155 * scale, 470 * scale, 16 * scale, "#000", "left", "middle", scale); + if (this.data.couponList.length > 0) { + for (let i = 0; i < this.data.couponList.length; i++) { + // 第一个商品信息 + this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 30 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 30 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale); + //第二个商品信息 + this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 145 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 145 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale); + //第三个商品信息 + this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 260 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 260 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale); + } } + } else if (options && options.couponChannelId) { + this.drawNormalText(ctx, "长按识别,进店去看看", 155 * scale, 470 * scale, 16 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, this.data.data.title, 30 * scale, 295 * scale, 20 * scale, "#000", "left", "middle", scale); + this.drawNormalText(ctx, "售价:" + this.data.data.salePriceStr + "元", 30 * scale, 320 * scale, 15 * scale, "#F4AA91", "left", "middle", scale); + // this.drawNormalText(ctx, "原价:" + this.data.data.salePriceStr, 120 * scale, 340 * scale, 16 * scale, "#DFDCDB", "left", "middle", scale); + this.drawNormalText(ctx, "适用门店:", 30 * scale, 348 * scale, 16 * scale, "#000", "left", "middle", scale); + + //适用门店字体的排列 + this.data.data.merchantVoList.map(function (file, index) { + let word = file.merchantName; + let metrics = ctx.measureText(word).width; + metrics += metrics; + that.drawNormalText(ctx, that.data.data.merchantVoList[index].merchantName,metrics, 375 * scale, 14 * scale, "#000", "left", "middle", scale); + }) + ctx.draw(true); } - } else if (options && options.couponChannelId) { - this.drawNormalText(ctx,"长按识别,享优惠",155 * scale,500 * scale,16 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,this.data.data.title,40 * scale,310 * scale,23 * scale,"#000","left","middle",scale); - this.drawNormalText(ctx,"售价:" + this.data.data.salePriceStr,40 * scale,340 * scale,20* scale,"#F4AA91","left","middle",scale); - this.drawNormalText(ctx,"原价:" + this.data.data.salePriceStr,120 * scale,340 * scale,16 * scale,"#DFDCDB","left","middle",scale); - this.drawNormalText(ctx,"适用门店:",40 * scale,370 * scale,16 * scale,"#000","left","middle",scale); - for(var i=0;i { that.setData({ couponList: res.data.page.list, @@ -384,20 +395,20 @@ Page({ }); }); }, - //商场信息 - getMallInfo: function() { - let that = this; - // 获取用户信息 - Http.get({ - url: config.api.getMallInfo, - data: {} - }).then(res => { - console.log(res); - that.setData({ - mallname:res.data.name - }); + //商场信息 + getMallInfo: function() { + let that = this; + // 获取用户信息 + Http.get({ + url: config.api.getMallInfo, + data: {} + }).then(res => { + console.log(res); + that.setData({ + mallname: res.data.name }); - }, + }); + }, /** * 保存图片 */ @@ -472,4 +483,4 @@ Page({ } }); } -}); +}); \ No newline at end of file diff --git a/pages/canvas/index.wxss b/pages/canvas/index.wxss index 557a5da..4dd4d7e 100644 --- a/pages/canvas/index.wxss +++ b/pages/canvas/index.wxss @@ -1,32 +1,35 @@ /* pages/canvas/index.wxss */ + .content { - margin: 0; - padding: 0; + margin: 0; + padding: 0; width: 100%; height: 100%; background: #f3f3f3; position: relative; } -.poster{ - width: 100%; + +.poster { height: 100%; - padding: 20rpx; - position: absolute; - top: 0; - left: 0; + padding: 20rpx; + position: absolute; + top: 0; + left: 0; } + .bottomsave { width: 100%; height: 140rpx; line-height: 140rpx; margin: auto 0; - bottom:0; + bottom: 0; left: 0; right: 0; border-top: 1px solid #ccc; box-shadow: 0 0rpx 150rpx #ccc; background: #fff; } + .saveposter { color: #fff; width: 380rpx;