[fabricJS] Polygon editor

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<p>
  <button type="button" id="topoly">Show Polygon</button>
  <button type="button" id="edit">Edit Polygon</button>
  <button type="button" id="tojson">toJSON</button>
</p>
<canvas id="c" width="400" height="300"></canvas>
<p id="json"></p>

CSS

canvas {
  border: 1px solid;
}

JavaScript

// --- EXTENSIONS --- //

fabric.Object.prototype.toObject = (function (toObject) {
  return function () {
    return fabric.util.object.extend(toObject.call(this), {
      id: this.id,
      referenceId: this.referenceId
    });
  };
})(fabric.Object.prototype.toObject);

fabric.Point.prototype.angleRelativeFrom = function (startpoint) {
	return Math.atan2(this.y - startpoint.y, this.x - startpoint.x) * 180 / Math.PI;
};

fabric.StaticCanvas.prototype.getObjectById = function (id) {
	var obj = undefined;  
	this.getObjects().some(function (o) {
  	if (o.hasOwnProperty("id")) {
    	if (o.id === id) {
      	obj = o;
        return true;
      }
    }    
    return false;
  });  
  return obj;
};

// --- --- //

var id = 0;

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

var points = [
	new fabric.Point(200, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150)
];

var getCenterPoint = function (_ptArray) {
	var _xPt = _ptArray.map(function(_pt){return _pt.x});
  var _yPt = _ptArray.map(function(_pt){return _pt.y});
  var _minX = fabric.util.array.min(_xPt);
  var _maxX = fabric.util.array.max(_xPt);
  var _minY = fabric.util.array.min(_yPt);
  var _maxY = fabric.util.array.max(_yPt);
  
  return new fabric.Point((_maxX+_minX)/2, (_maxY+_minY)/2);
};

var options = {
	fill: "transparent",
  stroke: "black",
  strokeWidth: 3,
  perPixelTargetFind: true,
  hasControls: false,
  hasBorders: false,
  lockMovementX: true,
  lockMovementY: true,
  lockScalingX: true,
  lockScalingY: true,
  lockRotation: true,
  originX: "center",
  originY: "center"
};

var createLines = function () {
	var lines = [];
  var center;
  var _polyPoints = canvas.getObjects().reduce(function(a, o){
  	if (o.type === "polygon") {    
    	var matrix = o.calcTransformMatrix();
      var translatedPoints = o.points.map(function(p){
      return new fabric.Point(p.x - o.minX - o.width/2, p.y - o.minY - o.height/2);
      }).map(function(p){
        return fabric.util.transformPoint(p,...