使用>10k对象缩放和平移HTML5画布的最佳实践

Question

我需要在画布上构建一种地图，显示超过10000个元素（圆），并且需要缩放和可移动。我在这里描述了我的方法，Android在调整和移动多个画布元素方面明显较慢，并根据评论中提出的建议更改了我的实现。

平移贴图现在在画布上下文中使用setTransform，然后在擦除画布后重新绘制视口中的所有元素。（我把它们从R树上取下来）。这发生在每个mousemove事件上。

当我有一个缩放的地图要绘制200个左右的对象时，这是非常快的，但当缩小时，平移速度非常慢，需要绘制超过10k个对象。我显然也需要快点。

满足这一要求的最佳做法是什么？我的方法如下：

• 在画布上进行视口div，并将画布变大（如每侧50%）

Answer 1

我支持斯特里勒的回答。

下面是一个过滤示例，在计算所有精灵和计算仅可见精灵之间切换，每次间隔5秒：

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 100;
canvas.height = canvas.width;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255,0,0,0.1)";
;
var sprites = [];
while (sprites.length < 100000) {
    sprites.push({
        x: Math.round(Math.random() * 10000 - 5000),
        y: Math.round(Math.random() * 10000 - 5000)
    });
}
var drawAll = true;
function draw() {
    var targets;
    if (drawAll == true) {
        targets = sprites.slice(0);
    }
    else {
        targets = sprites.filter(function (sprite) {
            return sprite.x > -10 && sprite.x < 110 && sprite.y > -10 && sprite.y < 110;
        });
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var t = 0; t < targets.length; t++) {
        var target = targets[t];
        ctx.fillRect(target.x - 5, target.y - 5, 10, 10);
        ctx.strokeRect(target.x - 5, target.y - 5, 10, 10);
    }
}
function main() {
    requestAnimationFrame(main);
    for (var i = 0; i < sprites.length; i++) {
        var sprite = sprites[i];
        sprite.y++;
        if (sprite.y > 110) {
            sprite.y -= 200;
        }
    }
    draw();
}
setInterval(function () {
    drawAll = !drawAll;
    console.log(drawAll ? "Draw all" : "Draw filtered");
}, 5000);
main();

Answer 2

我的方法可能是：

>

创建一个“视口”大小的屏幕画布（例如浏览器窗口的大小）

将要绘制的对象存储在数据结构中，该数据结构允许您快速确定在任何给定时间（给定当前视口位置和缩放）哪些对象可见。

然后在每个渲染：

• 清除画布