如何使用 Konva.js 将图像复制/粘贴到另一个图像？

Posted 2023-03-25

【中文标题】如何使用 Konva.js 将图像复制/粘贴到另一个图像？

【英文标题】：How to copy/paste an image to another image with Konva.js?

【发布时间】：2020-01-16 11:30:13

【问题描述】：

我正在构建一个类似于俄罗斯方块的游戏，但具有平滑移动的块（逐个像素）。 目前我为每个新块创建一个单独的 Konva Image 对象：

let block = new Konva.Image(
            x: 200,
            y: 0,
            transformsEnabled: 'position',
            listening: false,
            image: images.tiles,
            crop: 
              x: colorindex * 128,
              y: shapeindex * 128,
              width: 128,
              height: 128
            ,
            width: 128,
            height: 128,
            colorindex: colorindex,
            shapeindex: shapeindex,
            falling: true,
            fallingspeed: 1, 
          );

that.blocks.push(block);
that.blocklayer.add(block);

由于屏幕上有很多块，我注意到动画稍微变慢了。

现在我想尝试将所有固定块放入 1 个大 Image 对象中，看看这是否更快。

是否可以使用 Konva 将图像的一部分复制到另一个图像？

【问题讨论】：

我可以检查一下 - 您打算将“着陆”形状放入固定图像中，然后您只需要关心移动当前的“下降”形状吗？

没错。由于着陆块不再需要移动，它们可以在 1 个大图像上，所以我需要某种位图复制来做到这一点。

【参考方案1】：

最简单的解决方案是将几个块移动到一个组中，然后将其缓存：

group.cache();

演示：https://konvajs.org/docs/performance/Shape_Caching.html

【讨论】：

谢谢，我进去看看。我不是很懂Konva的缓存功能。

@lavrton 层解决方案在这里也可行 - 因此将画布分成两层，一层用于着陆块，一层用于移动块。移动的方块每走一步就刷新它的层，然后当它在游戏中落地时，将它转移到落地层并刷新一次。着陆层必须进行重大刷新/重绘，但仅在形状着陆时执行一次，这意味着移动块刷新仅适用于单个形状。