更改画布宽度后 canvas.setWidth（NUMBER） 物体变形。我创建了一个演示 https://codesandbox.io/s/0py34838jp 更改输入字段以更改画布大小。
谢谢！
答案 0 :(得分：1)
该错误很细微，应该加以解释以供将来参考。
FabricJs支持视网膜缩放，在交互式画布上，您同时具有LowerCanvas和UpperCanvas。
另一方面，在所有在render函数中具有canvas节点的componentDidMount上初始化fabricJS的react应用中，React根本不了解画布容器div或upperCanvas，也不了解视网膜缩放。
所以发生的事情是在onChange事件上，您正在使用setDimensions修改画布大小。
setDimensions将画布宽度更改为X * pixelScaling（取决于设备），而高度仍为原始高度* pixelScaling。
具有CSS规则的div容器仍以正确的尺寸显示所有内容
在setState之后的react re renderind上，画布上的属性设置为X，可能react-dom然后将某些画布的宽度更改为X（我不知道这是针对的，因为dom节点在其外部控制，但我们应该验证）。
setDimension在下一个动画帧触发画布的重新渲染。
在动画帧开始之前，react完成了其dom更改，因此将rect在宽X的画布元素上重绘，但样式被认为是X * pixelRatio，这就是它看起来被拉伸的原因。
FabricJs的画布应该被安装好并且可以放开，不受dom的反应影响，因为2库在此方面没有合作。
可以添加的是一种从react jsx实例化画布的方法，而无需fabricJS弄乱dom。
答案 1 :(得分：0)
感谢@asturur的帮助。 我需要听componentDidUpdate然后设置宽度/高度 这是一个有效的演示：https://codesandbox.io/s/0py34838jp
Activity