Javascript 如何制作响应矩形的箭头

有两个可移动的矩形，它们之间有一个连接它们的箭头。如果箭头的路径中有第三个矩形，它将绕过它而不与之相交，这是必要的

import { Stage, Layer, Rect, Group, Arrow } from 'react-konva';

function ColoredRect(props) {
    let position = props.position;
    let index = props.index;
    let handleDrag = (propsValue) => {
        props.setPosition(
            position.map((item, Zindex) => {
                if(index === Zindex) {
                return ([propsValue.currentTarget.attrs.y, 
                propsValue.currentTarget.attrs.x]);
                }else{
                   return item;
                }
            })
        );
    }

    return (<Rect
        x={position[index][1]}
        y={position[index][0]}
        width={100}
        height={100}
        fill = 'green'
        shadowBlur={5}
        draggable
        onDragMove={handleDrag}
        name='fillShape'
    />
    );

}
function ArrowComponent(props) {
    let positionStart = props.positionStart, positionEnd = props.positionEnd;
    return (
        <Arrow
            points={[positionStart[1] + 50, positionStart[0] + 50, positionEnd[1] + 50, positionEnd[0] + 50]}
            pointerLength={10}
            pointerWidth={10}
            fill='black'
            stroke='black'
            strokeWidth={4}
        />
    )
}
function Shape(props) {
    const groupEl = useRef(null);
    const layerEl = useRef(null);
    const arrowGroupEl = useRef(null);
    const stageEl = useRef(null);
    const [positionShape, setPositionShape] = useState([[100, 100], [300, 300], [100, 500]]);
    let handDragMoveLayer = (e) => {
        let target = e.target;
        let targetRect = target.getClientRect();
        groupEl.current.children.forEach(function (group) {
            if (group === target) {
                return;
            }
            if (haveIntersection(group.getClientRect(), arrowGroupEl.current.children[0].getClientRect()) /*targetRect)*/) {
                group.fill('red');
            } else {
                group.fill('green');
            }
        });
    }
    let haveIntersection = (r1, r2) => {
        return !(
            r2.x > r1.x + r1.width ||
            r2.x + r2.width < r1.x ||
            r2.y > r1.y + r1.height ||
            r2.y + r2.height < r1.y
        );
    }
    return (
        <Stage width={window.innerWidth} height={window.innerHeight} ref = {stageEl}>
            <Layer
                ref={layerEl}
                onDragMove={handDragMoveLayer}
            >
                <Group ref={groupEl} >
                    {positionShape.map((item, index) => {
                        return <ColoredRect key={index} position={positionShape} index={index} setPosition={setPositionShape} />
                    })}
                </Group>
                <Group ref = {arrowGroupEl}>
                    <ArrowComponent positionStart={positionShape[0]} positionEnd={positionShape[1]} />
                </Group>
            </Layer>
        </Stage>
    );
}

render(<Shape />, document.getElementById('root'));

我使用konva react实现了两个移动矩形与一个箭头的连接，您需要使箭头在穿过矩形时绕过矩形

import { Stage, Layer, Rect, Group, Arrow } from 'react-konva';

function ColoredRect(props) {
    let position = props.position;
    let index = props.index;
    let handleDrag = (propsValue) => {
        props.setPosition(
            position.map((item, Zindex) => {
                if(index === Zindex) {
                return ([propsValue.currentTarget.attrs.y, 
                propsValue.currentTarget.attrs.x]);
                }else{
                   return item;
                }
            })
        );
    }

    return (<Rect
        x={position[index][1]}
        y={position[index][0]}
        width={100}
        height={100}
        fill = 'green'
        shadowBlur={5}
        draggable
        onDragMove={handleDrag}
        name='fillShape'
    />
    );

}
function ArrowComponent(props) {
    let positionStart = props.positionStart, positionEnd = props.positionEnd;
    return (
        <Arrow
            points={[positionStart[1] + 50, positionStart[0] + 50, positionEnd[1] + 50, positionEnd[0] + 50]}
            pointerLength={10}
            pointerWidth={10}
            fill='black'
            stroke='black'
            strokeWidth={4}
        />
    )
}
function Shape(props) {
    const groupEl = useRef(null);
    const layerEl = useRef(null);
    const arrowGroupEl = useRef(null);
    const stageEl = useRef(null);
    const [positionShape, setPositionShape] = useState([[100, 100], [300, 300], [100, 500]]);
    let handDragMoveLayer = (e) => {
        let target = e.target;
        let targetRect = target.getClientRect();
        groupEl.current.children.forEach(function (group) {
            if (group === target) {
                return;
            }
            if (haveIntersection(group.getClientRect(), arrowGroupEl.current.children[0].getClientRect()) /*targetRect)*/) {
                group.fill('red');
            } else {
                group.fill('green');
            }
        });
    }
    let haveIntersection = (r1, r2) => {
        return !(
            r2.x > r1.x + r1.width ||
            r2.x + r2.width < r1.x ||
            r2.y > r1.y + r1.height ||
            r2.y + r2.height < r1.y
        );
    }
    return (
        <Stage width={window.innerWidth} height={window.innerHeight} ref = {stageEl}>
            <Layer
                ref={layerEl}
                onDragMove={handDragMoveLayer}
            >
                <Group ref={groupEl} >
                    {positionShape.map((item, index) => {
                        return <ColoredRect key={index} position={positionShape} index={index} setPosition={setPositionShape} />
                    })}
                </Group>
                <Group ref = {arrowGroupEl}>
                    <ArrowComponent positionStart={positionShape[0]} positionEnd={positionShape[1]} />
                </Group>
            </Layer>
        </Stage>
    );
}

render(<Shape />, document.getElementById('root'));

从'react konva'导入{Stage，Layer，Rect，Group，Arrow}；
功能彩色显示（道具）{
让位置=道具位置；
让索引=props.index；
让handleDrag=（propsValue）=>{
道具固定位置(
位置图（（项目，Zindex）=>{
如果（索引===Zindex）{
返回（[propsValue.currentTarget.attrs.y，
propsValue.currentTarget.attrs.x]）；
}否则{
退货项目；
}
})
);
}
返回(
);
}
功能组件（道具）{
让positionStart=props.positionStart，positionEnd=props.positionEnd；
返回(
)
}
功能形状（道具）{
const groupEl=useRef（null）；
const layerEl=useRef（null）；
const arrowGroupEl=useRef（null）；
const stageEl=useRef（null）；
const[positionShape，setPositionShape]=useState（[100100]，[300300]，[100500]）；
让handDragMoveLayer=（e）=>{
设target=e.target；
设targetRect=target.getClientRect（）；
groupEl.current.children.forEach（函数（组）{
如果（组===目标）{
返回；
}
if（haveIntersection（group.getClientRect（），arrowGroupEl.current.children[0].getClientRect（））/*targetRect）*/）{
组。填充（“红色”）；
}否则{
组填充（“绿色”）；
}
});
}
设交点=（r1，r2）=>{
回来(
r2.x>r1.x+r1.x宽度||
r2.x+r2.x宽度r1.y+r1.y高度||
r2.y+r2.H{
返回
})}
);
}
render（，document.getElementById（'root'））；

你所说的“旁路”是什么意思？绕着矩形走？弯曲与否？在顶部？找到箭头接触矩形并离开矩形的时刻，在相反的方向，你说的是“布线”吗？所以两个矩形之间的箭头线不能穿过它们之间的矩形？