在React Konva中使用globalCompositeOperation来屏蔽形状组

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在React Konva中使用globalCompositeOperation来屏蔽形状组相关的知识,希望对你有一定的参考价值。

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

    }

结果:enter image description here

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

但是,只要形状在组内移动,并且我在那里应用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>

结果如下:

enter image description here

这很奇怪,因为Konva文档表明Group确实有一个属性globalCompositeOperation(见https://konvajs.github.io/api/Konva.Group.html#globalCompositeOperation__anchor)。

任何想法如何让(React)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;

结果如下:

enter image description here

以上是关于在React Konva中使用globalCompositeOperation来屏蔽形状组的主要内容,如果未能解决你的问题,请参考以下文章

Jest 使用 react + konva 和/或 react-konva 遇到了意外的令牌

在React Konva中使用globalCompositeOperation来屏蔽形状组

为啥我无法在我的 React 应用程序中访问 Konva Canvas 属性?

React-konva 带箭头的双连接对象

react-konva Text - onClick 在移动设备上不起作用

使用 Typescript 和 React.Konva 指定 onClick 事件类型