我的项目使用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>
        )

    }


结果:
javascript - 在React Konva中使用globalCompositeOperation mask 形状组-LMLPHP

请注意如何将图像裁剪为矩形,以显示下面的文本层。

但是,一旦形状在组内移动,并在其中应用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>


结果:

javascript - 在React Konva中使用globalCompositeOperation mask 形状组-LMLPHP

这很奇怪,因为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 形状组-LMLPHP

关于javascript - 在React Konva中使用globalCompositeOperation mask 形状组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52169662/

10-09 06:13