Реагируйте на режимы смешивания Konva

Question

У меня возникают проблемы при воссоздании смешанного режима между двумя узлами Rectangle с использованием реактивной конвой. До сих пор я пытался изменить порядок визуализации узлов, добавив дополнительные группы и применив к ним составную операцию и установив составную операцию onMount.

Вот рабочий пример использования Konva и vanilla js:

https://codepen.io/jagomez8/pen/xQwdvq

    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Konva.Layer();

    var rect1 = new Konva.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        fill: 'red',
    });

    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        fill: 'green',
        globalCompositeOperation: 'destination-in'
    });

    layer.add(rect2);
    stage.add(layer);

Вот версия реакции, с которой я борюсь, чтобы добиться того же эффекта:

https://codepen.io/jagomez8/pen/qQOjWj

  const {Layer, Rect, Stage, Group, Circle} = ReactKonva;

  class TestGroup extends React.Component {

    render() {
      return (
        <Group >
            <Rect width={100} height={100}  x={0} y={0} fill="red" />
            <Rect 
              fill="green"
              x={50} y={50}
              width={100} height={100}
              globalCompositeOperation='destination-in'
            />
         </Group>
      );
    }
  }


  function App() {
      return (
        <Stage width={700} height={700}>
          <Layer>
              <TestGroup/>
          </Layer>
        </Stage>
      );
  }


  ReactDOM.render(<App/>, document.getElementById('app'));

Любое понимание будет с благодарностью. Спасибо!

Answer 1

Во втором демо вы используете очень старую версию реакции и конвы. Вам просто нужно обновить их, и демо будет работать нормально:

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect } from "react-konva";

class App extends Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Rect width={100} height={100} x={0} y={0} fill="red" />
          <Rect
            fill="green"
            x={50}
            y={50}
            width={100}
            height={100}
            globalCompositeOperation="destination-in"
          />
        </Layer>
      </Stage>
    );
  }
}

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

https://codesandbox.io/s/9y5n94wkxw