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组的控件。谢谢

对象坐标与组坐标不匹配

0 个答案: