为多个图像优化Konva.js

Question

我目前正在使用Konva.js在多个堆叠的FastLayers上平铺许多PNG图像。这些PNG包含透明度，它们不需要拖动或点击区域。对于大小约为30x30的中等网格，瓷砖经常被替换，看起来效果不错。但是一旦瓷砖开始增长到100x100甚至60x60左右，当替换单个瓷砖时性能开始变慢。

我已经开始“分块”瓷砖，即将瓷砖添加到较小的FastLayer组中。例如，一个100x100的FastLayer将被划分为几个10x10的FastLayers。当单个瓷砖改变时，想法是只有该块应该重新渲染，从而理想地加速整体渲染时间。

这是尝试的良好设计，还是应该尝试其他方法？我已经查阅了Konva.js文档中的性能提示，但没有看到与此情况直接相关的内容。

- ross.squires

Answer 1

经过一些研究和尝试，我发现了渲染大约4000张图片的最快方法。

• 不要使用React组件来进行Konva.js的渲染。我使用React来组织我的应用程序，但是我跳过了使用中间库进行Konva.js渲染。对于canvas，使用React组件会使性能减半。
• 缓存常见图像。我使用一个简单的LRU缓存来重复使用HTMLImageElement对象。
• 尽可能地重复使用Konva.js节点(Konva.Image)。我的实现正在渲染一组图像。位置不变，但图像可能会变化。以前，我会销毁一个节点，然后再添加另一个节点。销毁()会导致额外的渲染，为您的用户创建抖动。相反，我只是使用image()方法与id()和name()结合使用，以查找和替换网格坐标处的图像。
• 我的应用程序允许用户在网格上绘制长笔画。当仅使用文字鼠标事件时，小笔划可以正常工作。对于长笔画，由于两个原因，这种方法不起作用。首先，操作系统和浏览器会限制鼠标事件，从而给您间歇性的鼠标事件。其次，在渲染过程中也会产生同样的副作用。相反，软件现在检测到长笔画，并“填充”用户打算在间歇性鼠标事件之间绘制的缺失坐标。
• 定时渲染。由于我的网格经常会发生变化，我决定每秒采样24次网格信息，而不是让每个图块更改排队等待batchDraw()。底层实现使用RxJS每42ms轮询一次Redux存储，并且仅在有变化时排队batchDraw()。

- ross.squires

Answer 2

缓存确实有助于性能，但隐藏也同样重要。据我上次研究时，Konva并没有进行任何视图裁剪。以下是我在Konva策略游戏中使用的代码，用于隐藏岛屿形状。

stage.on('dragmove', function() {
    cullView();
});


function cullView() {

var boundingX = ((-1 * (stage.x() * (1/zoomLevel)))-(window.innerWidth/2))-degreePixels;
var boundingY = ((-1 * (stage.y() * (1/zoomLevel)))-(window.innerHeight/2))-degreePixels;
var boundingWidth = (2 * window.innerWidth * (1/zoomLevel)) + (2*degreePixels);
var boundingHeight = (2 * window.innerHeight * (1/zoomLevel)) + (2*degreePixels);
var x = 0;
var y = 0;
for (var i = 0; i < oceanIslands.length; i++) {
    x = oceanIslands[i].getX();
    y = oceanIslands[i].getY();
    if (((x > boundingX) && (x < (boundingX + boundingWidth))) && ((y > boundingY) && (y < (boundingY + boundingHeight)))) {
        if (!oceanIslands[i].visible()) {
            oceanIslands[i].show();
            oceanIslands[i].clearCache();
            if (zoomLevel <= cacheMaxZoom) {
                oceanIslands[i].cache();
            }
        }
    } else {
        oceanIslands[i].hide();
    }
}

- Timothy Ryan

---

非常感谢！这是一种优雅的做法！ - Lancer.Yan