将对象添加到旋转的组

Adding objects to a rotated Group

本文关键字：旋转 对象 添加      更新时间：2023-09-26

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

重现步骤：

  • 选择一个对象
  • 点击添加到群组
  • 选择组
  • 点击旋转群组
  • 点击添加到群组

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

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>

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

我真的不明白你想达到什么效果。如果组的角度为 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>

相关文章：