javascript - 将对象添加到旋转组

Question

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

重现步骤:

• 选择一个对象
• 点击“添加到群组”
• 选择组
• 点击“轮换组”
• 点击“添加到群组”

该组现在包含具有不同 Angular 对象。

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

我链接了最新版本，可以将项目添加到轮换组中。

我不太明白你想达到什么效果。如果组的 Angular 为30，则当您添加 Angular 为0的对象时，该对象不会旋转。

如果你想让一个对象在旋转组中跳跃并像其他组一样旋转，你必须添加一些计算。在这些计算中，您必须考虑到每次使用 addWithUpdate 时，组都会被销毁并再次创建，并将 Angular 重置为 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>