从 HTML5 画布 (Konva) 中剪切图像答案

【问题标题】：Clipping images from a HTML5 canvas (Konva)从 HTML5 画布 (Konva) 中剪切图像
【发布时间】：2019-05-11 23:13:36
【问题描述】：

我想在 Konva 中创建拖放游戏。与他们在这里的https://konvajs.github.io/docs/sandbox/Animals_on_the_Beach_Game.html 非常相似。

但是，我希望有一个用于创建游戏的界面，作者在其中绘制背景图像。然后它会根据这些路径自动生成游戏。

我有这段代码用于剪切我的背景图像。

        return _.map(this.props.areas, (area) => {
        return (
            <Group
                draggable={true}
                clipFunc={(ctx) => {
                    canvasDrawFuncMap[area.shape](ctx, area.coords);
                }}
            >
                <Image image={image} />
            </Group>
        );
    });

这里有任何性能问题。考虑到它每次都会重绘整个图像。然后剪辑它。有没有更好的方法来实现这种剪辑。

现在我正在手动创建我的 clipFunctions 并在地图中定义它们。无论如何我可以使用 Konva 根据 Konva 形状生成这些函数

【问题讨论】：

标签： canvas konvajs

【解决方案1】：

如果您担心性能，请查看性能提示：https://konvajs.github.io/docs/performance/All_Performance_Tips.html

缓存在这里可能有很大帮助。

目前没有将 Konva 节点用作剪辑对象的记录方法。

【讨论】：