Search code examples
javascriptcanvassvgfabricjscoordinate-transformation

fabric.js: reset controls axis of group after rotation

Not sure if I have titled this question correctly but I am creating a group from an SVG and need it to look like it is on top of an isometric box. So I need to rotate it by 45 degrees and then scale down it's height.

The problem is that after rotating it, changing the height will still change the groups original (rotated) Y axis.

Here's a visual explanation...

enter image description here

Here is the relevant code I am using... 

fabric.loadSVGFromURL(patternURL, function (svgpattern) {

    var ptnGroup = new fabric.Group(svgpattern, {
      top: 0,
      left: 0,
      width: 500,
      height: 500,
      angle: 45
    });

    ptnGroup.scaleY = .3;
    canvas.add(ptnGroup);
}
Solution

  • The issue is that scaling is applied before rotation. To force scaling to happen after rotation, you can wrap ptnGroup in another group and apply the scale to the outer group:

    fabric.loadSVGFromURL(patternURL, function (svgpattern) {

  var ptnGroup = new fabric.Group(svgpattern, {
    top: 0,
    left: 0,
    width: 500,
    height: 500,
    angle: 45
  });

  var scaleGroup = new fabric.Group([ ptnGroup ], {
    scaleY: 0.3
  });
  canvas.add(scaleGroup);
}

    Alternatively you could use a transformation matrix with the rotation and scaling transformations multiplied in the correct order:

    fabric.loadSVGFromURL(patternURL, function (svgpattern) {

  var ptnGroup = new fabric.Group(svgpattern, {
    top: 0,
    left: 0,
    width: 500,
    height: 500
  });

  ptnGroup.transformMatrix = [0.707, 0.212, -0.707, 0.212, 0, 0];
  canvas.add(ptnGroup);
}

    Here 0.707 comes from cos(45°), and 0.212 is cos(45°) * 0.3.