将对象添加到旋转组

Question

当我将对象添加到在 FabricJS 中旋转的组时，它不考虑其他对象的角度。

重现步骤：

Select一个对象
点击加入群组
Select组
点击旋转组
点击加入群组

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

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


  }

});

canvas {
  border: 1px solid red;
}

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

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>

将对象添加到旋转组

Adding objects to a rotated Group

javascript

canvas

fabricjs