Fabric JS对象对齐未按预期工作

Question

我试图对齐组内的一个对象。当我将第一个对象向左、居中或向右对齐时，它是成功的，然后我尝试了第二个对象，第一个对象自行移动！

请看下图（GIF）： Fabric JS Object Alignment

我使用 HTML5 Canvas、fabric JS 和 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/。

如果您还有其他问题，请告诉我。乐于助人！