Пользовательская прокрутка на холсте html5

Question

Каков рекомендуемый способ предоставления прокрутки и собственных полос прокрутки для очень больших данных, отображаемых на холсте hmtl5?

Мне нужно отображать данные размером 128000x128000 пикселей. Использование холста с шириной/высотой, установленной на 128000, не является вариантом, так как это будет использовать огромное количество оперативной памяти (около 61 ГБ по моим быстрым вычислениям).

Так что мне нужен способ предоставления пользовательских полос прокрутки для холста HTML5.

Answer 1

jCanvas - это плагин jQuery, который может вам помочь.

Answer 2

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

Как таковой, я не думаю, что вы действительно можете прокрутить его так, как вы себе представляете. Если у вас есть 128000 × 128000 <canvas>, вы можете поместить его в <div>, например. 1280 × 1280 и установите <div> на overflow:hidden, но, как вы говорите, 128000 × 128000 <canvas> непрактично.

Я предполагаю, что такое решение, которое вы ищете, обеспечит виртуальный интерфейс холста 128000 × 128000, но затем разделит его на куски, предоставит интерфейс прокрутки и нарисует каждый кусок по мере его прокрутки.

Answer 3

После быстрого теста я не уверен, что Chrome или Firefox даже сделают холст таким большим. Моя ставка заключалась бы в создании элемента canvas, но никогда не добавляйте его в DOM. Так же, как это:

var hiddenCanvas = document.createElement('canvas'); 
hiddenCanvas.width = 128000; 
hiddenCanvas.height = 128000; 
var hiddenContext = hiddenCanvas.getContext('2d'); 

Затем создайте меньший холст, который будет на самом деле отображать часть вашего скрытого холста

<canvas width="something reasonable" height="something reasonable" id="viewCanvas"/> 

и использовать метод DrawImage рисовать частей:

var viewCanvas = document.getElementById('viewCanvas'); 
var viewContext = viewCanvas.getContext('2d'); 
viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height); 

Тогда вам будет либо предлагать кнопки вверх/вниз/вправо/влево, чтобы перемещаться, или, может быть, поддельные полосы прокрутки, используя 20-кратные широкие DIV, которые будут показывать только полосы прокрутки и которые вы нажмете на onrollroll даже слушатель. И каждый раз, когда пользователь меняет позицию, повторите вызов drawImage, обновив позиции x/y (40 и 50 в моем примере).

Сказав это, опять же, даже если скрытый я сомневаюсь, что браузеры будут работать с холстом, который большой.

Я, случается, ищу решение одной и той же проблемы, поэтому, если в ваших исследованиях вам повезет, пожалуйста, поделитесь.