控件坐标与组坐标不匹配

Controls coordinates do not match group coordinates

本文关键字：坐标 不匹配 控件      更新时间：2023-09-26

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

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

我在这里创建了一个问题的简化版本：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组的控件。非常感谢

没有内置的方法可以做到这一点。正如您所看到的，不同之处在于设置对象或组的角度。你能做的是写一个小程序，在小组中循环_对象，并决定哪个角度最适合您。将该角度减去每个对象，然后添加到组中。

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

相关文章：