FabricJS缩放/缩放画布适合容器

Question

我的FabricJS画布放在一个容器内，其高度/宽度固定为像素。在侧面，我有一个下拉列表，将画布大小更改为各种预设。我想做的是每当我选择比容器更高和/或更宽的尺寸时自动缩小。因此，例如，如果我的容器div是800x600并且我选择了1024x768的画布大小，我想缩小以便整个画布仍然可见。相反，如果我选择较小的尺寸（例如200x200），我想放大到100％。

我找到了缩放的this示例，但无论缩小多少，画布大小都保持不变。见截图：

我该如何做到这一点？

正如您在此处所见，具有细红色边框的区域是画布容器。白框是画布。

Answer 1

您可以使用canvas.setDimensions功能来完成此任务。你传递两个参数;第一个是指定要更改画布的高度和宽度的对象，第二个指示是否更改css，画布的实际大小或两者。

例如，无论显示如何，canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true}都会将画布的实际大小设置为750x750。

无论实际大小如何，

canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true})都会将画布的显示大小设置为750x750。

我不能100％确定宽度或高度是否需要{c}后面的px或者后台存储，但这是一件非常简单的事情。此外，如果没有为第二个参数传递参数，它将同时更改它们。