将对象添加到旋转的组

Question

当我将一个对象添加到在FabricJS中旋转的组时，它不会尊重其他对象的角度。

重现的步骤：

• 选择一个对象
• 点击添加到群组
• 选择论坛
• 单击“旋转组”
• 点击添加到群组

该组现在包含具有不同角度的对象。

＆＃13;

＆＃13;

var canvas = new fabric.Canvas("canvas", {
  width: 400,
  height: 400
});
canvas.add(new fabric.Triangle({
  top: 100,
  left: 100,
  width: 50,
  height: 50,
  fill: '#f55'
}));

$("#rotate").on("click", function() {
  var currentObject = canvas.getActiveObject();
  var currentAngle = currentObject.angle;
  var adjustedAngle = currentAngle + 90;

  if (adjustedAngle >= 360) {
    adjustedAngle = 0;
  }
  currentObject.setAngle(adjustedAngle);
  canvas.renderAll();
});

$("#add").on('click', function() {
  if (canvas.getActiveObject()) {
    var activeObject = canvas.getActiveObject();
    var object;

    console.log(activeObject.type);

    if (activeObject.type == "triangle") {

      object = fabric.util.object.clone(activeObject);

      object.top = activeObject.top;
      object.left = activeObject.left + 25;
      object.fill = "#0000FF";

      var tempAngle = activeObject.angle;

      activeObject.angle = 0;
      object.angle = 0;

      var group = new fabric.Group([activeObject, object], {
        angle: tempAngle
      });

      canvas.add(group);
      canvas.setActiveObject(group);
      canvas.remove(activeObject);

    } else {
      var activeGroup = activeObject;
      var lastAddedObject = activeGroup.getObjects()[activeGroup.size() - 1];
      object = fabric.util.object.clone(lastAddedObject);

      object.set('top', lastAddedObject.top + activeGroup.top + activeGroup.height / 2);
      object.set('left', lastAddedObject.left + activeGroup.left + activeGroup.width / 2 + 25);

      console.log(lastAddedObject.angle);


      activeGroup.addWithUpdate(object);
      canvas.renderAll();
    }


  }

});

＆＃13;

canvas {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.0-rc.1/fabric.js"></script>

<button id="rotate">Rotate</button>
<button id="add">Add to Group</button>
<canvas id="canvas" width=400 height=400></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我链接了最新版本，其中将项目添加到旋转组中。

我真的不明白你想要达到的效果。 如果组的角度为30，则当您添加角度为0的对象时，它将不会旋转。

如果您希望对象跳转到旋转的组并像另一个一样旋转，则必须添加一些计算。在这些计算中，您必须考虑每次使用addWithUpdate时，组都会被销毁并再次创建，并将角度重置为0.

var canvas = new fabric.Canvas("canvas", {
  width: 400,
  height: 400
});
canvas.add(new fabric.Triangle({
  top: 100,
  left: 100,
  width: 50,
  height: 50,
  fill: '#f55'
}));

$("#rotate").on("click", function() {
  var currentObject = canvas.getActiveObject();
  var currentAngle = currentObject.angle;
  var adjustedAngle = currentAngle + 90;

  if (adjustedAngle >= 360) {
    adjustedAngle = 0;
  }
  currentObject.setAngle(adjustedAngle);
  canvas.renderAll();
});

$("#add").on('click', function() {
  if (canvas.getActiveObject()) {
    var activeObject = canvas.getActiveObject();
    var object;

    console.log(activeObject.type);

    if (activeObject.type == "triangle") {

      object = fabric.util.object.clone(activeObject);

      object.top = activeObject.top;
      object.left = activeObject.left + 25;
      object.fill = "#0000FF";

      var tempAngle = activeObject.angle;

      activeObject.angle = 0;
      object.angle = 0;

      var group = new fabric.Group([activeObject, object], {
        
      });

      canvas.add(group);
      canvas.setActiveObject(group);
      canvas.remove(activeObject);

    } else {
      var activeGroup = activeObject;
      var lastAddedObject = activeGroup.getObjects()[activeGroup.size() - 1];
      object = fabric.util.object.clone(lastAddedObject);

      object.set('top', lastAddedObject.top + activeGroup.top + activeGroup.height / 2);
      object.set('left', lastAddedObject.left + activeGroup.left + activeGroup.width / 2 + 25);
      //object.set('angle', activeObject.angle);

      activeGroup.addWithUpdate(object);
      canvas.renderAll();
    }


  }

});

canvas {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>

<button id="rotate">Rotate</button>
<button id="add">Add to Group</button>
<canvas id="canvas" width=400 height=400></canvas>