为许多图像优化 Konva.js答案

【问题标题】：Optimizing Konva.js for Many Images为许多图像优化 Konva.js
【发布时间】：2017-08-01 11:25:55
【问题描述】：

我目前正在使用 Konva.js 在多个堆叠的 FastLayers 上平铺许多 PNG 图像。 PNG 包含不透明度，它们不需要拖动或命中框。瓷砖经常更换，这似乎适用于尺寸约为 30x30 的中型网格。一旦瓦片开始增长到大约 100x100 甚至 60x60，更换单个瓦片时性能开始变慢。

我已经开始研究“分块”图块，即将图块添加到较小的 FastLayer 组中。例如，单个 100x100 FastLayer 将被分成几个 10x10 FastLayer。当单个图块发生变化时，我们的想法是只有该块应该重新渲染，理想情况下可以加快整体渲染时间。

这是一个值得尝试的好设计，还是我应该尝试不同的方法？我查看了 Konva.js 文档中的性能提示，但没有看到与此案例直接相关的任何内容。

【问题讨论】：

标签： javascript html5-canvas png electron konvajs

【解决方案1】：

因此，经过一些研究和修改，我发现了渲染约 4000 张图像的最快方法。

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

【讨论】：

【解决方案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();
    }
}

【讨论】：

非常感谢！这是一个优雅的练习！