FabricJS问题：旋转对象无法在裁剪矩形内垂直居中

我来帮你解决这个旋转对象在裁剪矩形内垂直居中的问题！

问题根源 #

你当前的自定义居中逻辑只考虑了未旋转对象的包围盒高度，但当对象旋转超过90度时：

1. FabricJS的getBoundingRectHeight()返回的是旋转后包围盒的高度，而这个值实际上是原对象的宽度（旋转90度后宽高会互换）；
2. 对象的top属性对应的是旋转后包围盒的左上角，而非对象的原始基准点，这会导致你的垂直偏移计算完全失效，最终对象移出裁剪区域。

修复方案：基于中心点对齐 #

最可靠的方式是让对象的中心点与裁剪矩形的中心点在垂直方向对齐，这种方法不受旋转角度的影响。修改你的center按钮点击事件代码如下：

document.getElementById('center').onclick = function() {
  var activeObject = canvas.getActiveObject();
  // 计算裁剪矩形的垂直中心点（基于画布坐标系）
  var clipCenterY = clippingRect.top + clippingRect.height / 2;
  
  // 直接设置对象的中心点Y坐标，保持水平位置不变
  activeObject.setCenterPoint({
    x: activeObject.getCenterPoint().x,
    y: clipCenterY
  });
  
  activeObject.setCoords();
  canvas.renderAll();
};

简化版（直接调整top值） #

如果你不想用setCenterPoint，也可以通过计算偏移量来调整：

document.getElementById('center').onclick = function() {
  var activeObject = canvas.getActiveObject();
  var clipCenterY = clippingRect.top + clippingRect.height / 2;
  var objCurrentCenterY = activeObject.getCenterPoint().y;
  
  // 计算需要移动的垂直距离，让对象中心点与裁剪矩形中心点对齐
  activeObject.top += (clipCenterY - objCurrentCenterY);
  
  activeObject.setCoords();
  canvas.renderAll();
};

额外优化建议 #

你代码里重复执行了canvas.add(pol);两次，建议去掉其中一次，避免对象被重复添加到画布上。

测试验证 #

点击rotate按钮将对象旋转200度，再点击center按钮，对象会准确地在裁剪矩形内垂直居中，不会再出现移出的问题。

内容的提问来源于stack exchange，提问作者dtx