CODEWITHSUNDEEP
fabricjs
Honchar Denys
Honchar Denys

Reputation: 1518

Fabricjs triangle management

How it's possible from three left and top make correct triangle with fabricjs. I have tried to do something with width and height, but result wasn't what expected. Example: we have [{left:50,top:50},{left:40,top:60},{left:60,top:60}], how can we create a triangle with that values?

Upvotes: 1

Views: 3701

Answers (3)

Calvin
Calvin

Reputation: 993

The above code can be simplized to:

canvas = new fabric.Canvas('canvas');
var p1 = {x:50,y:50}, p2 = {x:40,y:60}, p3 = {x:60,y:60};
var shape = new fabric.Polygon([p1, p2, p3]);
canvas.add(shape);

Upvotes: 1

AndreaBogazzi
AndreaBogazzi

Reputation: 14741

canvas = new fabric.Canvas('canvas');
var p1 = {left:50,top:50}; var p2 = {left:40,top:60}; var p3 = {left:60,top:60};
var shape = new fabric.Polygon([{x:p1.left, y:p1.top},{x:p2.left, y:p2.top},{x:p3.left, y:p3.top}]);
canvas.add(shape);
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

You can create a fabric.Polygon([array of points...]);

every point must have 'x' and 'y' property.

Upvotes: 7

bcr
bcr

Reputation: 3811

To create a triangle in fabric you don't set the three vertices. To create a triangle that way you should look into the polygons or polylines. To create an actual triangle object you want to do something like this:

var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

Here's a working fiddle.

Edit: In setting the position (top, left), these are relative to the originX and originY properties.

Upvotes: 2

Related Questions