我正在尝试创建 2 个不能重叠的图层(图像),因此它们仍然可以自由拖动,但不会相互显示。
我尝试过使用 zIndex 或空白 Rect,但无法弄清楚如何制作 2 个不能重叠的可拖动图层(非常类似于溢出:隐藏行为)
附上一个 GIF 来显示问题,每一层都不应该在分隔线后面可见。
return (
<Stage width={size.width} height={size.height}>
{stateImages.map((imageConfig) => {
index++
return <Layer><Image
x={size.width/2 * index}
y={0}
image={imageConfig.image}
draggable
/>
</Layer>
})}
{stateImages.length > 1 &&
<Layer>
<Rect
x={size.width / 2}
y={0}
width={4}
height={size.height}
fill="white"
shadowBlur={10}
zIndex={2}
/>
</Layer>
}
</Stage>
)