在fabricjs中放大多边形而不缩放答案

【问题标题】：enlarging polygon without scaling in fabricjs在fabricjs中放大多边形而不缩放
【发布时间】：2015-08-01 17:40:30
【问题描述】：

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

同时，我想将加载的 SVG 放大到屏幕大小。我在所有 SVG 元素上都使用了setScaleX() 方法，但背景图像出现失真，可能是因为缩放比例。

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

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

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

【问题讨论】：

缩放并重新应用缩放多边形上的背景图像？
其实我在对所有元素和canvas.renderAll()调用setScaleX()或setWidth()之后设置了背景，所以当我调用setFill()方法时元素已经被缩放了。
我已经创建了一个 jsfiddle，如果有帮助：jsfiddle

标签： javascript svg fabricjs

【解决方案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();

【讨论】：