https://cdn.kaishuhezi.com/kstory/activity_flow/video/70fde28f-8433-449c-bce5-ecc9a5d328b9.mov
<Canvas id='c1' type='2d' style={{width: '1112px', height: '1112px'}} />
Taro.createSelectorQuery().selectAll('#c1').node((res) => {
const canvas = res[0].node;
const context = canvas.getContext('2d');
lottie.setup(canvas);
this.ani = lottie.loadAnimation({
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
context,
},
})
}).exec()
我做一个好人，解决方案：
const width = res[0].width
const height = res[0].height
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
需要把像素比率计算进去，完美解决
真机上lottie就是会遇到动画模糊的问题，没找到有解决方案啊
@ 社区技术运营专员-娇华 可以回复一下一楼的问题吗，在我的这也存在失真，width改成600 height300 就好了
官方文档用真机调试失败。模拟器是好的 。https://developers.weixin.qq.com/s/2TYvm9mJ75bF
请提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
js中获取节点后设置宽高是标签样式的2倍左右 看起来才不失真
是因为绘制的尺寸大，显示的小，被缩放了才清晰的吗？具体什么原理，应该怎样设置？盼复
图2是把官方的代码片段中js获取到的节点width、height由300改成了600
图3是官方使用的动画json在web的展示
图4是图3demo的代码
图5是前面测试使用的手机信息
不过我觉得跟手机没关系哈，在开发者工具和其他测试机上也都能复现这个问题