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

【问题标题】：How can I tint an image with react-konva?如何使用 react-konva 为图像着色？
【发布时间】：2020-03-25 14:48:30
【问题描述】：

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

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

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

这是我上面提到的 TypeScript 类：

// 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;

【问题讨论】：

标签： konvajs react-konva konvajs-reactjs konva

【解决方案1】：

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

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

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

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

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

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

缓存节点以提高绘图性能，应用过滤器，或创建更准确打击地区。对于所有基本形状的缓存画布大小都会自动检测。

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

要将过滤器应用于Konva.Image，我们必须首先使用cache() 函数对其进行缓存。

【讨论】：