javascript - 我的 javascript Canvas map 脚本和性能不佳

Question

下面基本上是我的原型(prototype)脚本，它使用 128x128 的图 block 在 Canvas 上绘制 map ，用户可以拖动 map 来四处移动。

脚本确实有效。但是我有几个问题需要解决: 1.性能不佳，我不明白为什么。 2. 我缺少一种在实际绘图之前缓冲瓷砖的方法。 3. 如果您还注意到任何其他问题，可以帮助我使事情运行得更顺利，那就太好了。

脚本的一些解释:

变量

坐标 - 定义要显示的实际图像。图片文件名类型为'0_1.jpg'，其中0为Y，1为X。

mouse_position - 顾名思义，记录鼠标位置。

position - 这是一个命名不当的变量。它定义 Canvas 上绘制的上下文的位置。当用户拖动 View 时，这会发生变化。

---

如有任何帮助，我们将不胜感激。谢谢。

var coordinates = [0, 0];
var mouse_position = [0, 0];
var position = [-128, -128];

var canvas = document.getElementById('map_canvas');
var context = canvas.getContext('2d');

var buffer = [];
var buffer_x = Math.floor(window.innerWidth/128)+4;
var buffer_y = Math.floor(window.innerHeight/128)+4;


var animation_frame_request = function() {
    var a = window.requestAnimationFrame;
    var b = window.webkitRequestAnimationFrame;
    var c = window.mozRequestAnimationFrame;
    var d = function(callback) {
        window.setTimeout(callback, 1000/60);
    }

    return a || b || c || d;
}





var resizeCanvas = function() {
    window.canvas.width = window.innerWidth;
    window.canvas.height = window.innerHeight;


    window.buffer_x = Math.floor(window.innerWidth/128)+4;
    window.buffer_y = Math.floor(window.innerHeight/128)+4;


    window.buffer = [];

    for (row = 0; row < window.buffer_y; row++) {
        x = [];
        for (col = 0; col < window.buffer_x; col++) {
            x.push(new Image());
        }

        window.buffer.push(x);
    }
}




var render = function() {
    animation_frame_request(render);

    for (row = 0; row < window.buffer_y; row++) {
        for (col = 0; col < window.buffer_x; col++) {
            cy = window.coordinates[1]+row;
            cx = window.coordinates[0]+col;
            window.buffer[row][col].src =  'map/'+cy+'_'+cx+'.jpg';
        }
    }

    for (row = 0; row < window.buffer_y; row++) {
        for (col = 0; col < window.buffer_x; col++) {
            window.context.drawImage(window.buffer[row][col],
                                     window.position[0]+col*128,
                                     window.position[1]+row*128, 128, 128);
        }
    }
}




var events = function() {

    window.canvas.onmousemove = function(e) {

        if (e['buttons'] == 1) {

            window.position[0] += (e.clientX-window.mouse_position[0]);
            window.position[1] += (e.clientY-window.mouse_position[1]);

            if (window.position[0] >= 0) {
                window.position[0] = -128;
                window.coordinates[0] -= 1;
            } else if (window.position[0] < -128) {
                window.position[0] = 0;
                window.coordinates[0] += 1;
            }

            if (window.position[1] >= 0) {
                window.position[1] = -128;
                window.coordinates[1] -= 1;
            } else if (window.position[1] < -128) {
                window.position[1] = 0;
                window.coordinates[1] += 1;
            }

            render();
        }

        window.mouse_position[0] = e.clientX;
        window.mouse_position[1] = e.clientY;
    }
}


window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('load', resizeCanvas, false);
window.addEventListener('mousemove', events, false);

resizeCanvas();

Answer 1

为了获得更好的性能，您应该避免更改 img 节点的 src，而是移动它们。

最小化处理和修改的 img 节点数(屏幕定位除外)的一种简单方法是使用 LRU(最近最少使用)缓存。

基本上，您通过使用将 src url 映射到节点对象并将它们全部保存在双向链表中的字典来保留最后说 100 个图像节点的缓存(它们必须足以覆盖至少一个屏幕)。

当需要一个 tile 时，您首先检查缓存，如果它已经存在，只需将它移动到 LRU 列表的前面并移动 img 坐标，否则创建一个新节点并设置源，或者，如果您已经达到缓存限制，则重新使用双向链表中的最后一个节点。在代码中:

function setTile(x, y, src) {
    var t = cache[src];
    if (!t) {
        if (cache_count == MAXCACHE) {
            t = lru_last;
            t.prev.next = null;
            lru_last = t.prev;
            t.prev = t.next = null;
            delete cache[t.src]
            t.src = src;
            t.img.src = src;
            cache[t.src] = t;
        } else {
            t = { prev: null,
                  next: null,
                  img: document.createElement("img") };
            t.src = src;
            t.img.src = src;
            t.img.className = "tile";
            scr.appendChild(t.img);
            cache[t.src] = t;
            cache_count += 1;
        }
    } else {
        if (t.prev) t.prev.next = t.next; else lru_first = t.next;
        if (t.next) t.next.prev = t.prev; else lru_last = t.prev;
    }
    t.prev = null; t.next = lru_first;
    if (t.next) t.next.prev = t; else lru_last = t;
    lru_first = t;

    t.img.style.left = x + "px";
    t.img.style.top = y + "px";
    scr.appendChild(t.img);
}

我也总是将请求的图 block 附加到容器中，以便它位于所有其他现有图 block 的前面；这样我就不需要移除旧瓷砖，它们就会被留在后面。

为了更新屏幕，我只是遍历我需要的所有图 block 并请求它们:

function setView(x0, y0) {
    var w = scr.offsetWidth;
    var h = scr.offsetHeight;
    var iy0 = y0 >> 7;
    var ix0 = x0 >> 7;
    for (var y=iy0; y*128 < y0+h; y++) {
        for (var x=ix0; x*128 < x0+w; x++) {
            setTile(x*128-x0, y*128-y0, "tile_" + y + "_" + x + ".jpg");
        }
    }
}

大多数情况下，setTile 请求只会更新现有 img 的 x 和 y 坐标标签，无需更改任何其他内容。同时，屏幕上不会出现超过 MAXCACHE 个图像节点。

你可以在

中看到完整的工作示例

http://raksy.dyndns.org/tiles/tiles.html