Dynamic Aligning in Fabric.js

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<div id="app">
  <canvas id="canvas" style="border: solid black 1px"></canvas>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    canvas: null
  },
  mounted(){
  	this.canvas = new fabric.Canvas("canvas")
    this.canvas.setWidth(500)
    this.canvas.setHeight(500)
    this.canvas.add(new fabric.IText('Fabric', {
    	left: 100,
      top: 100
    }))
    this.initAligningGuidelines(this.canvas)
  },
  methods: {
    initAligningGuidelines(canvas){
    	canvas.on('object:moving', function(e) {
      	const activeObject = e.target
        const canvasObjects = canvas.getObjects()
        const activeObjectCenter = activeObject.getCenterPoint()
        const activeObjectLeft = activeObjectCenter.x
        const activeObjectTop = activeObjectCenter.y
        const activeObjectBoundingRect = activeObject.getBoundingRect()
        
        let left

        if (activeObjectBoundingRect.left <= 5) {
          if (activeObject.angle <= 90) {
            left = activeObject.aCoords.tl.x - activeObject.aCoords.bl.x
          } else if (activeObject.angle > 90 && activeObject.angle <= 180) {
            left = activeObject.aCoords.tl.x - activeObject.aCoords.br.x
          } else if (activeObject.angle > 180 && activeObject.angle <= 270) {
            left = activeObject.aCoords.tl.x - activeObject.aCoords.tr.x
          } else { // activeObject > 270
            left = 0
          }
          activeObject.set('left', Math.max(left, activeObject.left))
        }
      })
      canvas.on('after:render', function() {
      
        canvas.forEachObject(function (obj) {
          const bound = obj.getBoundingRect()

          canvas.contextContainer.strokeRect(
            bound.left + 0.5,
            bound.top + 0.5,
            bound.width,
            bound.height
          )
        })
       
      })
    }
  }
})

fabric.IText.prototype.onInput = function(e) {
  var fromPaste = this.fromPaste;
  this.fromPaste = false;
  e && e.stopPropagation();
  if (!this.isEditing) {
    return;
  }

  //console.log(this.hiddenTextarea.value)
  var textIfFixed =...