Syncing objects

by Vijay Gujar

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<canvas id="c" width="600" height="300"></canvas>
<button id="group" class="btn btn-info">Group selected objecs</button><br>
  <button id="ungroup" class="btn btn-info">Ungroup selected objects</button><br>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = new fabric.Canvas('c', {'backgroundColor': '#ffffff'});

var rect1 = new fabric.Rect({
    left: 100, top: 100,
    width: 50, height: 50,
    fill: 'red'
});

var rect2 = new fabric.Rect({
    left: 200, top: 200,
    width: 50, height: 50,
    fill: 'green'
});

var rect3 = new fabric.Rect({
    left: 100, top: 200,
    width: 50, height: 50,
    fill: 'blue'
});

canvas.add(rect1, rect2, rect3);

function onMoving(options) {
  if (options.target === rect1) {
    rect2.left = rect1.left + 100;
    rect2.top = rect1.top + 100;
    rect3.left = rect1.left;
    rect3.top = rect1.top + 100;
  }
  else if (options.target === rect2) {
    rect1.left = rect2.left - 100;
    rect1.top = rect2.top - 100;
    rect3.left = rect2.left - 100;
    rect3.top = rect2.top;
  }
  else if (options.target === rect3) {
    rect1.left = rect3.left;
    rect1.top = rect3.top - 100;
    rect2.left = rect3.left + 100;
    rect2.top = rect3.top;      
  }
  canvas.forEachObject(function(o){o.setCoords()});
}
function onRotating(options) {
  canvas.forEachObject(function(o){
    o.angle = options.target.angle;
  });
}
function onScaling(options) {
  canvas.forEachObject(function(o){
    o.scaleX = options.target.scaleX;
    o.scaleY = options.target.scaleY;
  });
}

group.onclick = function() {
        if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'activeSelection') {
          return;
        }
        canvas.getActiveObject().toGroup();
        
        canvas.getActiveObject().subTargetCheck = true;
        console.log(canvas)
        canvas.requestRenderAll();
      }

      ungroup.onclick = function() {
        if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'group') {
          return;
        }
        canvas.getActiveObject().toActiveSelection();
        canvas.requestRenderAll();
      }
      
canvas.on('object:moving',...