javascript - 如何使用fabricJS在画布上水平和垂直对象之间均匀间隔？

Question

我正在使用织物 js + 打字稿。我有超过 2 个对象，我想在这些对象之间水平和垂直设置空间均匀。我找不到任何解决方案。我正在使用织物 js + 打字稿。我有超过 2 个对象，我想在这些对象之间水平和垂直设置空间均匀。我找不到任何解决方案。

看到这个

fabric.Object.prototype.originX = "center";
fabric.Object.prototype.originY = "center";

var canvas = window._canvas = new fabric.Canvas('c');

var circle1 = new fabric.Circle({
  radius: 30,  fill: 'red',  left: 50, top: 70,  originX: "left",  originY: "top"
});

var circle2 = new fabric.Circle({
  radius: 40,  fill: 'green',  left: 200, top: 100,  originX: "left",  originY: "top"});

var circle3 = new fabric.Circle({
  radius: 30,  fill: 'blue',  left: 300, top: 150,  originX: "left",  originY: "top"
});

    canvas.add(circle1);
    canvas.add(circle2);
    canvas.add(circle3);

$('#distribute').click(function () {
   var group = canvas.getActiveObject();
    var items = canvas.getActiveObject()._objects,
    newDim = getNewViewDimensions(group, 'horizontal');
    group.set({
      // width: newDim.width + (2 * 0),
      // height: newDim.height + (items.length - 1) * 10 + (2 * 0)
    });
    for (var i = 0; i < items.length; i++) {
      if (i == 0) {
        items[i].set({
          left: -group.width / 2 + 0,
          top: -group.height / 2 + 0
        });
      } else {
        items[i].set({
          left: items[i - 1].left,
          top: items[i - 1].top + items[i - 1].height + 10
        });
      }
    }
    canvas.renderAll();
});

 function getNewViewDimensions(group, val) {
    var objects = canvas.getActiveObject()._objects, minWidth = 0, minHeight = 0, w, h;
    switch (val) {
      case 'vertical':
        for (i = 0; i < objects.length; i++) {
          minWidth += objects[i].width * objects[i].scaleX;
          h = objects[i].height * objects[i].scaleY;
          if (h > minHeight) {
            minHeight = h;
          }
        }
        break;
      case 'horizontal':
        for (var i = 0; i < objects.length; i++) {
          minHeight += objects[i].height * objects[i].scaleY;
          w = objects[i].width * objects[i].scaleX;
          if (w > minWidth) {
            minWidth = w;
          }
        }
        break;
    }
    return {
      width: minWidth,
      height: minHeight
    }
  }

canvas {
    border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="300"></canvas>

<small> select all circles and hit the button </small>
<br>
<br>
<button id="distribute">  distribute </button>

标签： javascripttypescriptfabricjs