Как использовать RaphaelJS для рисования существующего векторного изображения - PullRequest
Новая
       23

Как использовать RaphaelJS для рисования существующего векторного изображения

3 голосов
/ 15 сентября 2010

Я начинаю изучать RaphaelJS , но, похоже, это крутая кривая обучения, поскольку я не очень разбираюсь в javascript. Но, похоже, такая хорошая библиотека, что я готов потратить время на ее изучение.

Я хотел бы знать:

  1. Как использовать существующее векторное изображение в RaphaelJS

    (Если я загружаю «векторное» изображение, могу ли я сказать RaphaelJS, чтобы он нарисовал координаты?)

  2. Существует ли способ преобразования изображения (jpg, gif или любого другого) в векторную графику, которую может использовать RaphaelJS.

Я путаюсь с тем, что на страницах с примерами изображения рисуются в координатах, что имеет смысл для меня. Однако, если скачать векторное изображение из сети, где координаты?

Я стремлюсь сделать изображения на моей веб-странице интерактивными, как на примере карты RaphaelJS Австралия , на которой есть событие при наведении курсора.

1 Ответ

11 голосов
/ 15 сентября 2010

Самый простой формат для чтения векторных изображений - это svg, поскольку svg - это XML, а XML - просто текст.

Преобразуйте ваше векторное изображение в svg, используя что-то вроде Illustrator или Inkscape, а затем откройте его в текстовом редакторе.Вы обнаружите, что большинство форм, таких как <path /> и <rect />, имеют прямую эквивалентность в Рафаэле.Например, объект <path /> определяет координаты пути в своем атрибуте d и имеет тот же синтаксис, что и пути в Рафаэле: 

<path
  style="fill:none;stroke:#000000;stroke-width:12"
  d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
/>

Вы можете преобразовать его в Рафаэля: 

var path = paper.path(
    "m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
);
path.attr({fill:'none',stroke:'#000000';'stroke-width':12});

Обратите внимание на любые преобразования, примененные к объектам и группам (элемент <g />), вам придется повторить их в Рафаэле.Например, вы видите следующее: 

<path
  style="fill:none;stroke:#000000;stroke-width:12"
  d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
  transform="translate(-124,370)"
/>

, после создания пути в Рафаэле вам нужно применить translate(): 

path.translate(-124,370);

Вы, вероятно, можете написать скриптпреобразовать SVG-файлы в синтаксис Raphael или загрузить SVG-файл в браузере в виде текста и использовать синтаксический анализатор XML DOM браузера для его обработки и рисования с использованием Raphael.

...