我的项目使用React Konva(https://github.com/konvajs/react-konva)
我正在尝试将多个形状绘制为Group
,并使用它来掩盖图像“下方”。
当我的组件使用globalCompositeOperation
绘制单个形状时,它将产生预期的结果。这是代码:
render() {
return (
<Group >
<Group>
<Image
image={this.state.image}
ref={node => { this.image = node; }}
/>
<Group>
<Rect fill={"#555555"}
width={200} height={200}
x={100} y={100}
globalCompositeOperation={"destination-in"}
/>
</Group>
</Group>
</Group>
)
}
结果:
请注意如何将图像裁剪为矩形,以显示下面的文本层。
但是,一旦形状在组内移动,并在其中应用
globalCompositeOperation
,就不会发生遮罩。代码的相关部分:<Group>
<Image
image={this.state.image}
ref={node => { this.image = node; }}
/>
<Group globalCompositeOperation={"destination-in"}>
<Rect fill={"#555555"}
width={200} height={200}
x={100} y={100}
/>
</Group>
</Group>
结果:
这很奇怪,因为Konva文档指出
Group
实际上具有属性globalCompositeOperation
(请参见https://konvajs.github.io/api/Konva.Group.html#globalCompositeOperation__anchor)。任何想法如何使(反应)Konva在
globalCompositeOperation
级别而不是仅在Group
级别应用Shape
? 最佳答案
啊,刚找到解决方案。
似乎在应用Group
之前需要缓存整个globalCompositeOperation
。我假设这意味着该组首先被展平/栅格化。
在我的React组件中,我实现了以下解决方案:
import React from 'react';
import { Image, Group, Rect } from 'react-konva';
class CutoutImage extends React.Component {
state = {
image: null,
mask: null
}
componentDidMount() {
const image = new window.Image();
image.src = "/images/frisbee.jpg";
image.onload = () => {
this.setState({ image });
}
}
componentDidUpdate() {
if (this.image) {
this.image.cache();
}
if (this.mask) {
this.mask.cache();
}
}
render() {
return (
<Group>
<Image
image={this.state.image}
ref={node => { this.image = node; }}
/>
<Group
globalCompositeOperation={"destination-in"}
ref={node => {this.mask = node; }}
>
<Rect fill={"#555555"}
width={200} height={200}
x={100} y={100}
/>
<Rect fill={"#dddddd"}
width={200} height={200}
x={300} y={300}
/>
<Rect fill={"#dddddd"}
width={200} height={100}
x={150} y={350}
/>
</Group>
</Group>
)
}
}
export default CutoutImage;
结果:
关于javascript - 在React Konva中使用globalCompositeOperation mask 形状组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52169662/