HTML 5: как реализовать сложную сеть

#html

#HTML

Вопрос:

Каков правильный подход, если вы планируете реализовать (сложную, интерактивную) сетевую диаграмму в «HTML5», которая является частью инструмента моделирования — например, чтобы позволить пользователю разрабатывать рабочий процесс?

Является ли SVG правильным подходом или использует непосредственно Javascript / Canvas?. Существует ли какое-либо продуктивное приложение, которое доказало, что это выполнимо в HTML5 (сетевая модель может быть довольно сложной), особенно в отношении производительности?

Мне не нужны какие-либо детали реализации, просто подсказка к «правильной» технологии, если вы будете «вынуждены» делать это в HTML5…

Спасибо.

1. Я бы предпочел флэш-выигрыши как в совместимости, так и в производительности. Но это только я.

2. Да, чтобы было ясно: вопрос в контексте отсутствия свободы выбора другой технологии по какой-либо причине.

Ответ №1:

svg теперь имеет поддержку от ie9. canvas поддерживается в большинстве современных браузеров, а css поддерживается всеми.

преимущество svg в том, что он масштабируется («изображение» представляет собой векторную карту, поэтому пользователь может иметь его в любом размере, который он предпочитает), но производительность рендеринга немного дрянная. Вы можете привязать некоторые события к элементам..

canvas похож на GDLib или ImageMagick, у вас есть белый лист, на котором вы можете рисовать. Поэтому, если вы вносите изменения, сначала вам нужно очистить холст и все перерисовать. Вы не знаете, на какой элемент нажал пользователь, и можете связывать события только для всего элемента canvas.

Альтернативой может быть использование HTML и DOM с CSS, поскольку вы просто можете начать перемещать элементы сети вокруг и привязывать события к узлам вашей сети. Но строки довольно сложно реализовать (можно использовать повернутый div с верхней границей)

Лично я бы выбрал гибрид между svg и простым html, но опять же, я не знаю всех вариантов использования вашего приложения.