fabric.js：reset在旋转后控制组的轴

Question

不确定我是否正确标题这个问题，但是我正在从SVG创建一个组，并且需要它看起来像是在等距框上面。所以我需要将它旋转45度，然后缩小它的高度。

问题是旋转后，改变高度仍会改变原始（旋转）Y轴的组。

这是一个直观的解释......

以下是我正在使用的相关代码......

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

Answer 1

问题是在旋转之前应用缩放。要在轮换后强制进行缩放，可以将ptnGroup包装在另一个组中，并将比例应用于外部组：

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

或者，您可以使用变换矩阵，其旋转和缩放变换以正确的顺序相乘：

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

此处0.707来自cos(45°)，而0.212来自cos(45°) * 0.3。