Controls coordinates do not match group coordinates

问题

I do have a group with multiple objects. If the group is not rotated. Everything looks fine and controls are as expected.

However, when I take exactly the same group and set the rotation angle programmatically before rendering, my controls coordinates equal the bounding rect, but not the group coordinates anymore.

I have created a simplied version of the problem here: 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);

Basically I would like to have the controls in group 2 to look like the controls of group 1. Thanks a lot

回答1:

There is no built in way to do this. As you see the difference is setting up the angle on the objects or on groups. What you can do is write a small procedure that cycle trough the group._objects and decide which is the best angle for you. You subtract that angle to every object and you add on group.

Be aware that is not easy choosing a good one. You have to take in account which object is the biggest or the one that takes more space and use as "master" angle if you want compact controls.

来源：https://stackoverflow.com/questions/36897935/controls-coordinates-do-not-match-group-coordinates

标签

javascript

fabricjs