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);})

如何对齐选定对象的顶部/左侧/底部/右侧（FabricJS）

1 个答案: