1

我无法使用 react-konva 在两个 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'));

任何见解将不胜感激。谢谢！

4

1 回答 1

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

于 2018-11-07T13:21:10.933 回答