如何对齐所选对象的上/左/下/右（FabricJS）

Question

var canvas = window._canvas = new fabric.Canvas('c');
    
    var red = new fabric.Rect({
      top: 100,
      left: 0,
      width: 80,
      height: 50,
      fill: 'red'
    });
    var blue = new fabric.Rect({
      top: 0,
      left: 100,
      width: 50,
      height: 70,
      fill: 'blue'
    });
    var green = new fabric.Rect({
      top: 100,
      left: 100,
      width: 60,
      height: 60,
      fill: 'green'
    });
    
    canvas.add(red, blue, green);
    
    const alignLeft = document.getElementById('align_left');
    
    alignLeft.onclick = function() {
      const objs = canvas.getActiveObjects();
    }

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" ></canvas>
  <button id="align_left">Align Left</button>

从 FabricJS v3 中的 canvas.getActiveObjects 中寻找一种实用方法来对齐对象数组的边缘（上、右、下、左）

http://jsfiddle.net/rlightner/bzs0798x/1/

Answer 1

$('#align_left').click(function(){canvas.getActiveObject().set({left:0);})