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的小程序，并决定哪个是最适合你的角度。您将该角度减去每个对象，然后添加到组中。

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

控件坐标与组坐标不匹配

1 个答案: