Редактируемая сетка с использованием html Canvas

Недавно я очень удивился, когда заметил, что в последней итерации электронных таблиц Google они отображают сетку электронных таблиц с помощью тега canvas, тогда как в прошлом они использовали проверенный и истинный <table><tr><td> для рендеринга сетки.

В предыдущей версии только часть фактических строк отображается в любой момент времени с использованием техники виртуальных строк (аналогично тому, что сделано в slickgrid), Это дает неплохую производительность (у slickgrid есть демо 500 000 строк).

Мои вопросы:

  • Как canvas может быть намного эффективнее, чем метод виртуальных элементов DOM?
  • При работе с холстом таким образом можно обеспечить, чтобы холст отображался с той же скоростью, что и прокрутка, поскольку в отличие от метода виртуальных строк нет предварительно обработанного буфера?
  • Кто-нибудь знает пример с открытым исходным кодом с использованием html canvas для создания редактируемой сетки или любого другого примера кода, который выполняет что-то подобное?

Спасибо.

ОТВЕТЫ

Ответ 1

Чтобы ответить на ваш вопрос 3: Кто-нибудь знает пример с открытым исходным кодом с использованием html canvas для создания редактируемой сетки или любого другого примера кода, который выполняет нечто подобное?

Да: Hypergrid. Это с открытым исходным кодом. Он использует холст и Google Polymer. Посмотрите:

Демо-версия Hypergrid

Hypergrid in Github

Ответ 2

Я могу ответить только на один из ваших вопросов:

  • Рисование на холсте - простой процесс, это просто большой большой куча цветных битов. С другой стороны, у DOM Elements есть гораздо больше вещей, таких как обработчики событий, интерактивность мыши и т.д. Все это подводит итог и делает элементы DOM более тяжелыми, чем просто рисование на холсте.

  • Для этого есть несколько методов, один из которых рисует на экранном холсте, а затем копирует соответствующие части через putImageData. Это в основном сочетается с requestAnimationFrame, поэтому вы просто рисуете, когда браузер запрашивает это. Как я уже сказал, я не могу ответить на этот 100%

  • Я уверен, что этого уже не было, но я не могу точно сказать.

Ответ 3

Как canvas может быть более эффективным при отображении электронной таблицы, чем в таблице DOM?

Canvas - это элемент только для записи, поэтому он имеет гораздо меньше накладных расходов, чем элементы чтения и записи. После того, как вы нарисовали видимую часть таблицы на холсте, холст не "помнит", где он помещает пиксели.

Является ли холст способным не отставать от навигации по электронным таблицам (прокрутка и т.д.)

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

Кроме того, Canvas работает очень быстро и может прокручивать и перерисовывать динамически создаваемую электронную таблицу. Canvas на самом деле изначально буферизуется двойным буфером, а также использует любой доступный графический процессор для ускорения чертежей. Если требуется больше скорости, вы программно создаете дополнительные "только для памяти" холсты, которые можно быстро нарисовать на экране, если необходимо.

Знаете ли вы какие-либо опубликованные таблицы на основе холста.

Нет, я не знаю.

Холст только для записи. Картина холста становится редактируемой только с большим усилием программирования. Таким образом, холст, вероятно, является неправильным инструментом для редактирования.

Улыбка... Кажется, я печатал свой ответ. Александр Кладт отвечал аналогичным образом - То же самое, что он говорит!

Ответ 4

FYI, Google Docs/Drive Spreadsheet использует холст для отображения основных таблиц/таблиц.