请问现在解决了吗
关于canvas绘制,部分x坐标错位怎么解决?在使用canvas绘制一个海报时,经常出现部分位置x坐标错位的情况,对比图如下: [图片] [图片] 左边的是正常效果的图,右边的是坐标错位后的结果,其中删除线部分的坐标貌似正常,海报的其他部分坐标也正常, 只有图中3处有问题,有遇到过类似问题的吗,请教是怎么解决的啊? 以下是部分代码 const ctx = uni.createCanvasContext('myCanvas') // 绘制背景图 ctx.drawImage('../../static/bg_good.jpg', 0, 0, 640, 948) ctx.save() ctx.drawImage('../../static/good.png',27,64,589,575) ctx.save() // 头像 ctx.arc(316,53,36,0,Math.PI*2,false) ctx.clip() ctx.drawImage('../../static/132.jpg',280,17,73,73) ctx.restore() ctx.beginPath() // 商品名称 ctx.font = 'bold 30px Arial' ctx.fillStyle = '#2A2A2A' ctx.fillText(item.goodName,27,690) // 商品价格 ctx.font = '45px Arial' ctx.fillStyle = '#FE1B00' const price = '¥'+item.price let metric1 = ctx.measureText(price) ctx.fillText(price,22,750) //商品原价 ctx.font = '35px Arial' ctx.fillStyle = '#6D6D6D' const origin = '¥'+'900' // 删除线 const x = 22+metric1.width+20 const metrics = ctx.measureText(origin) ctx.fillText(origin,x,750) ctx.moveTo(x,738) ctx.lineTo(x+metrics.width, 738); ctx.stroke(); // 商品备注 ctx.font = '18px Arial' ctx.fillStyle = '#999999' _this.drawText(ctx,item.introduction,27,760,400)// 自定义方法,文字换行显示 ctx.closePath() ctx.restore() // 小程序二维码 ctx.drawImage('../../static/good200.png',461,737,139,139) ctx.fillStyle = '#2A2A2A' ctx.setTextAlign('center') ctx.font = 'bold 18px/1 Arial ' ctx.fillText('-长按识别二维码购买-',530,905) ctx.draw(false,()=>{ uni.canvasToTempFilePath({ canvasId: 'myCanvas', x: 0, y: 0, width: 640, height: 948, success: (res) => { uni.hideLoading() var preview = [] preview.push(res.tempFilePath) uni.previewImage({ urls: preview, longPressActions: { itemList: ['发送给朋友', '保存图片', '收藏'], success: function(data) { console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); }, fail: function(err) { console.log(err.errMsg); } } }); } }) })
2020-08-17