如何使用 react-konva 为图像着色？

Question

我创建了一个 class 以使用事件侦听器将图像加载到我的 canvas 中，基于 Konva 网站上的 URLImage example。

我有一个完全由透明背景上的白色像素组成的 PNG。我想将白色像素着色为纯色（例如，红色、紫色或青色）。我查看了 filters example，但我无法理解这些特定部分如何组合在一起。

我如何使用 react-konva.Image（例如使用 <Image filters={[...]} image={...} ref={node => {this.imageNode = node;} />）来做到这一点？

这是我上面提到的 TypeScript class：

// import Konva from 'konva';
import React from 'react';
import {Image} from 'react-konva';

type ImgProps = {
    color?: string,
    src: string,
    x?: number,
    y?: number,
};

type ImgState = {
    image: any,
};

class Img extends React.Component<ImgProps, ImgState> {
    private image: HTMLImageElement | undefined;
    // private imageNode: Konva.Image | null = null;

    constructor(props: any) {
        super(props);

        this.state = {
            image: undefined,
        };
    }

    public componentDidMount = () => {
        this.loadImage();
    }

    public componentDidUpdate = (oldProps: ImgProps) => {
        if (oldProps.src !== this.props.src) {
            this.loadImage();
        }
    }

    public componentWillUnmount = () => {
        if (this.image) {
            this.image.removeEventListener('load', this.handleLoad);
        }
    }

    public render = (): React.ReactNode => {
        return (
            <Image
                image={this.state.image}
                // ref={node => {this.imageNode = node;}}
                x={this.props.x}
                y={this.props.y}
            />
        );
    }

    private loadImage = () => {
        // Save to `this` to remove `load` handler on unmount.
        this.image = new window.Image();
        this.image.src = this.props.src;
        this.image.addEventListener('load', this.handleLoad);
    }

    private handleLoad = () => {
        // After setState react-konva will update canvas and redraw the layer
        // because the `image` property has changed.
        this.setState({
            image: this.image,
        });

        // if (this.imageNode) {
        //     ...
        // }
    };
}

export default Img;

Answer 1

我明白了。使用可以通过 ref 设置的 Konva.Image 对象，如问题中所示，您必须执行以下操作：

this.imageNode.cache();
this.imageNode.red(255);
this.imageNode.green(0);
this.imageNode.blue(0);

在上面的 class 示例中，这可能在 handleLoad 函数中，或者可以访问该对象的任何地方。

然后使用 filters 属性进行渲染，如下例所示，其中 Image 是一个 Konva.Image 对象：

<Image
    image={this.state.image}
    filters={[Konva.Filters.RGB]}
    ref={node => {this.imageNode = node;}}
/>

documentation for Konva.Image.cache() 状态（强调我的）：

cache node to improve drawing performance, apply filters, or create more accurate hit regions. For all basic shapes size of cache canvas will be automatically detected.

documentation for inverting an image 状态（强调我的）：

To apply filter to an Konva.Image, we have to cache it first with cache() function.

如何使用 react-konva 为图像着色？

How can I tint an image with react-konva?

konvajs

react-konva

konvajs-reactjs

konva