如何在KonvaJS中检测红色方块拖动至蓝色方块上方？

可以实现红色方块拖动到蓝色方块上方的检测，核心是在拖动结束事件中判断两个元素的位置关系，以下是具体实现方案：

实现代码示例 #

rect1.on('dragend', (evt) => {
  const redRect = evt.target;
  const blueRect = rect2; // 确保rect2是蓝色方块的实例引用

  // 方法1：使用Konva内置的hitTest检测
  const isOverlapping = blueRect.hitTest(redRect.getAbsolutePosition());

  // 方法2：手动计算矩形边界重叠（更灵活）
  const redPos = redRect.getAbsolutePosition();
  const redWidth = redRect.width();
  const redHeight = redRect.height();
  const bluePos = blueRect.getAbsolutePosition();
  const blueWidth = blueRect.width();
  const blueHeight = blueRect.height();

  // 判断两个矩形是否存在边界重叠
  const hasXOverlap = !(redPos.x + redWidth < bluePos.x || redPos.x > bluePos.x + blueWidth);
  const hasYOverlap = !(redPos.y + redHeight < bluePos.y || redPos.y > bluePos.y + blueHeight);
  const isOverlappingManual = hasXOverlap && hasYOverlap;

  // 根据检测结果执行逻辑
  if (isOverlapping) {
    console.log('红色方块已拖动到蓝色方块上方');
  } else {
    console.log('红色方块未与蓝色方块重叠');
  }
});

方法说明 #

• hitTest方法：Konva提供的原生检测方法，传入拖动元素的绝对位置，快速判断该位置是否落在目标元素范围内，适合基础的重叠场景。
• 手动边界计算：通过获取元素的绝对位置和尺寸，对比矩形边界的坐标关系，可自定义重叠判定规则（比如要求完全覆盖、部分重叠等）。

场景示意图 #

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