0

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

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

我如何使用 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;
4

1 回答 1

3

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

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

国家的文件Konva.Image.cache()（强调我的）：

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

反转图像状态的文档（强调我的）：

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

于 2020-03-27T15:10:25.923 回答