Выбор правильной технологии (SVG vs Canvas)

Question

Я пишу приложение для манипуляции с фигурами, чтобы после создания простых фигур пользователь мог создавать более сложные, обрезая фигуры друг против друга (т.е. объединяя два круга вместе в фигуру 8, сохраненную с использованием одного пути, а не группа или выполняет пересечение двух окружностей для создания метки «укуса»), и я пытаюсь выбрать графическую библиотеку для использования.

SVG, кажется, обрабатывает 80% необходимых мне функций из коробки (хранение фигур, перемещение, вращение, масштабирование). Проблема в том, что другие 20% (используя обрезку для создания нового набора сложных многоугольников), кажется, невозможно достичь без воссоздания функциональности SVG в моих собственных модулях (мне пришлось бы сохранять фигуру один раз для рисования внутри SVG, и один раз для обрабатывать отсечения сам). Я могу ошибаться в отношении SVG, но, читая о библиотеке Raphael (основанной на SVG), кажется, что она обрабатывает только отсечение с помощью прямоугольника, и даже это ограничение является временным (оно только визуализирует часть фигуры, но сохраняет всю фигуру перерисовывается после перемещения прямоугольника отсечения). Возможно, я просто запутался в стандарте SVG, но даже получение / разбор путей для вычисления нового пути с использованием подмножеств предыдущих путей кажется неочевидным в SVG (есть функция Subpath (), но я не вижу ничего, чтобы найти точки пересечения двух периметров полигона или объединить несколько подпутей в один путь).

В результате Canvas кажется лучшей альтернативой, поскольку он не вносит дополнительных издержек, отслеживая фигуры, которые я уже должен был отслеживать, чтобы заставить мою собственную реализацию отсечения работать. Мало того, я уже реализовал класс полигонов, который можно перемещать, поворачивать и масштабировать. Однако у Canvas есть и другие проблемы (мне пришлось бы реализовать свой собственный метод перерисовки, который, я уверен, не будет столь же эффективным, как SVG, использующий преимущества специфичных для браузера сред в Chrome и Firefox; принять IE несовместимость, которая бесплатно обрабатывается библиотеками вроде Raphael).

Спасибо

Answer 1

Как svg, так и canvas являются векторной графической технологией. Каждая из них имеет несколько различных функций.

Canvas

Canvas - растровое изображение с интерфейсом прикладного программирования (API) для модеграфии, позволяющее рисовать его Canvas - это модель «запускай и забывай», которая визуализирует свою графику непосредственно в своем растровом изображении, а затем не имеет смысла нарисованных фигур; остается только полученное растровое изображение.

Подробнее о холсте - http://www.queryhome.com/51054/about-html5-canvas

SVG

SVG используется для описания масштабируемой векторной графики

SVG известен как графическая модель с сохранением режима, сохраняющаяся в модели в памяти. Аналогично HTML, SVG создает объектную модель элементов, атрибутов и стилей. Когда элемент появляется в документе HTML5, он ведет себя как встроенный блок и является частью дерева документа HTML.

Дополнительная информация о SVG - http://www.queryhome.com/50869/about-svg-part-1

Подробную информацию о canvas vs svg см. Здесь - Сравнение svg и canvas

Answer 2

Мне кажется, что вы пытаетесь сделать 2D конструктив геометрии.Поскольку SVG работает в режиме сохранения, нарисованные объекты сохраняются, а затем выполняются различные операции.С Canvas вы работаете с битовой картой, поэтому изменения вступают в силу немедленно.Поскольку ваши пользователи, в свою очередь, будут выполнять больше операций с вашими более простыми фигурами, чтобы создавать еще более сложные фигуры, Canvas должен в долгосрочной перспективе лучше подходить.

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

Answer 3

Это может относиться к тому, что вы упоминаете.

Отсечение может быть выполнено с использованием непрямоугольных объектов с использованием элемента 'clipPath'.

Например, у меня есть элемент с id 'Clipper ', который определяет, что вырезать, и путь, который подлежит отсечению.Не уверен, что они пересекаются в этом фрагменте.

<g clip-rule="nonzero">
  <clipPath id="clipper">
    <ellipse rx="70" ry="95" clip-rule="evenodd"/>
  </clipPath>

  <!-- stuff to be clipped -->
  <path clip-path="url(#clipper)" d="M-100 0 a100 50"/>
</g>

Это просто фрагмент из того, что у меня есть.Надеюсь, это поможет.

Answer 4

Вы правы - вам придется математически выполнять вырезание и создание новых фигур независимо от того, используете ли вы SVG или Canvas.Я пристрастен, кажется, что было бы более полезно использовать SVG, поскольку вы также получаете такие вещи, как события DOM для фигур (мышь, перетаскивание) и сериализацию в графический формат бесплатно.