Konva：旋转图形时保持边界约束问题

这个问题我之前也踩过坑！核心原因是：当元素旋转后，它的锚点（默认是左上角）和实际占据的画布区域的关系发生了变化——原来的边界判断是基于元素自身的宽高，但旋转后元素的有效边界已经不是锚点加上宽高这么简单了，比如旋转90度后，元素的最左边缘可能在锚点的左侧，这时候原来的x >= 0判断就会阻止元素拖到画布边缘。

不用单独检测旋转状态，我们可以通过计算元素变换后的实际包围盒来动态调整拖拽边界，不管旋转多少度、甚至缩放都能正确限制元素在画布内。

方法一：临时移动元素获取包围盒（直观易实现） #

这个方法的思路是：在拖拽过程中，先临时将元素移动到目标位置，获取此时的实际包围盒，判断是否超出画布，再调整目标位置确保包围盒在画布内，最后恢复元素原位置（用户完全看不到这个临时操作）。

dragBoundFunc: function(pos) {
  const stage = this.getStage();
  const stageWidth = stage.width();
  const stageHeight = stage.height();
  const rect = this;

  // 保存当前位置，临时设置为拖拽目标位置
  const originalX = rect.x();
  const originalY = rect.y();
  rect.x(pos.x);
  rect.y(pos.y);

  // 获取此时元素的实际包围盒（已考虑旋转、缩放等变换）
  const box = rect.getClientRect();

  // 恢复原位置，避免拖拽过程中闪烁
  rect.x(originalX);
  rect.y(originalY);

  // 计算位置调整量
  let adjustX = 0;
  let adjustY = 0;

  // 左边界：如果包围盒左边缘超出画布，向右调整
  if (box.x < 0) {
    adjustX = -box.x;
  }
  // 右边界：如果包围盒右边缘超出画布，向左调整
  else if (box.x + box.width > stageWidth) {
    adjustX = stageWidth - (box.x + box.width);
  }

  // 上边界：如果包围盒上边缘超出画布，向下调整
  if (box.y < 0) {
    adjustY = -box.y;
  }
  // 下边界：如果包围盒下边缘超出画布，向上调整
  else if (box.y + box.height > stageHeight) {
    adjustY = stageHeight - (box.y + box.height);
  }

  // 返回调整后的合法位置
  return {
    x: pos.x + adjustX,
    y: pos.y + adjustY
  };
}

方法二：通过变换矩阵计算包围盒（更高效） #

如果觉得临时修改元素位置可能有性能问题（其实对于单个元素几乎可以忽略），可以直接通过Konva的变换矩阵计算元素四个角的位置，推导实际包围盒，不需要临时移动元素：

dragBoundFunc: function(pos) {
  const stage = this.getStage();
  const stageWidth = stage.width();
  const stageHeight = stage.height();
  const rect = this;

  // 获取元素自身坐标系下的四个角点
  const localCorners = [
    { x: 0, y: 0 },          // 左上角
    { x: rect.width(), y: 0 }, // 右上角
    { x: rect.width(), y: rect.height() }, // 右下角
    { x: 0, y: rect.height() } // 左下角
  ];

  // 克隆当前变换矩阵，并模拟移动到拖拽目标位置
  const transform = rect.getAbsoluteTransform().clone();
  const dx = pos.x - rect.x();
  const dy = pos.y - rect.y();
  transform.translate(dx, dy);

  // 计算四个角点在画布坐标系下的位置
  const globalCorners = localCorners.map(corner => transform.point(corner));

  // 推导实际包围盒的边界
  let minX = Infinity, maxX = -Infinity;
  let minY = Infinity, maxY = -Infinity;
  globalCorners.forEach(corner => {
    minX = Math.min(minX, corner.x);
    maxX = Math.max(maxX, corner.x);
    minY = Math.min(minY, corner.y);
    maxY = Math.max(maxY, corner.y);
  });

  // 计算位置调整量
  let adjustX = 0;
  let adjustY = 0;

  if (minX < 0) {
    adjustX = -minX;
  } else if (maxX > stageWidth) {
    adjustX = stageWidth - maxX;
  }

  if (minY < 0) {
    adjustY = -minY;
  } else if (maxY > stageHeight) {
    adjustY = stageHeight - maxY;
  }

  return {
    x: pos.x + adjustX,
    y: pos.y + adjustY
  };
}

为什么这个方法有效？ #

不管元素旋转多少度，这两种方法都是基于元素实际占据的画布区域来判断边界，而不是依赖元素自身的宽高。这样一来，哪怕你把元素旋转45度、180度，甚至加上缩放，拖拽时都会自动贴合画布边缘，完全不需要单独判断旋转状态。

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