CODEWITHSUNDEEP
javascriptsvgfabricjs
Duma - Stefano Gombi
Duma - Stefano Gombi

Reputation: 472

enlarging polygon without scaling in fabricjs

I have a page where initially is loaded an SVG and then for each path of the SVG is applyed a background image in a way similar to the one showed in the dynamic pattern demo.

At the same time, I want to enlarge the loaded SVG to screen size. I have used the setScaleX() method on all the SVG's elements but the background image appears distorted, probably because of the scaling ratio.

So I've tried to use the setWidth() method, calling it on the original value of the element multiplied by my ratio. This solution works with an SVG composed of only "Rect", but when there are some polygons inside they're not enlarged, only the containing box is updated.

I can understand this, setting the width of a polygon necessarily means updating the coordinates of its points, but this is the effect I want to obtain.

So, there's a way to enlarge a polygon in fabricjs without using setScaleX() method?

Upvotes: 1

Views: 1186

Answers (1)

Duma - Stefano Gombi
Duma - Stefano Gombi

Reputation: 472

After long time I've found a solution for this problem. You can find and explanation of the FabricJS behaviour in this github issue I made.

The way I've found to enlarge a polygon without scaling it in FabricJS is to move every single point of the polygon, multiplying it by the scale ratio needed.

There's the code I'm using.

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();

Upvotes: 1

Related Questions