Fabricjs: How to get the area?

Question

I need to know the area of all elements of the group. Is there a ready-made solution? Perhaps you know the area excluding the imposition?

window.canvas = new fabric.Canvas('fabriccanvas');
var circle1 = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 0
});
var Rect = new fabric.Rect({
    left: 50,
  top: 50,
  height: 20,
  width: 20,
  fill: 'green'
});
var circle2 = new fabric.Circle({
  radius: 20,
  fill: 'black',
  left: 70,
  top: 80
});
var group = new fabric.Group([ circle1, circle2, Rect ], {});
window.canvas.add(group);

you can get area of full canvas , area of each object – vijay Jan 31 '17 at 14:11 — vijay, Jan 31 '17 at 14:11

score 0 · Answer 1 · edited May 23 '17 at 12:01

VINET,

There is no predefined functionality, you have to build your own. This is short example how to calculate area for circles and rectangles in the group (as you created above):

var groupArea = 0;

group.forEachObject(function(o){
  groupArea += calculateArea(o);
});

function calculateArea(obj){
    switch (obj.type){
    case 'circle':
        return Math.PI*obj.radius*obj.radius;
    break;
    case 'rect':
        return obj.width*obj.height;
    break;
  }
}

alert(groupArea);

This post is how to calculate polygon area: Calculating Polygon Area

This post is for triangle area: Calculate triangle area and circumference from user input sides

Hopefully it will help you.

Fabricjs: How to get the area?

1 Answers1