ReactJS KonvasJS 如何创建不能重叠的 2 层

Question

我正在尝试创建不能重叠的 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>

)

Answer 1

您可以将剪辑 https://konvajs.org/docs/clipping/Clipping_Regions.html#page-title 用于该用例：

import React, { Component } from "react";
import { render } from "react-dom";
import { Stage, Layer, Image, Group } from "react-konva";
import useImage from "use-image";

// the first very simple and recommended way:
const MyImage = () => {
  const [image] = useImage("https://i.imgur.com/ktWThtZ.png");
  return <Image image={image} draggable />;
};

class App extends Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Group
            clipX={0}
            clipY={0}
            clipWidth={window.innerWidth / 2}
            clipHeight={window.innerHeight}
          >
            <MyImage />
          </Group>
          <Group
            x={window.innerWidth / 2}
            clipX={0}
            clipY={0}
            clipWidth={window.innerWidth / 2}
            clipHeight={window.innerHeight}
          >
            <MyImage />
          </Group>
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/react-konva-clip-images-demo-onp3w?file=/src/index.js

ReactJS KonvasJS 如何创建不能重叠的 2 层

ReactJS KonvasJS How to create 2 layers that cannot overlaps

reactjs

konvajs

konvajs-reactjs

react-konva