React Konva中L形区域拖拽对象dragBoundFunc左右移动失效求助

问题场景 #

需要实现蓝色矩形在两个组成L形的红色矩形内部移动，当前代码仅支持蓝色矩形在垂直方向上下移动，无法在水平方向正常左右拖拽。

原代码问题分析 #

原dragBoundFunc的边界计算逻辑错误：

• X轴限制取了两个红色矩形的交集范围，导致蓝色矩形即使在上方宽幅红色区域内，也只能在下方窄幅红色区域的宽度范围内移动
• Y轴限制没有区分两个区域的边界，逻辑不符合L形区域的实际可移动范围

修复方案 #

修改handleDragBound函数，根据蓝色矩形的拖拽位置判断所处区域，分别应用对应边界限制：

import React from 'react';
import { Layer, Stage, Rect } from "react-konva";

export default function App() {
  const firstref = React.useRef();
  const secondref = React.useRef();
  const dragableref = React.useRef();
  const gap = 20;

  const handleDragBound = (pos) => {
    const firstRect = firstref.current.getClientRect();
    const secondRect = secondref.current.getClientRect();
    const draggable = dragableref.current;
    const draggableWidth = draggable.width();
    const draggableHeight = draggable.height();

    // 定义上方横条红色区域的可移动范围
    const upperXMin = gap;
    const upperXMax = firstRect.width - draggableWidth - gap;
    const upperYMin = gap;
    const upperYMax = firstRect.height - draggableHeight - gap;

    // 定义下方竖条红色区域的可移动范围
    const lowerXMin = gap;
    const lowerXMax = secondRect.width - draggableWidth - gap;
    const lowerYMin = firstRect.height + gap;
    const lowerYMax = secondRect.y + secondRect.height - draggableHeight - gap;

    let newX = pos.x;
    let newY = pos.y;

    // 根据Y轴位置判断所处区域，应用对应边界
    if (newY + draggableHeight / 2 <= firstRect.height) {
      // 处于上方横条区域
      newX = Math.max(upperXMin, Math.min(upperXMax, newX));
      newY = Math.max(upperYMin, Math.min(upperYMax, newY));
    } else {
      // 处于下方竖条区域
      newX = Math.max(lowerXMin, Math.min(lowerXMax, newX));
      newY = Math.max(lowerYMin, Math.min(lowerYMax, newY));
    }

    // 交界处平滑过渡：当矩形靠近上下区域边界时，允许X轴临时兼容两个区域的范围
    const isNearBoundary = Math.abs(newY + draggableHeight - firstRect.height) <= gap * 2;
    if (isNearBoundary) {
      newX = Math.max(gap, Math.min(Math.max(upperXMax, lowerXMax), newX));
    }

    return { x: newX, y: newY };
  };

  return (
    <Stage width={800} height={800}>
      <Layer>
        <Rect fill="red" x={0} y={0} width={500} height={200} ref={firstref} />
        <Rect fill="red" x={0} y={200} width={200} height={300} ref={secondref} />
        <Rect
          fill="blue"
          x={225}
          y={75}
          width={50}
          height={100}
          draggable
          ref={dragableref}
          dragBoundFunc={handleDragBound}
        />
      </Layer>
    </Stage>
  );
}

关键修复说明 #

1. 拆分L形的两个独立区域，分别定义各自的可移动边界
2. 通过蓝色矩形的Y轴中心位置判断所处区域，精准应用对应边界限制
3. 添加交界处过渡逻辑，避免矩形在上下区域边界处被突然卡住，提升拖拽流畅度
4. 补充了原代码缺失的React导入，确保代码可正常运行

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