Построение объекта пути Рафаэля по частям - PullRequest
1 голос
/ 22 декабря 2011

Я пытаюсь создать небольшое приложение для рисования от руки и найти способ добавить сегменты пути (например, «L10,10») к элементу пути Рафаэля. Этот ответ говорит о том, что это невозможно.

Я пытался сделать что-то вроде:

var e = paper.path("M0,0L100,100")
e.attr("path").push(["L",50,100])

..., что меняет массив, возвращаемый e.attr("path") но не меняет графику, поэтому я думаю, что это не поддерживается поведение.

Ответы [ 3 ]

2 голосов
/ 16 января 2012

После просмотра источника Raphael 2 я нашел способ эффективного создания инкрементального пути:

  1. инициализация пути с использованием Raphael API w / elem = paper.path()

  2. присоединение обработчика mousemove для непосредственного изменения пути SVG DOM через elem.node.setAttribute("d", elem.node.getAttribute("d")+newLineSegment); Рафаэль использует атрибут 'd' для внутренней установки строки пути, так что должен быть перекрестнымAFAICT, совместимый с браузером ( Обновление: на самом деле я ошибаюсь; это работает только для SVG-совместимых браузеров, а не VML), при этом обходя весь беспорядок кода, который нам не нужно запускать на внутреннемцикл

  3. когда закончите рисование, установите атрибут пути для элемента пути явным образом через API Рафаэля, чтобы он мог выполнять все необходимые действия по Element, например: elem.attr( {path: elem.node.getAttribute("d") })

Это достаточно хорошо работает на Chrome и других современных браузерах, на которых я тестировал.

Я закончил виджет пользовательского интерфейса jQuery для скетчпада, который использует это.Пожалуйста, оставьте комментарий, если вы найдете такую ​​вещь полезной, как открытый исходный код.Если будет интерес, я посмотрю, смогу ли я сделать это.

2 голосов
/ 23 декабря 2011

Похоже, вам нужно вызвать установочную версию .attr () для обновления дисплея.Кажется, работает следующее:

var e = paper.path("M0,0L100,100");
e.attr("path").push(["L",50,100]);
e.attr("path", e.attr("path"));

, хотя это выглядит довольно неуклюже.Однако я не вижу лучшего способа сделать это с помощью push ().

0 голосов
/ 23 декабря 2011

Я могу подтвердить, что это работает:

var arr = somePath.attrs.path;
arr.push(["L", x, y]);
somePath.attr({path: arr});
...