JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<input type="number" id="spacingPixels" value="10"/>
<button onclick="moveCircles()">Move Circles</button>
<button onclick="resetTransform()">Reset</button>
<p/>
<canvas id="root" width="800" height="500" style="border:1px solid">

JavaScript

console.clear();
var canvas = new fabric.Canvas('root');
var circles = [];

circles.push(new fabric.Circle({id: "circle1", radius: 20, fill: 'green', left: 150, top: 100, originX: "Center", originY: "Center"}));
circles.push(new fabric.Circle({id: "circle2", radius: 20, fill: 'red', left: 200, top: 100, originX: "Center", originY: "Center"}));

g = new fabric.Group(circles);
//once circles are added to group their coordinates change so I store their new original base coordinates in custom variables
g.forEachObject(function(obj){ 
    //console.log(obj.aCoords, obj.oCoords, obj.getLeft(), obj.getTop())
		obj.originalLeft = obj.getLeft();
		obj.originalTop = obj.getTop();
}, g);

canvas.add(g);
canvas.renderAll();

canvas.on('object:modified', (e) => {
 g.forEachObject(function(obj){ 
    //console.log(obj.aCoords, obj.oCoords, obj.getLeft(), obj.getTop())
	}, g);

})

function resetTransform(){
		fabric.util.resetObjectTransform(g);
    canvas.renderAll();
}

function moveCircles(){
		var space = parseFloat(document.getElementById("spacingPixels").value);
		g.forEachObject(function(obj){ 
    		//console.log(obj.id);
        switch (obj.id){
          case "circle1":
          	//console.log("setting Circle 1 from " + (obj.originalLeft.toString() + " to ") + (obj.originalLeft + space).toString());
          	obj.setLeft(obj.originalLeft - space)
  	        break;
          case "circle2":
          	//console.log("setting Circle 2 from " + (obj.originalLeft.toString() + " to ") + (obj.originalLeft + space).toString());
          	obj.setLeft(obj.originalLeft + space)
	          break;
          default:      
        }        
    })

    
var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);     ...