Fabric JS对象对齐无法按预期工作

Question

我试图在一个组内对齐一个对象。当我将第一个对象对齐到左边，中间或右边时它成功了，然后我尝试了第二个对象，第一个对象自己移动了！

请参阅下图（GIF）： Fabric JS Object Alignment

我使用HTML5 Canvas，fabric JS＆amp; jQuery用于开发。

这是小提琴：https://jsfiddle.net/mt0ccqq2/

以下是代码：

$(document).ready(function() {

  var canvas    = new fabric.Canvas("canvas", { preserveObjectStacking: true });

  // create rectangle
  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    width: 300,
    height: 100,
    fill: '#ff0000'
  });

  // create circle
  var text = new fabric.Text("Align Me next", {
    left: 190,
    top: 320,
    fontSize: 20
  });

  // create text
  var text2 = new fabric.Text("Align me first", {
    left: 100,
    top: 200,
    fontSize: 20
  });

  canvas.add(rect, text, text2);
  canvas.renderAll();

// GROUP ON SELECTION
canvas.on("selection:created", function(e) {
    var activeObj = canvas.getActiveGroup();
  if(activeObj.type === "group") {
    console.log("Group created");

var groupWidth = e.target.getWidth();
var groupHeight = e.target.getHeight();


e.target.forEachObject(function(obj) {
    var itemWidth = obj.getBoundingRect().width;
  var itemHeight = obj.getBoundingRect().height;

  // ================================
        // OBJECT ALIGNMENT: " H-LEFT "
        // ================================
  $('#objAlignLeft').click(function() {
      obj.set({
        left: -(groupWidth / 2),
        originX: 'left'
      });
    obj.setCoords();
    canvas.renderAll();
  });
  // ================================
        // OBJECT ALIGNMENT: " H-CENTER "
        // ================================
  $('#objAlignCenter').click(function() {
      obj.set({
        left: (0 - itemWidth/2),
        originX: 'left'
      });
    obj.setCoords();
    canvas.renderAll();
  });
  // ================================
        // OBJECT ALIGNMENT: " H-RIGHT "
        // ================================
  $('#objAlignRight').click(function() {
      obj.set({
        left: (groupWidth/2 - itemWidth/2),
        originX: 'center'
      });
    obj.setCoords();
    canvas.renderAll();
  });

});

 }
}); // END OF " SELECTION:CREATED "

});

任何帮助将不胜感激。提前谢谢。

Answer 1

我认为这是你正在寻找的，对吧？

这是对您的代码的调整......

canvas.on("selection:cleared", function(e) {
  $('#objAlignLeft').off('click');
  $('#objAlignCenter').off('click');
  $('#objAlignRight').off('click');
});

这里是所有重要的JSFiddle，https://jsfiddle.net/rekrah/xxrqbhph/。

如果您有任何其他问题，请与我们联系。很乐意提供帮助！