ReactJS KonvasJS How to create 2 layers that cannot overlaps

Question

i'm trying to create 2 layers (Images) that cannot overlap, So they can still dragged freely, but won't showed over each other.

I've tried using zIndex or a blank Rect, but can't figure out how to make 2 draggable layers that can't overlap (Very similar to overflow: hidden behavior)

a GIF is attached to show the problem, each layer shouldn't be visible behind the divider line.

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>

)

You need to put each image on its own layer, and set a custom clipping area on each layer. See https://konvajs.org/docs/clipping/Clipping_Regions.html for an example of how to create a clipping area. And see this question for an example in pure JS. https://stackoverflow.com/questions/45445666/konvajs-clipping-function-but-with-opacity/45546946#45546946 — Vanquished Wombat, Jun 25 '20 at 07:55

score 2 · Accepted Answer · answered Jun 25 '20 at 16:49

You can use clip https://konvajs.org/docs/clipping/Clipping_Regions.html#page-title for that use case:

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

Perfect answer! Thank you very much! – Itay Elkouby Jun 26 '20 at 09:00 — Itay Elkouby, Jun 26 '20 at 09:00

ReactJS KonvasJS How to create 2 layers that cannot overlaps

1 Answers1