React Konva混合模式

Question

我在使用react-konva重新创建两个矩形节点之间的混合模式时遇到了问题。到目前为止，我已经尝试更改了节点的呈现顺序，添加了额外的组，对这些组应用了复合操作，并设置了复合操作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);

下面是我正在努力实现相同效果的react版本：

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

在您的第二个演示中，您使用的是react和konva的一个非常旧的版本。你只需要更新它们，演示就可以正常工作了：

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