Appearance
微信小程序手机浏览空白
微信小程序绘制如果有图片绘制,手机浏览需要在后台添加downloadFile域名,并需要重启开发者工具。
微信小程序无法真机调试
在设置canvas的type="2d"后, 微信开发者工具的真机预览直接闪退
绘制完毕后没有效果
注意DrawPoster.build无法检测你所选择canvasId的是否正确,所以一定要确保与canvas-id和html中的canvas相同,在小程序端,由于会自动切换为type2d,必须得加上动态编译。
html
<!-- #ifdef MP-WEIXIN -->
<canvas id="canvas" type="2d" style="width: 300px; height: 300px" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<canvas canvas-id="canvas" id="canvas" style="width: 300px; height: 300px" />
<!-- #endif -->
组件中使用没有效果
在 uniapp 组件中使用绘画时,需要 componentThis 参数,传入组件实例。
js
const componentThis = getCurrentInstance()
const dp = useDraw('canvas', { componentThis })
绘制多个图片加载慢
如果觉得多个图片绘制await加载慢,可以使用Promise.all将一部分不需要处理图层覆盖的图片进行同步绘制。
js
dp.draw(async (ctx) => {
// // 用户头像
await ctx.drawRoundImage(headImgUrl, 39, 790, 90, 90, 100)
await Promise.all([
ctx.drawImage('/static/logo1.png', 20, 20, 35, 35),
ctx.drawImage('/static/tp.png', 19, 86, 612, 459),
ctx.drawImage('/static/bw.png', 188, 559, 274, 50),
// // 用户二维码
ctx.drawImage(codeImgUrl, 518, 780, 92, 92),
])
})
需要注意的是:ctx.drawRoundImage不可以放在Promise.all当中,由于ctx.drawRoundImage内部会调用ctx.clip方法,在Promise.all中会与其他图片绘制产生冲突。从而导致圆角失效。