Fabric.js group alignment with scaling

fabric-js-group-alignment-with-scaling.markdown

Fabric.js group alignment with scaling

A Pen by Sebastián Guevara on CodePen.

License.

index.html

<p>Alignment:</p>
<button onclick="groupAlign('right');">
  Check Value
</button> 
<button onclick="groupAlign('centerX');">
  Center on X
</button>
<button onclick="groupAlign('centerY');">
  Center on Y
</button>
<canvas id="c" width="1000" height="500"></canvas>

script.js

var canvas = window._canvas = new fabric.Canvas('c', {
    backgroundColor: '#eee'
}),
    img1 = 'http://dummyimage.com/200/09f/fff.png',
    img2 = 'http://dummyimage.com/240x240/b314b3/fff.jpg',
    prevDirection;

fabric.Group.prototype.originX = fabric.Group.prototype.originY = 'center';

canvas.on({
    'object:modified': objectScaling
});

function objectScaling(options) {
    if (options.target.isType('group')) {
        groupItemsRefresh(options.target);
    }
    console.warn('new updates', options);
}

/**
fabric.Image.fromURL(img1, function (img1) {
    img1.set({
        left: 700,
        top: 200,
        lockUniScaling: true,
        originX: 'center',
        originY: 'center',
    });

    fabric.Image.fromURL(img2, function (img2) {
        img2.set({
            left: 400,
            top: 300,
            lockUniScaling: true,
            originX: 'center',
            originY: 'center',
        });
        **/

        var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red',  originX: 'center',
            originY: 'center' });
        var circle = new fabric.Circle({ radius: 100, fill: 'green',  originX: 'center',
            originY: 'center' });
        var group1 = new fabric.Group([circle, rect], { left: 100, top: 100 });
        canvas.add(group1);

      var rect1 = new fabric.Rect({ width: 100, height: 100, fill: 'yellow',  originX: 'center',
            originY: 'center' });
        var circle1 = new fabric.Circle({ radius: 100, fill: 'red',  originX: 'center',
            originY: 'center' });
        var group2 = new fabric.Group([circle1, rect1], { left: 400, top: 400 });
        canvas.add(group2);



function groupItemsRefresh(group) {
    group.forEachObject(function (item) {
        group.removeWithUpdate(item).addWithUpdate(item);
    });
    group.setCoords();
    canvas.renderAll();
}

function groupAlign(direction) {

    var group = canvas._activeObject;

    console.log('group', group);

    console.log('Active Objs', canvas.getActiveObjects());

    if (direction === prevDirection || !group) {
        return;
    }

    var groupWidth = group.getBoundingRect(true).width,
        groupHeight = group.getBoundingRect(true).height,
        scaleFactor = 1;


    canvas.getActiveObjects().forEach(function (item) {

        var itemWidth = item.getBoundingRect().width * scaleFactor,
            itemHeight = item.getBoundingRect().height * scaleFactor;

        if (direction === 'left') {
            item.set({
                left: -groupWidth / 2 + itemWidth / 2
            });

        }

        else if (direction === 'top') {
            item.set({
                top: -groupHeight / 2 + itemHeight / 2
            });
        }

        else if (direction === 'right') {
            // item.set({
            //     left: groupWidth / 2 - itemWidth / 2
            // });
        }

        else if (direction === 'centerX') {
              const newItem = Object.assign({}, item);

            item.set({
                left: 0
            });
            group.setCoords();

            /**
             * TODO: Se obtienen las coordenadas de la siguiente manera:
             *  left: item.group.left - item.left
             *  top: item.group.top - item-top
             *  */
            item.calcCoords();
            console.log('Position Nueva X',group.left);
            console.log('Position Nueva Y',group.top + item.top);

            debugger;
        }

        else if (direction === 'centerY') {
                    const newItem = Object.assign({}, item);

            item.set({
                top: 0
            });
            group.setCoords();

            /**
             * TODO: Se obtienen las coordenadas de la siguiente manera:
             *  left: item.group.left - item.left
             *  top: item.group.top - item-top
             *  */
            item.calcCoords();
            console.log('Position Nueva X',group.left + item.left);
            console.log('Position Nueva Y',group.top);

            debugger;
        }

        prevDirection = direction;

    });

    groupItemsRefresh(group);

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.js"></script>

style.css

canvas {
  border: 1px solid #999;
}