Fabric JS - alignment lines

by 20yco

HTML

<canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

var canvas = this.__canvas = new fabric.Canvas('canvas');

fabric.util.object.extend(fabric.Object.prototype, {
	redrawAlignmentLines: function(){
    const ctx = this.canvas.getContext("2d");
		const rad = fabric.util.degreesToRadians(this.angle);
    const bb = this.getBoundingRect();
		
    this.setCoords();
    canvas.contextContainer.strokeStyle = 'magenta';
    ctx.save();sfwefsedfываы
    
    if (this.alignmentLines.left) {
	    ctx.moveTo(bb.left, 0);
			ctx.lineTo(bb.left, 600);
			ctx.stroke();  
    }
    ctx.restore();
  }
});

var red = new fabric.Rect({
	id: 1,
  left: 200,
  top: 200,
  width: 100,
  height: 100,
  fill: 'red',
  angle: 30,
  originX: 'center',
  originY: 'center',
  alignmentLines: {
  	top: true,
    left: true
  }
});
canvas.add(red);
canvas.renderAll();

canvas.on('after:render', function() {
	canvas.forEachObject(function(obj) {
		obj.redrawAlignmentLines();
	})
});