fabric.js：旋转后复位控制组轴

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.

fabric.js：旋转后复位控制组轴

fabric.js: reset controls axis of group after rotation

javascript

svg

canvas

coordinate-transformation

fabricjs