-
SVG вместо Canvas
По наводке товарища Bolk решил проверить, насколько сложно генерировать графику в SVG и использовать ее в качестве фона у элемента. Оказалось, совсем не сложно (смотреть надо в Опере и Сафари): создаем строчку, содержащую код SVG, кодируем на лету алгоритмом base64 и вставляем как background у элемента. Код кодировщика совсем небольшой, взял его отсюда и вынес в отдельный namespace. У Firefox есть встроенные методы:
window.atob()иwindow.btoa(), но они вроде как сломаны во второй версии браузера.Какия я вижу плюсы и минусы при использовании SVG и Canvas:
- У сanvas есть метод
toDataURL(), который позволяет получить нарисованную картинку в формате data: URL. Этот метод не работает в Safari. - С другой стороны, Firefox упорно требует перевести документ в XHTML-режим для отображения SVG (для справки: переключение в XHTML-режим выполняется не доктайпом, а заголовком
Content-Type: application/xhtml+xml, который должен послать сервер). Я пока не готов это делать — и так проблем с браузерами хватает, не хочу создавать новые. - У SVG объективно больше возможностей. Хотя бы работа с текстом.
- Некоторые вещи гораздо проще нарисовать/стереть в canvas.
- В SVG гораздо проще модифицировать уже «нарисованные» объекты.
- Safari оказался довольно чувствительным к сгенерированной SVG-картинке в качестве фона у элемента: если этому элементу добавить
border, то SVG не отобразится. - Вопрос о производительности и потребляемых ресурсах пока остается открытым.
Хочу найти универсальный способ рисования графики, работающий во всех (кроме IE) браузерах и внедрить в rocon. Это нужно потому, что встроенные в Safari и Firefox методы рисования далеки от идеала, иногда нужно и вручную нарисовать уголки. Например, ни один из браузеров не добавляет скругленные уголки картинкам, Safari сносит башню от бордюров разной толщины, да и рисует он не совсем корректно.
- У сanvas есть метод
8 комментариев
Флеш спасёт мир? =)
Может быть, если использовать его как генератор png-картинок. Флэш мне не нравится тем, что он часто блокируется в крупных организациях. Проще внедрить SVG для Сафари, чем пытаться нормально воткнуть флэш на страницу
Есть такая библиотека jsxgraph. Примеры впечатляют.
ЗЫ: Если бы не Шитов, то не знал бы, что есть такой интересный блог
кажется есть идея:
1)svg можно вставлять в html через тэг object
2)в svg есть foreign object, который позволяет вставлять в svg файлы html тэги
(пример: )
скрипт находит объект для скругления, получает его свойства, (вроде фоновой картинки и границ). Генерирует svg код с круглёнными уголками, картинкой в качестве заливки(fill), границами и foreign объектом с содержимым нашего объекта.
понятное дело встаёт вопрос производительности, одинакого отображения (в опере шрифты в некоторых случая иначе сглаживают) и доступность всех элементов скриптам
Зачем так радикально?
Можно просто сгенерировать уголки с элементами фона. Более того, я не хочу своими действиями навредить разработчику сайта: элемент должен оставаться элементом, должен оставаться на своем месте и должен управляться через CSS и JS.
просто я ищу способ для настоящих скруглённых уголков. что бы и фон нормально можно было поставить объекту, и что бы неоднородный фон за объектом нормально отображался и что бы границы были. тут же и тень можно будет отрисовать.
я же не дачу в подмосковье… )
а что ты имеешь под радикальным? и что ты имеешь ввиду про сгенерировать уголки, ты про object?
думаю надо просто проверить, может css и js Будет нормально работать
Под радикальным я имею в то, как поступает, например, разработчик DD_roundies. Он, по сути, заменяет HTML-блок на VML аналог и управляет им через JS. Отсюда проблемы с производительностью и с управляемостью: как, например, мне его с помощью анимации переместить, изменить размер и контент?
Я пока, к сожалению, не вижу простого и универсального способа решить 100% задач, связанных со скругленными уголками. Даже в Safari и Fx3 с ними жуткие проблемы, хотя вроде как нативно поддерживают эти свойства.
Это моя работа:
Вроде рисует всё красиво, но результата вычисления экстремума функции нет (
Вся проблема в некоторых переменных, которые нельзя изменять во время отображения странички, почему… понятия не имею.