fabricjs

How to get polygon points in Fabric.js


I am drawing polygon by capturing mouse clicks on canvas and then passing these points to fabric.Polygon. So, in this manner I'm drawing multiple polygons.

What I need know is, I want to get the mouse co-ordinates (pixel points on canvas) for the polygon which is selected now?

I have tried with:

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

But this is giving some negative and some positive values.

So, can u please tell me a way to find out the polygon points?


Solution

  • Polygon points are relative to its center so you can get their "absolute" position like so:

    var polygon = canvas.getActiveObject();
    
    var polygonCenter = polygon.getCenterPoint();
    
    var translatedPoints = polygon.get('points').map(function(p) {
      return { 
        x: polygonCenter.x + p.x, 
        y: polygonCenter.y + p.y
      };
    });
    

    Let's check how this looks:

    translatedPoints.forEach(function(p) {
      canvas.getContext().strokeRect(p.x-5, p.y-5, 10, 10);
    });
    

    enter image description here

    I think this will only work if polygon's angle is at 0 (otherwise need to "rotate" points coordinates as well).