Должен ли я использовать SVG или Canvas для игры с бумажной куклой?

Question

Я работаю над созданием новой версии моей бумажной куклы-игры here.

Прямо сейчас, во Flash. Я хотел бы обновить его до HTML 5, но я не уверен, следует ли использовать SVG или изображения в Canvas или png, импортированные в Canvas. Я полагаю, что любой из них будет работать с технической точки зрения, но я хотел бы принять во внимание производительность.

Некоторые факты/требования:

1. У меня есть Adobe Illustrator для редактирования изображений и Photoshop. Также Adobe Edge Animate, если это имеет значение.
2. Когда я добавляю новое изображение, как рубашку, было бы неплохо просто вставить его в папку с надписью «рубашки» и интегрировать ее в программу без необходимости входить и вводить имя файла в массив на странице. Используя PHP, я подозреваю, что могу читать из каталога для этого, но я не уверен, что SVG или холсты могут быть сохранены в отдельных файлах, таких как: I
3. Мне нужно уметь регулировать цвет для каждого элемента. Думаю, я бы использовал фильтры CSS для этого?
4. Для некоторых предметов, я хотел был бы иметь возможность изменить цвет только на части предмета (например, цвет цветка, но не его листья). Во Flash это было сделано путем применения цветового фильтра только к одному слою элемента. Не знаю, как это можно обработать здесь. Возможно, имея два массива с отдельными связанными изображениями в каждом, которые накладываются друг на друга, и применяя цветовой фильтр только к одному.
5. В конце изменений пользователя они должны иметь возможность сохранять изображение на свой компьютер, или я должен сохранить их создание в каталоге на сервере. У меня была работа над версией Flash, но сейчас она сломана. Я знаю, почему и могу использовать тот же процесс в новой системе, но может быть и более простой способ. Я слышал, что легко сохранить содержимое холста.
6. Перекрывающиеся формы должны иметь гладкие края, а не наложение.
7. Нужно работать на iPad и iPhone. Многие образцы холста и SVG, которые я видел, действительно не работают должным образом на моем iPhone, хотя я нашел рабочую программу куклы SVG, подобную этой.

Некоторые из них, возможно, были множественными вопросами, но, надеюсь, вы можете указать мне в правильном направлении. Я уверен, что могу вычислить код, какой бы метод я ни пытался, но я не хочу начинать в неправильном направлении и тратить время, поскольку мои знания о SVG и Canvas все еще ограничены.

спасибо.

Answer 1

Мои 2-Cents:

...

Adobe Illustrator:

• SVG поддерживает векторную пути изначально.
• У холста есть собственная собственная система путей (не совместимая с SVG). Но!... Вы можете использовать это очень хороший AI-к-CanvasPath переводчика: http://www.noupe.com/illustrator/ai2canvas-export-html5-canvas-from-adobe-illustrator-74639.html

Хранение Новых изображений:

• Поскольку вы манипулируете подкомпоненты ваших изображений, вы, вероятно, хотите, чтобы сохранить изображения как пути, а не файлы изображений. На обоих путях SVG и Canvas данные - простой текст - легко хранить и обслуживать.

Настройка цвета на компонентах:

• SVG может сделать это непосредственно путем изменения «заполнить» приписывать компонента.
• Canvas может сделать это с его способностью компоновки. Это немного сложнее для настройки и включает в себя расслоение. Чтобы изменить цвет рубашки, вы хотите создать отдельный слой, содержащий цвет рубашки. Затем вы можете комбинировать любой новый цвет с этим слоем. После этого это легко и эффективно. В качестве альтернативы, с небольшим усилием программирования вы можете определить любой путь, который будет перекрашен, и перерисовать этот путь с помощью другого «fillStyle».

Позволяет пользователю сохранить изображение в их локальной файловой системы:

• Ни SVG или Canvas сделать это изначально из-за соображений безопасности.
• Простое решение: вы можете открыть новое окно браузера и сделать их правой кнопкой мыши-сохранить-как.
• Более сложное решение: Отказов изображение с вашего веб-сервера и позволяет пользователю загрузить его с сервера

Нет сглаживании:

• Только SVG позволяет отключить сглаживание.
• Canvas отлично справляется с сглаживанием, но вы не можете отключить сглаживание.

должен работать на IPad/iPhone:

• Оба SVG и Canvas поддерживаются таким образом, ваше приложение должно работать.
• Как всегда, обязательно проверьте микроприложение!

Вывод:

Оба SVG и Canvas есть возможности, которые вы ищете, но SVG кажется немного лучше подходят:

• SVG может естественным образом использовать AI изображения, экспортируемые в формат SVG.
• SVG замедляется при рисовании многих объектов, но вы рисуете только несколько компонентов (без проблем).
• SVG изначально позволяет перекрашивать дорожки.
• SVG позволяет отключить сглаживание (но, по моему опыту, это плохая идея - держите его!)
• Холст превосходит при нанесении тысяч фигур очень быстро -анимация! (не требуется в вашем случае)