Question

我在使用react-konva在两个Rectangle节点之间重新创建混合模式时遇到麻烦。到目前为止，我已经尝试过更改节点的渲染顺序，添加额外的组并将复合操作应用于这些操作，并将复合操作设置为onMount。

这是一个使用Konva和Vanilla js的工作示例：

    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

在第二个演示中，您使用的是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

反应Konva混合模式

1 个答案: