Question

我有一个fabric js画布，我允许用户添加外部图像。通常，用户添加的图像太大而不适合画布，并且他们有点难以正确地重新调整它们的大小。

我想自动缩放较大的图像，以便图像保持其宽高比但适合画布。

fabric.js api中有没有这样做或者我需要计算比率并设置比例x \ y？

我试过这个但却扭曲了形象。

 oImg.set({
                    left: _fabicCanvas.width / 2,
                    top: _fabicCanvas.height / 2,
                    scaleY: _fabicCanvas.height / oImg.height,
                    scaleX: _fabicCanvas.width / oImg.width
                });

Answer 1

1）确定哪个尺寸超出了要放入图像的窗口尺寸。如果两个尺寸都超过尺寸，则计算两个因子并使用最大尺寸：

width_factor = imagewidth / allowable_width
height_factor = imageheight / allowable_height

2）将的高度和的宽度按相同因子缩放。例如。如果超出宽度：

factor = imagewidth / allowable_width

如何缩小图像以适应画布，而不会扭曲图像？

1 个答案: