生成可用于分享的图片时,微信小程序button按钮在ios中点击不触发事件-微信小程序开发。在三星S6 edge+机型上,存在图片绘制不完全的问题,其他安卓机型以及苹果都正常。


如下是代码片段
...
drawImage (bg, avatar, qrcode, nickname) {
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, 750, 1334)
// 绘制背景
ctx.drawImage(bg, 0, 0, 750, 1334)
// 绘制文字
ctx.setFontSize(30)
ctx.setFillStyle('#202020')
ctx.setTextAlign('center')
ctx.setTextBaseline('top')
ctx.fillText(nickname, 375, 509)
ctx.setFillStyle('#606060')
ctx.setFontSize(36)
const text = this[this.mode + 'Text']
ctx.fillText(text[0], 375, 613)
ctx.fillText(text[1], 375, 683)
// 绘制微信小程序码
// ctx.drawImage(qrcode, 254, 852, 243, 243)
// 绘制头像
ctx.save()
ctx.beginPath()
ctx.arc(375, 415, 70, 0, 2 * Math.PI)
ctx.setStrokeStyle('#ffffff')
ctx.stroke()
ctx.clip()
ctx.drawImage(avatar, 305, 345, 140, 140)
ctx.restore()
// 提交绘制
ctx.draw()
}
async canvasToImage () {
const tempUrl = await wepy.canvasToTempFilePath({
x: 0,
y: 0,
width: 750,
height: 1334,
destWidth: 750,
destHeight: 1334,
canvasId: 'myCanvas'
})
this.tempUrl = tempUrl.tempFilePath
this.$apply()
}
...
即使只绘制背景图,其他什么都不画也是这样子,不知道大家是否遇到过此类问题
本文来自微信小程序开发者论坛 -微信小程序工厂 http://www.xcxgc.com,转载请保留,开发微信小程序、定制微信小程序来微信小程序工厂网。
网友回复
d **回复:
我们发现如果把屏幕分辨率从2K调为1080P或720P就不会有这个问题了
娇华**回复:
你好,麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
多个<text>组件组合后显示位置有错误--微信小程序教程 ...