在fabricjs中将对象与画布对齐

Question

我正在尝试实现对象对齐（即上 - 下 - 左 - 右 - CenterH - CenterV）我的代码运行良好，但我不知道如何在对象旋转时处理对齐（使用提供的代码的一部分当角度不等于 0 时对象消失，我想知道如何计算最小左偏移量才能仍然看到整个旋转的对象）。我的代码如下。

var canvas = new fabric.Canvas('a');

canvas.add(new fabric.Rect({

  left: 50,

  top: 50,

  height: 50,

  width: 50,

  fill: 'red'

}));

canvas.add(new fabric.Rect({

  angle: 76,

  left: 180,

  top: 50,

  height: 50,

  width: 50,

  fill: 'green'

}));

canvas.add(new fabric.Rect({

  left: 90,

  top: 130,

  height: 50,

  width: 50,

  fill: 'blue'

}));

canvas.renderAll();

$('.alignment').click(function() {

  var cur_value = $(this).attr('data-action');

  var activeObj = canvas.getActiveObject() || canvas.getActiveGroup();

  if (cur_value != '' && activeObj) {

    process_align(cur_value, activeObj);

    activeObj.setCoords();

    canvas.renderAll();

  } else {

    alert('Please select a item');

    return false;

  }

});

/* Align the selected object */

function process_align(val, activeObj) {

  switch (val) {

    case 'left':

      activeObj.set({

        left: 0

      });

      break;

    case 'right':

      activeObj.set({

        left: canvas.width - (activeObj.width * activeObj.scaleX)

      });

      break;

    case 'top':

      activeObj.set({

        top: 0

      });

      break;

    case 'bottom':

      activeObj.set({

        top: canvas.height - (activeObj.height * activeObj.scaleY)

      });

      break;

    case 'centerH':

      activeObj.set({

        left: (canvas.width / 2) - ((activeObj.width * activeObj.scaleX) / 2)

      });

      break;

    case 'centerV':

      activeObj.set({

        top: (canvas.height / 2) - ((activeObj.height * activeObj.scaleY) / 2)

      });

      break;

  }

}

我如何更新代码才能对齐旋转的对象？（检查绿色矩形上的对齐方式）

Answer 1

因此，正如@HelderSepulveda建议我使用 aCoords 来动态计算坐标一样，我将在下面粘贴工作代码以防万一。var canvas = new fabric.Canvas('a');canvas.add(new fabric.Rect({&nbsp; left: 50,&nbsp; top: 50,&nbsp; height: 50,&nbsp; width: 50,&nbsp; fill: 'red'}));canvas.add(new fabric.Rect({&nbsp; angle: 76,&nbsp; left: 180,&nbsp; top: 50,&nbsp; height: 50,&nbsp; width: 50,&nbsp; fill: 'green'}));canvas.add(new fabric.Rect({&nbsp; left: 90,&nbsp; top: 130,&nbsp; height: 50,&nbsp; width: 50,&nbsp; fill: 'blue'}));canvas.renderAll();$('.alignment').click(function() {&nbsp; var cur_value = $(this).attr('data-action');&nbsp; var activeObj = canvas.getActiveObject() || canvas.getActiveGroup();&nbsp; if (cur_value != '' && activeObj) {&nbsp; &nbsp; process_align(cur_value, activeObj);&nbsp; &nbsp; activeObj.setCoords();&nbsp; &nbsp; canvas.renderAll();&nbsp; } else {&nbsp; &nbsp; alert('Please select a item');&nbsp; &nbsp; return false;&nbsp; }});/* Align the selected object */function process_align(val, activeObj) {&nbsp; switch (val) {&nbsp; &nbsp; case 'left':&nbsp; &nbsp; &nbsp; var left;&nbsp; &nbsp; &nbsp; if(activeObj.angle <= 90) {&nbsp; &nbsp; &nbsp; &nbsp; left = activeObj.aCoords.tl.x - activeObj.aCoords.bl.x;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 90 && activeObj.angle <= 180) {&nbsp; &nbsp; &nbsp; &nbsp; left = activeObj.aCoords.tl.x - activeObj.aCoords.br.x;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 180 && activeObj.angle <= 270) {&nbsp; &nbsp; &nbsp; &nbsp; left = activeObj.aCoords.tl.x - activeObj.aCoords.tr.x;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 270) {&nbsp; &nbsp; &nbsp; &nbsp; left = 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; activeObj.set({&nbsp; &nbsp; &nbsp; &nbsp; left: left&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'right':&nbsp; &nbsp; &nbsp; var left;&nbsp; &nbsp; &nbsp; if(activeObj.angle <= 90) {&nbsp; &nbsp; &nbsp; &nbsp; left = activeObj.aCoords.tl.x + (canvas.width - activeObj.aCoords.tr.x);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 90 && activeObj.angle <= 180) {&nbsp; &nbsp; &nbsp; &nbsp; left = canvas.width;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 180 && activeObj.angle <= 270) {&nbsp; &nbsp; &nbsp; &nbsp; left = activeObj.aCoords.tl.x + (canvas.width - activeObj.aCoords.bl.x);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 270) {&nbsp; &nbsp; &nbsp; &nbsp; left = activeObj.aCoords.tl.x + (canvas.width - activeObj.aCoords.br.x);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; activeObj.set({&nbsp; &nbsp; &nbsp; &nbsp; left: left&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'top':&nbsp; &nbsp; &nbsp; var top;&nbsp; &nbsp; &nbsp; if(activeObj.angle <= 90) {&nbsp; &nbsp; &nbsp; &nbsp; top = 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 90 && activeObj.angle <= 180) {&nbsp; &nbsp; &nbsp; &nbsp; top = activeObj.aCoords.tl.y - activeObj.aCoords.bl.y;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 180 && activeObj.angle <= 270) {&nbsp; &nbsp; &nbsp; &nbsp; top = activeObj.aCoords.tl.y - activeObj.aCoords.br.y;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 270) {&nbsp; &nbsp; &nbsp; &nbsp; top = activeObj.aCoords.tl.y - activeObj.aCoords.tr.y;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; activeObj.set({&nbsp; &nbsp; &nbsp; &nbsp; top: top&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'bottom':&nbsp; &nbsp; &nbsp; var top;&nbsp; &nbsp; &nbsp; if(activeObj.angle <= 90) {&nbsp; &nbsp; &nbsp; &nbsp; top = activeObj.aCoords.tl.y + (canvas.height - activeObj.aCoords.br.y);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 90 && activeObj.angle <= 180) {&nbsp; &nbsp; &nbsp; &nbsp; top = activeObj.aCoords.tl.y + (canvas.height - activeObj.aCoords.tr.y);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 180 && activeObj.angle <= 270) {&nbsp; &nbsp; &nbsp; &nbsp; top = canvas.height;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if(activeObj.angle > 270) {&nbsp; &nbsp; &nbsp; &nbsp; top = activeObj.aCoords.tl.y + (canvas.height - activeObj.aCoords.bl.y);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; activeObj.set({&nbsp; &nbsp; &nbsp; &nbsp; top: top&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'centerH':&nbsp; &nbsp; &nbsp; activeObj.viewportCenterH();&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'centerV':&nbsp; &nbsp; &nbsp; activeObj.viewportCenterV();&nbsp; &nbsp; &nbsp; break;&nbsp; }}canvas {&nbsp; border: 2px solid black;}<script&nbsp; src="https://code.jquery.com/jquery-2.2.4.min.js"&nbsp; integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="&nbsp; crossorigin="anonymous"></script><script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script><button class="alignment" data-action="left">Align Left</button><button class="alignment" data-action="centerH">Align CenterH</button><button class="alignment" data-action="centerV">Align CenterV</button><button class="alignment" data-action="right">Align Right</button><button class="alignment" data-action="top">Align Top</button><button class="alignment" data-action="bottom">Align Bottom</button><canvas id="a" width="400" height="200"></canvas>

Answer 2

看看这种方法，animate如果任何角点超出画布的边界，我会使用一个很好的中止选项来停止，我刚刚在 chrome 上进行了测试并简化了删除中心对齐，您可以添加以后如果你需要。function move(obj, prop, value) {&nbsp; &nbsp; obj.saveState();&nbsp; &nbsp; obj.animate(prop, value, {&nbsp; &nbsp; &nbsp; &nbsp; duration: 1000,&nbsp; &nbsp; &nbsp; &nbsp; onChange: canvas.renderAll.bind(canvas),&nbsp; &nbsp; &nbsp; &nbsp; onComplete: canvas.renderAll.bind(canvas),&nbsp; &nbsp; &nbsp; &nbsp; easing: fabric.util.ease["easeOutQuad"],&nbsp; &nbsp; &nbsp; &nbsp; abort: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.setCoords();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (const prop in obj.aCoords) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point = obj.aCoords[prop]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (point.x <= 0 || point.x >= canvas.width ||&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point.y <= 0 || point.y >= canvas.height) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.left = obj._stateProperties.left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.top = obj._stateProperties.top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.saveState();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}function process_align(val, obj) {&nbsp; &nbsp; switch (val) {&nbsp; &nbsp; &nbsp; &nbsp; case 'left':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; move(obj, 'left', 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'right':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; move(obj, 'left', canvas.width - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'top':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; move(obj, 'top', 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'bottom':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; move(obj, 'top', canvas.height - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }}var canvas = new fabric.Canvas('a');canvas.stateful = true;canvas.add(new fabric.Rect({ left: 50, top: 50, height: 50, width: 50, fill: 'red' }));canvas.add(new fabric.Rect({ angle: 76, left: 240, top: 50, height: 50, width: 50, fill: 'green' }));canvas.add(new fabric.Rect({ left: 120, top: 100, height: 50, width: 50, fill: 'blue' }));canvas.renderAll();$('.alignment').click(function () {&nbsp; &nbsp; var cur_value = $(this).attr('data-action');&nbsp; &nbsp; var activeObj = canvas.getActiveObject() || canvas.getActiveGroup();&nbsp; &nbsp; if (cur_value != '' && activeObj) {&nbsp; &nbsp; &nbsp; &nbsp; process_align(cur_value, activeObj);&nbsp; &nbsp; &nbsp; &nbsp; activeObj.setCoords();&nbsp; &nbsp; &nbsp; &nbsp; canvas.renderAll();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert('Please select a item');&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }});canvas {&nbsp; border: 2px solid black;}<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script><script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script><button class="alignment" data-action="left">Align Left</button><button class="alignment" data-action="right">Align Right</button><button class="alignment" data-action="top">Align Top</button><button class="alignment" data-action="bottom">Align Bottom</button><canvas id="a" width="400" height="160"></canvas>您可以从中选择一些动画缓动：http://fabricjs.com/animation-easing