CODEWITHSUNDEEP
htmlcanvasfabricjs
Dian Agung
Dian Agung

Reputation: 27

Fabric JS object alignment not working as expected

I tried to align an object within a group. When I align the first object to the left, center or right it was successful, then I tried for the second object, the first object moved by itself!

Please see the image below (GIF): Fabric JS Object Alignment

I used HTML5 Canvas, fabric JS & jQuery for the development.

Here is the fiddle: https://jsfiddle.net/mt0ccqq2/

Here is the Code:

$(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 "

});

Any help would be appreciated. Thanks in advance.

Upvotes: 1

Views: 2727

Answers (1)

Tim Harker
Tim Harker

Reputation: 2407

I think this is what you're looking for, right?

enter image description here

Here's the tweak to your code...

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

And here's the all important JSFiddle, https://jsfiddle.net/rekrah/xxrqbhph/.

Let me know if you have any further questions. Happy to help!

Upvotes: 5

Related Questions