Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Find Coordinates of the Active Object in fabric.js

Using fabric js i draw a different shapes such as circle ,rectangle .I tried

the rectangle is drawn by fabric.rect() method

 canvas.getActiveObject().get('points');

but it returns undefined

I have also gone through this post

How to get polygon points in Fabric.js

but i cannot solve the issue

    var object = canvas.getActiveObject();
    var objectCenter = object.getCenterPoint();
    var translatedPoints = object.get('points');
    console.log(object);
    console.log(translatedPoints);
    translatedPoints.map(function(p) {
        var pt =  {
            x: objectCenter.x + p.x,
            y: objectCenter.y + p.y
        };
           console.log(pt);

Is there any way to find the coordinates of the rectangle or other active objects drawn by similar methods

like image 322
ArUn Avatar asked Mar 14 '23 02:03

ArUn


2 Answers

You can use this code:

var obj = canvas.getActiveObject();
alert(obj.left + "," + obj.top);
like image 197
Ali Soltani Avatar answered Mar 23 '23 08:03

Ali Soltani


If you want to get the data for all objects on your canvas, you can create a JSON object using the following code. Coordinates for all of your objects will be included as properties in the output (along with object height & width - per Chirag's question in the previous answer).

function serializeCanvas(c) {
    var canvasJson = JSON.stringify(c);
    console.log(canvasJson);
}
like image 31
Shane Avatar answered Mar 23 '23 07:03

Shane