javascript - 在fabricjs中放大多边形而不缩放

Question

我有一个页面，最初加载了一个 SVG，然后为 SVG 的每个路径应用了一个背景图像，其方式类似于 dynamic pattern demo 中显示的方式。 .

同时，我想将加载的 SVG 放大到屏幕尺寸。我已对所有 SVG 元素使用了 setScaleX() 方法，但背景图像出现扭曲，可能是由于缩放比例的原因。

因此，我尝试使用 setWidth() 方法，根据元素的原始值乘以我的比率来调用它。该解决方案适用于仅由“矩形”组成的 SVG，但当内部有一些多边形时，它们不会被放大，只会更新包含的框。

我可以这么理解，设置多边形的宽度必然意味着更新其点的坐标，但这就是我想要获得的效果。

那么，有没有一种方法可以在fabricjs中放大多边形而不使用setScaleX()方法？

Answer 1

经过很长时间，我找到了解决这个问题的方法。您可以在this github issue中找到FabricJS行为和解释。我做了。

我发现在 FabricJS 中放大多边形而不缩放它的方法是移动多边形的每个点，将其乘以所需的缩放比例。

这是我正在使用的代码。

var paths = canvas.getObjects();
var ratio = 2;
for (var c=0; c<paths.length; c++) {
    var p = paths[c];
    p.setWidth(p.getWidth() * ratio);
    p.setHeight(p.getHeight() * ratio);
    if (p.points) {
        for(var j=0;j< p.points.length; j++) {
            p.points[j].x *= ratio;
            p.points[j].y *= ratio;
        }
    }
    p.setLeft(p.getLeft() * ratio);
    p.setTop(p.getTop() * ratio);
    p.setCoords();
}
canvas.renderAll();