0

私はsvg-edit、より具体的にはMark McKays Method draw: https://github.com/duopixel/Method-Drawの修正を行っています。

私が見つけたこの Raphael ライブラリを使用したい: https://github.com/poilu/raphael-booleanこれにより、キャンバス内のパスでブール (セット) 操作を実行できます。

これで、エディター内に関数を起動するボタンを実装しました。

 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 はキャンバスに別の名前を使用しているため、行ですが、どうすればよいかわかりません。

私はこれに苦労してきたので、どんな助けも深く感謝します.

更新: このライブラリは、複数オブジェクトの溶接、自己交差、およびその他の多くのケースを処理できません。2 つの単純なオブジェクトに対して操作を実行する場合にのみ機能します。これは当面の質問とは直接関係ないかもしれませんが、とにかく言及するのが賢明だと思いました.

SVG 要素に対するブール演算を探している場合は、この質問を参照してください: SVG パスに対するブール演算

4

1 に答える 1

1

ここに示すように、投稿したコードは単独で動作します: http://jsfiddle.net/5SaR3/

Raphael コンストラクタ行を次のように変更できるはずです。

var paper = Raphael(canvas);

canvas は、svg-edit によって使用される SVG 要素へのオブジェクト参照です。

于 2013-03-05T22:39:06.350 に答える