Боковой скроллинг с помощью HTML5 canvas

Question

У меня есть холст со следующим размером: 500x200.Внутри этого холста я рисую несколько блоков (на самом деле - ячейки таблицы).Информация о том, сколько блоков я должен нарисовать, я получаю через AJAX, но размер каждой ячейки фиксирован - 100x50.Таким образом, я могу отобразить внутри моего холста только 5 блоков по горизонтали и 4 по вертикали.Но как насчет других блоков?Что если скрипт вернет таблицу 30х30 ячеек.Как я могу использовать боковую прокрутку (предпочтительно мышь), чтобы пользователь мог использовать остальные ячейки (без уменьшения, только прокрутка).

Если вам нужна дополнительная информация, пожалуйста, сообщите мне, и я предоставлю ее.Спасибо.

Answer 1

Самый простой способ сделать это - использовать панорамирование мыши.

В случае нажатия кнопки мыши начинайте панорамирование и сохраняйте положение мыши

В случае перемещения мыши переведите контекст (ctx.translate(x,y)) на разницу между текущей позицией мыши и исходной позицией, затем перерисовайте сцену.

При событии мыши вверх прекратите панорамирование.

Есть более сложные пути. Вы можете реализовать полосы прокрутки внутри холста, как это сделал Mozilla Bespin (... который стал Mozilla Skywriter, который затем слился с Ace и отбросил все использование Canvas). Код, который они использовали, был довольно хорош.

Или вы можете реализовать полосы прокрутки DOM для использования с вашим холстом, что не совсем легко сделать правильно во всех случаях. Это включает в себя добавление нескольких фиктивных элементов, чтобы создать видимость и функционирование реальных полос прокрутки. Я сделал это, но код пока не выпущен. Но это не причина, по которой вы не можете попробовать, если это то, чего вы действительно хотите.

Answer 2

Ознакомьтесь с великолепным учебником по адресу: http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx

Это даст вам ответ на ваш вопрос и многое другое ...

Answer 3

Я с Саймоном Саррисом об этом, но в качестве альтернативы вы можете клонировать холст, заменить его пустым холстом, а затем отобразить исходный холст как изображение.У меня есть несколько MooTools js, которые выглядят так, что хорошо для моего использования, по ymmv:

    var destinationCanvas = this.canvas.clone()l
    destinationCanvas.cloneEvents( this.canvas, 'mousemove');
    var destCtx = destinationCanvas.getContext('2d');
    destCtx.drawImage(
        this.canvas, 
        (this.options.scrollPx)*-1, 
        0
    );
    destinationCanvas.replaces( this.canvas );
    this.canvas.destroy();
    this.canvas = destinationCanvas;
    this.ctx        = destCtx; // this.canvas.getContext('2d');