несколько объектов для визуализации на очень длинной области, холст?

Question

Мне нужно отобразить очень длинную область (без заданной длины) со многими полигонами (простые фигуры - круги, квадраты, немного текста).Очевидно, мне нужен только небольшой фрагмент, видимый одновременно.Основными проблемами являются эффективная прокрутка и обработка событий мыши.Я пишу в GWT.То, что я до сих пор рассматривал:

1) холст.создать холст с размером видимой области.Создайте буферный холст больше видимой области.Визуализация в буфер (только изменения - если что-то изменилось в видимой области или новые части вправо / влево во время прокрутки).А при необходимости визуализируйте правильную часть буфера для видимого холста.Кажется, это работает достаточно быстро.Но!Я должен реализовать эту умную буферизацию, решить, какую часть нужно перерисовать, а какую нет.И мне нужно запомнить все объекты для обнаружения щелчков мыши и наведения мыши (и это должна быть какая-то приятная структура, например, дерево интервалов или дерево сегментов, поскольку проверки при наведении мыши очень часты - но это уже реализовано в браузере, звучит как переизобретение колеса)- это МНОГО РАБОТЫ! Может быть, есть что-то готовое?

2) html (divs / images) - так, идея состоит в том, чтобы визуализировать все элементы с помощью div и images (imagesможет быть сгенерирован на холсте первым, не имеет значения).Расположите их абсолютно на длинном div и используйте прокрутку в браузере для прокрутки div.Работает до тех пор, пока вы не достигнете конца этого длинного div, и вам нужно переставить все, чтобы было больше места для прокрутки (и это остановит прокрутку на некоторое время).Так что, возможно, можно было бы сделать рендеринг во втором div в это время, а затем переключить их ... Это может сработать, но это звучит как хак, и у него, вероятно, будут серьезные проблемы с несколькими объектами, видимыми одновременно.Плюс к событиям мыши, реализованным в браузере.

3) SVG - я не пробовал, но думаю, что столкнусь с теми же проблемами с производительностью, что и с html / divs (при прокрутке вправо / влево)

Есть идеи?Какой подход является лучшим?есть что-нибудь получше?WebGL (он не будет работать в IE, и портирование на IE будет сложной задачей).Как мне это реализовать?

Answer 1

Я бы пошел с холстом, так как он относительно быстрый.

Что касается позиционирования вне экрана, событий мыши и повторного рендеринга, то обо всем этом можно позаботиться, используя библиотеку холста, например Fabric.js . Взгляните на демонстрации .

Демонстрация инспектора событий & Работа с учебником событий может оказаться полезной.

Вне экрана (не) рендеринг по умолчанию. Просто расположите объекты за пределами экранных координат, и они не будут видны.

Answer 2

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

Один из возможных компромиссов - визуализировать весь холст и закрепить его, используя overflow:hidden.Это то, что я сделал на дисплее формы волны, над которым я работаю.

SVG должен быть проще, чем DOM для фигур.Поскольку SVG не является полностью кросс-браузерным, вы должны использовать что-то вроде http://raphaeljs.com/