如何通过旋转对齐织物对象？

Question

我的织物应用程序，我想将所选对象对齐，例如，向左。因为对象可能被旋转（和缩放），因此对齐对象实际上意味着将对象的边界框对齐到某个边缘。

对于非旋转对象，实现起来非常简单。请参阅以下示例代码：

// find the minimum 'left' value
// function 'min' is used to find the minimum value of a 
// given array of objects by comparing the property value 
// which is returned by a given callback function
const { minValue } = min(objects, object => {
  const left = object.get('left');
  const originX = object.get('originX');
  if (originX === 'center') {
    return left - (object.get('width') * object.get('scaleX')) / 2;
  }
  return left;
});
objects.forEach(object => {
  if (object.get('originX') === 'center') {
    object.set('left', minValue + (
      object.get('width') * object.get('scaleX')
    ) / 2);
  } else {
    object.set('left', minValue);
  }
});
canvas.renderAll(); 

但是，旋转对象非常复杂。我必须将旋转的对象水平或垂直平移到某个计算的偏移/距离。

有人可以给出一些建议吗？谢谢。

Answer 1

经过一个小小的研究，我在官方的fabricjs网站上找到了这个demo。

基本上你可以这样做：

var bound = obj.getBoundingRect();

然后使用bound.top，bound.left，bound.width，bound.height作为边界矩形坐标。