Моя цель состоит в том, чтобы создать изогнутую стрелку, как этот, на формат HTML5 холст:Как нарисовать изогнутую пунктирную стрелку с HTML5 и анимировать его
я нашел несколько ресурсов, о том, как рисовать линии, но ни один из них, похоже, не работает. Я также нашел связанный stackoverflow post.
Кроме того, возможно ли анимировать его при наведении, чтобы расширить стрелку, используя, возможно, эластичный эффект?
Рафаэль и холст имеют некоторые ограничения, когда дело доходит до линий рисования в ручном стиле. Я нашел лучший способ имитировать такую вещь, чтобы итеративно преобразовать 1-пиксельный путь в целевой путь, как в этой скрипке: http://jsfiddle.net/zPRha/31/ С небольшой работой вы могли бы вычислить угол между двумя последними точками вдоль пути и преобразовать/повернуть путь стрелки, чтобы соответствовать линии по мере ее рисования. Это не идеальное решение, но оно будет работать.
Встроенная наклонная поддержка Raphael обеспечивает простоту и масштабирование. Я понимаю, что такая обработка была бы более тупой, используя холст изначально, хотя я уверен, что некоторые библиотеки холста автоматизировали эту проблему.
Вот обновленная скрипка с дополнительной поддержкой стрелки: http://jsfiddle.net/kevindivdbyzero/JPqXF/
Я думаю, вы должны использовать SVG с переходами CSS3, чтобы делать такие вещи.
Я искал через Интернет, но не нашел образцы или учебники. Не могли бы вы предоставить мне какие-либо ссылки? Спасибо, Теодор – TheodoreV
Удивительный результат. Можно ли добавить текст в виде заголовка в конце стрелки, следуя его движению? – TheodoreV
Я уверен, что это так. Я скоро убью его - как только я уберу эту обезумешку с моей стороны =) –
Это может быть полезно кому-то: http://jsfiddle.net/paaQj/ Я потратил немного времени на настройку Пример Кевина по моему вкусу для использования в проекте, но, как оказалось, Adobe AIR не поддерживает SVG, поэтому не поддерживает Raphael. Наслаждайтесь! –