我无法使用 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'));
任何见解将不胜感激。谢谢!