React Konva中如何点击选中被上层遮挡的重叠内层形状？

Konva 默认的事件命中逻辑是按照图层绘制顺序从上到下匹配，上层元素会拦截命中区域内的所有鼠标、触摸事件，这是导致内层被遮挡形状无法触发交互的核心原因。不需要调整形状的默认层级，直接使用 Konva 内置的命中检测API配合事件监听，就能完全实现Figma式的双击穿透选层效果。

核心实现逻辑 #

• 给舞台Stage绑定全局双击事件，避免被上层形状拦截事件触发
• 双击触发时，通过stage.getPointerPosition()获取鼠标当前在舞台内的相对坐标
• 调用stage.getAllIntersections(point)方法，传入坐标点即可拿到该位置下所有层级命中的形状集合，集合顺序从最上层到最下层排列
• 维护一个穿透层级的索引标记，每次双击就将索引后移一位（超出集合长度则循环回到最上层），对应索引的形状就是本次要选中的目标
• 选中目标形状后，仅给当前选中项开启拖拽、描边高亮等选中态交互即可；如果需要拖拽时不被上层遮挡，可以临时将选中形状移到图层最顶层，取消选中时再放回原z序位置，和Figma的交互逻辑完全一致。

可直接复用的核心代码 #

import { Stage, Layer, Rect, Ellipse, Polygon } from 'react-konva';
import { useRef, useState } from 'react';

export default function EditableCanvas() {
  const stageRef = useRef(null);
  const [selectedId, setSelectedId] = useState(null);
  // 记录当前穿透选中的层级索引
  const hitIndexRef = useRef(0);

  const handleStageDblClick = () => {
    const stage = stageRef.current;
    const point = stage.getPointerPosition();
    // 过滤掉选择框、辅助线等非业务图形，只保留三类目标形状
    const hitShapes = stage.getAllIntersections(point).filter(shape => 
      ['Rect', 'Ellipse', 'Polygon'].includes(shape.getClassName())
    );

    if (!hitShapes.length) {
      setSelectedId(null);
      hitIndexRef.current = 0;
      return;
    }

    // 循环切换选中层
    hitIndexRef.current = (hitIndexRef.current + 1) % hitShapes.length;
    const target = hitShapes[hitIndexRef.current];
    setSelectedId(target.id());
  };

  // 点击空白区域重置选中状态
  const handleStageClick = (e) => {
    if (e.target === stageRef.current) {
      setSelectedId(null);
      hitIndexRef.current = 0;
    }
  };

  return (
    <Stage
      ref={stageRef}
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={handleStageClick}
      onDblClick={handleStageDblClick}
    >
      <Layer>
        {/* 示例图形，实际业务可遍历数据生成 */}
        <Rect
          id="outer-rect"
          x={120}
          y={120}
          width={450}
          height={400}
          fill="rgba(255, 68, 0, 0.3)"
          draggable={selectedId === 'outer-rect'}
          strokeWidth={2}
          stroke={selectedId === 'outer-rect' ? '#1677ff' : 'transparent'}
        />
        <Ellipse
          id="middle-ellipse"
          x={300}
          y={300}
          radiusX={120}
          radiusY={90}
          fill="rgba(82, 196, 26, 0.3)"
          draggable={selectedId === 'middle-ellipse'}
          strokeWidth={2}
          stroke={selectedId === 'middle-ellipse' ? '#1677ff' : 'transparent'}
        />
        <Polygon
          id="inner-polygon"
          x={300}
          y={300}
          points={[0, 0, 60, 0, 30, 60]}
          fill="rgba(114, 46, 209, 0.3)"
          draggable={selectedId === 'inner-polygon'}
          strokeWidth={2}
          stroke={selectedId === 'inner-polygon' ? '#1677ff' : 'transparent'}
        />
      </Layer>
    </Stage>
  );
}

避坑提示 #

• 不要通过给上层形状设置listening={false}的方式实现事件穿透，这种方式会让上层形状完全失去事件响应能力，后续无法再被选中
• getAllIntersections()会自动识别形状的透明区域，即使是不规则多边形，也只会返回填充/描边区域实际命中的形状，不会出现透明区域误命中的问题
• 如果需要实现Figma中按住Ctrl/Command单击穿透选层的效果，只需要把双击触发逻辑改成对应按键按下时的单击触发即可，核心逻辑完全通用
• 选中内层形状后如果要避免拖拽时被上层遮挡，可以在选中时调用targetShape.moveToTop()，取消选中时按照存储的原z-index放回即可，交互体验和Figma无差异

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung