使用fabric js调整画布大小[重复]

Posted 2023-03-05

【中文标题】使用fabric js调整画布大小[重复]

【英文标题】：Resize the canvas with fabric js [duplicate]

【发布时间】：2013-03-13 04:53:47

【问题描述】：

该应用程序允许用户保存设计并将其发布，以便其他用户稍后查看。

以宽度=700 和高度=600 的比例保存的原始画布。但是在显示画布时，我想调整画布的大小以适应 (350,300) 的尺寸。原来的一半。但如果我直接应用这些尺寸并加载宽度 setWidth() 和 setHeight() 它会以原始比例加载。

我只想用新的尺寸显示画布。

【问题讨论】：

这绝对不是重复的，因为这涉及到 fabric.js

尽管如此，但解决方案更像是一个通用的解决方案。该解决方案不涉及任何特定于 fabricJS 的内容。所以我不会争论。

【参考方案1】：

如果您使用的是库 fabric.js，那还不够。

考虑到“画布”是 fabric.js 实例对象，您应该这样做以避免失真：

canvas.setWidth( <desired width> );
canvas.setHeight( <desired height> );
canvas.calcOffset();

【讨论】：

这应该是公认的答案

正确，如果您使用的是面料，则需要这样做。

【参考方案2】：

以前回答过here。

我不确定你一直在尝试什么，但是

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

应该可以正常工作。

【讨论】：

哇！！！那行得通。非常感谢

这不适用于fabric.Canvas