控件坐标与组坐标不匹配 [英] 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.

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

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.

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

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);

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

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

推荐答案

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

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.

这篇关于控件坐标与组坐标不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！