Интеграция булевых операций Poilu Raphael (объединение, вычитание) с SVG-редактированием

Я делаю модификацию svg-edit, более конкретно, метод Mark McKays draw: https://github.com/duopixel/Method-Draw.

Я хочу использовать эту библиотеку Raphael, которую я нашел: https://github.com/poilu/raphael-boolean которая позволяет мне выполнять логические (set) операции над путями в пределах моего холста.

Теперь я реализовал кнопку в редакторе, которая запускает функцию:

 var paper = Raphael("canvas", 250, 250);

var path = paper.path("M 43,53 183,85 C 194,113 179,136 167,161 122,159 98,195 70,188       z");
path.attr({fill: "#a00", stroke: "none"});

var ellipse = paper.ellipse(170, 160, 40, 35);
ellipse.attr({fill: "#0a0", stroke: "none"});


var newPathStr = paper.union(path, ellipse);

//draw a new path element using that string
var newPath = paper.path(newPathStr);
newPath.attr({fill: "#666"});

// as they aren't needed anymore remove the other elements
path.remove();
ellipse.remove();

Хорошо, после нажатия кнопки редактор не должен вернуть объединенный (сварной) путь с эллипсом?

или я ошибаюсь?

Я полагаю, что что-то должно измениться с помощью var paper = Raphael("canvas", 250, 250); строка, так как svg-edit использует другое имя для холста, но я понятия не имею, как это сделать.

Любая помощь будет высоко ценится, так как я некоторое время боролся с этим.

ОБНОВЛЕНИЕ: Эта библиотека не может обрабатывать сварку нескольких объектов, самопересечения и многие другие случаи. Это работает, только если мы хотим выполнить операции над двумя простыми объектами. Возможно, это не имеет непосредственного отношения к рассматриваемому вопросу, но я подумал, что все равно стоит упомянуть об этом.

Обратитесь к этому вопросу, если вы ищете логические операции над элементами SVG: логические операции над путями SVG

Источник

1 ответ

Решение

Размещенный вами код работает изолированно, как показано здесь: http://jsfiddle.net/5SaR3/

Вы должны иметь возможность изменить строку конструктора Raphael на что-то вроде:

var paper = Raphael(canvas);

где canvas - это объектная ссылка на элемент SVG, используемый svg-edit.

Источник
Другие вопросы по тегам