本文详解如何在 konva.js 中为旋转后的 group（如裁剪容器）实现精准、高性能的拖拽边界约束，通过坐标变换与点-多边形碰撞检测，确保子元素（如图片）始终被限制在旋转矩形的可视区域内。
本文详解如何在 konva.js 中为旋转后的 group（如裁剪容器）实现精准、高性能的拖拽边界约束，通过坐标变换与点-多边形碰撞检测，确保子元素（如图片）始终被限制在旋转矩形的可视区域内。
在使用 Konva 构建图像裁剪器、图形编辑器或教学工具（如七巧板、旋转插槽系统）时，一个常见痛点是：当容器 Group 设置了 rotation ≠ 0 后，直接基于轴对齐矩形（AABB）编写的 dragBoundFunc 会完全失效——因为边界已不再是水平/垂直的，而是一个倾斜的四边形。此时若仍用 minX/maxX/minY/maxY 简单截断坐标，会导致图片“穿出”可视区域或过早被卡住。
根本原因在于：dragBoundFunc 接收的是画布绝对坐标系下的 pos，但约束逻辑必须作用于「旋转后 Group 的实际裁剪范围」这一斜向多边形上。因此，正确解法不是修正 pos.x/y，而是判断「拖拽目标位置下，图片是否完全落在旋转 Group 的 clip 区域内」。
✅ 推荐方案：点-多边形包含检测（Point-in-Polygon）
该方法高效、精确、数学严谨，且完全规避了 Konva 内置像素级碰撞（如 getIntersection()）带来的性能开销。核心思路如下：
- 获取旋转 Group 的四个顶点绝对坐标（即其 clip 区域的多边形轮廓）；
- 计算图片在目标位置 pos 下的四个角点坐标（考虑图片自身宽高及 Group 的嵌套变换）；
- 对每个图片角点执行射线法（Ray Casting）检测：若所有四点均在 Group 多边形内 → 允许拖拽；否则拒绝。
以下是可直接集成的生产级实现：
// ✅ 获取旋转 Group 的世界坐标四边形（按顺时针顺序）
function getRotatedRectCorners(group) {
const { x, y } = group.getAbsolutePosition();
const w = group.width();
const h = group.height();
const rad = Konva.getAngle(group.rotation());
const cos = Math.cos(rad);
const sin = Math.sin(rad);
// 局部坐标系下四角（以 Group 左上为原点）
const corners = [
{ x: 0, y: 0 }, // top-left
{ x: w, y: 0 }, // top-right
{ x: w, y: h }, // bottom-right
{ x: 0, y: h } // bottom-left
];
// 转换为世界坐标
return corners.map(p => ({
x: x + p.x * cos - p.y * sin,
y: y + p.x * sin + p.y * cos
}));
}
// ✅ 射线法：判断点是否在凸多边形内（适用于矩形）
function isPointInConvexPolygon(point, polygon) {
const n = polygon.length;
let inside = true;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
const xi = polygon[i].x;
const yi = polygon[i].y;
const xj = polygon[j].x;
const yj = polygon[j].y;
// 计算叉积：(p - pi) × (pj - pi)
const cross = (point.x - xi) * (yj - yi) - (point.y - yi) * (xj - xi);
if (cross < 0) {
inside = false;
break;
}
}
return inside;
}
// ✅ 拖拽边界函数：确保图片完全在旋转 Group 内
image.dragBoundFunc(function(pos) {
const groupCorners = getRotatedRectCorners(blockPhoto); // Group 的四边形
const imgW = image.width();
const imgH = image.height();
// 图片在 pos 位置下的四个角点（世界坐标）
const imgCorners = [
{ x: pos.x, y: pos.y },
{ x: pos.x + imgW, y: pos.y },
{ x: pos.x + imgW, y: pos.y + imgH },
{ x: pos.x, y: pos.y + imgH }
];
// 检查所有角点是否都在 Group 多边形内
const allInside = imgCorners.every(p =>
isPointInConvexPolygon(p, groupCorners)
);
return allInside ? pos : this.getAbsolutePosition(); // 拒绝越界，退回原位
});⚠️ 关键注意事项
- 不要依赖 getClientRect() 或 getStage().getPointerPosition()：它们返回的是渲染后边界（含 transform），不适用于精确几何约束；
- Group 的 clip 属性仅影响绘制，不影响坐标逻辑：dragBoundFunc 必须主动计算几何关系；
- 性能极佳：上述算法时间复杂度为 O(1)，每帧仅 4 次叉积运算，远快于 Konva 的离屏 canvas 碰撞检测；
- 兼容任意角度：无需像固定 90° 方案那样写 switch 分支，真正支持 rotation: 37.5 等自由值；
- 注意坐标系一致性：所有计算必须统一在 Stage 的绝对坐标系下，避免混用局部/相对坐标。
✅ 进阶优化建议
- 若需支持「部分可见即允许」（如拖拽时允许图片边缘略超边界），可改为检测 Group 四角是否全部在图片内，或使用分离轴定理（SAT）进行 AABB-OBB 碰撞；
- 对于高频拖拽场景，可缓存 groupCorners 并监听 blockPhoto.on('transform', ...) 实时更新，避免重复计算；
- 结合 Konva.Util.rotatePoint() 可进一步简化顶点变换逻辑，但手动实现更利于理解与调试。
通过本方案，你将彻底解决 Konva 中旋转容器下的拖拽越界问题——无论用户将 Group 旋转至何角度，图片始终被严丝合缝地约束在可视裁剪区内，为专业级图像编辑器、教育交互工具提供坚实可靠的底层支撑。
