控件坐标与组坐标不匹配

Question

我确实有一个包含多个对象的组。如果组不旋转。一切看起来都很好，控制也符合预期。

但是，当我采用完全相同的组并在渲染之前以编程方式设置旋转角度时，我的控件坐标等于边界矩形，但不再是组坐标。

我在这里创建了问题的简化版本：http://jsfiddle.net/schacki/avd6sjps/2/

fabric.Object.prototype.originX = "center";
fabric.Object.prototype.originY = "center";

// init canvas
var canvas = window._canvas = new fabric.Canvas('c');

var angle = 20;

// Group 1: no rotation
var left1 = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'red',
  left:75,
  top: 75,
  originX: "center",
  originY: "center"
});
var middle1 = new fabric.Rect({
  radius: 50,
  fill: 'green',
  width: 300,
  height: 100,
  left: 200,
  top: 100,
  originX: "center",
  originY: "center"
});
var right1 = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'blue',
  left:325,
  top: 125,
  originX: "center",
  originY: "center"
});
var group1 = new fabric.Group([middle1, left1, right1],{angle: 45});

// Group 1: no rotation
var left2 = new fabric.Rect({
  angle: 45,
  width: 50,
  height: 50,
  fill: 'red',
  left:75+54,
  top: 275-80,
  originX: "center",
  originY: "center"
});
var middle2 = new fabric.Rect({
    angle: 45,
  radius: 50,
  fill: 'green',
  width: 300,
  height: 100,
  left: 200,
  top: 300,
  originX: "center",
  originY: "center"
});
var right2 = new fabric.Rect({
  angle: 45,
  width: 50,
  height: 50,
  fill: 'blue',
  left:325-54,
  top: 325+80,
  originX: "center",
  originY: "center"
});
var group2 = new fabric.Group([middle2, left2, right2]);

canvas.add(group1);
canvas.add(group2);
canvas.setActiveObject(group1);

canvas.setActiveObject(group2);

基本上，我希望第 2 组中的控件看起来像第 1 组中的控件。 非常感谢

Answer 1

没有内置的方法可以做到这一点。 如您所见，不同之处在于在对象或组上设置角度。 您可以做的是编写一个小程序，循环遍历 group._objects 并确定哪个角度最适合您。减去每个对象的角度，然后添加组。

请注意，选择一个好的并不容易。如果您想要紧凑的控件，您必须考虑哪个对象最大或占用更多空间并用作“主”角度。