fabricjs sector

by irwinwelsh

HTML

<canvas id="c" width="500" height="600"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');

function arc(left,top,radius,angle, rotate) {

  var coeff = Math.PI/180;

  // находим длину хорды
  var width = 2 * radius * Math.sin((angle/2) * coeff);
  var height = radius * Math.cos((angle/2) * coeff);


  var triangle = new fabric.Triangle({
    width: width, 
    height: height, 
    left: left,
    top: top + width/2,
    fill: 'rgba(0,200,0,0.5)',
    angle: -90,
  });


  var circle = new fabric.Circle({
    radius: radius, 
    fill: 'rgba(0,200,0,0.5)',
    left: left - radius,
    top: top - radius,
    startAngle: - angle * coeff / 2,
    endAngle: angle * coeff / 2,
    angle: 0,
  });

  var group = new fabric.Group([circle,triangle],{
    angle : rotate,
  });

  return group;
}


var sector = arc(100,200,200,30, 0);
sector.set('angle', 10);
canvas.add(sector);