ReactJS KonvasJS Как создать 2 слоя, которые не могут перекрываться

Я пытаюсь создать 2 слоя (изображения), которые не могут перекрываться, поэтому их можно свободно перетаскивать, но они не будут отображаться друг над другом.

Я пытался использовать zIndex или пустой Rect, но не могу понять, как сделать 2 перетаскиваемых слоя, которые не могут перекрываться (очень похоже на переполнение: скрытое поведение)

GIF прикреплен, чтобы показать проблему, каждый слой не должен быть виден за разделительной линией.

2 перекрывающихся изображения

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>

)


reactjs konvajs react-konva konvajs-reactjs
person Itay Elkouby    schedule 24.06.2020    source источник
comment
Вам нужно поместить каждое изображение на отдельный слой и установить пользовательскую область отсечения на каждом слое. См. konvajs.org/docs/clipping/Clipping_Regions.html для примера того, как создать область отсечения. И посмотрите этот вопрос для примера на чистом JS. stackoverflow.com/questions/ 45445666/   -  person Vanquished Wombat    schedule 25.06.2020
comment
@VanquishedWombat Верно, спасибо за наводку!   -  person Itay Elkouby    schedule 26.06.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать клип 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

person lavrton    schedule 25.06.2020
comment
Идеальный ответ! Большое спасибо! - person Itay Elkouby; 26.06.2020