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

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

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

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

Спасибо


person Alex    schedule 30.06.2010    source источник
comment
excanvas добавляет поддержку холста в IE6 / 7/8 - code.google.com/p/explorercanvas   -  person Castrohenge    schedule 12.07.2010


Ответы (4)


Это может касаться того, о чем вы говорите.

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

Например, у меня есть элемент с идентификатором 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>

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

person cmonkey    schedule 30.06.2010
comment
Дополнительные примеры можно увидеть в наборе тестов svg, начиная с dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/ и далее (все тесты с именем masking- *) - person Erik Dahlström; 01.07.2010

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

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

person CyberFonic    schedule 02.05.2011

И svg, и холст - это векторные графические технологии, каждая из которых имеет разные функции.

Холст

Холст - это растровое изображение с непосредственным интерфейсом прикладного программирования (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

SVG против холста

Подробнее о холсте и svg см. Здесь - Сравнение SVG и Canvas

person GowriShankar    schedule 07.11.2014

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

person codedread    schedule 30.06.2010