getting details of selection

in fabricjs

by softvar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>
<button id="info">Object(s) Info</button>
<button id="selectAll">Select All</button>

JavaScript

var canvas = new fabric.Canvas('paper', { isDrawingMode: true });
$("#select").click(function(){
    canvas.isDrawingMode = false;
});
$("#draw").click(function(){
    canvas.isDrawingMode = true;
});
$("#info").click(function(){
    canvas.isDrawingMode = false;
    var activeObject = canvas.getActiveObject(),
    activeGroup = canvas.getActiveGroup();
    if (activeObject) {
        alert(activeObject);
        // any valid property as defined in library, refer JSON 
        // to know all the properties
        // console.log(activeObject.type); //type: circle,tri,rect etc.
        // console.log(activeObject.fill); // filled-color
        // console.log(activeObject.width) // width
    }
    else if (activeGroup) {
       var objectsInGroup = activeGroup.getObjects();
       canvas.discardActiveGroup();
       objectsInGroup.forEach(function(object) {
           alert(object);
           // any valid property as defined in library, refer JSON 
           // to know all the properties
           // console.log(object.type); //type: circle,tri,rect etc.
           // console.log(object.fill); // filled-color
           // console.log(object.width) // width
       });
    }
});
$("#selectAll").click(function(){
    canvas.isDrawingMode = false;
    selectAllCanvasObjects();
});

// Adding objects to the canvas...

// adding text
var text = new fabric.Text('Text inside canvas', { 
  left: 40, 
  top: 50 
});
text.hasRotatingPoint = true;
canvas.add(text);

// adding circle
var circle = new fabric.Circle({
    left: 200,
    top: 150,
    radius: 50,
    fill: "#299b71"
});
circle.hasRotatingPoint = true;
canvas.add(circle);

// adding triangle
var triangle = new fabric.Triangle({
    left: 130,
    top: 150,
    strokeWidth: 1,
    width:70,height:90,
    stroke: 'black',
    fill:'#ff8a1b',
    selectable: true,
    originX: 'center'
});
triangle.hasRotatingPoint = true;
canvas.add(triangle);

// select all objects
function selectAllCanvasObjects(){
	var objs =...