1

より多くの要素を描画するためにさらに計算を実行するために、紙の最後のパスまたは円を見つける必要があり、呼び出すとpaper.bottom最後の要素のみが取得されます。bottom.pathたとえば、特定のタイプの形状を取得しbottom.circleたり、n番目の子をトラバースしたりする方法はありますか？

jQueryセレクターからプロパティを取得できないため、jQueryセレクターの使用は避けたいと思います。

図形が表示された紙の例：

var paper = Raphael('paper',500,500);
var c1 = paper.circle(100,100,50)
var p1 = paper.path("M10 20l70 0")
var c2 = paper.circle(200,100,50)
4

2 に答える 2

1

一番下の要素をチェックすると、（Z軸に沿って）一番下の要素が得られますが、これは望ましくありません。要素のZ順序が、おそらく呼び出しによって変更されElement.toBack()、チェックが完全に無効になる場合を考えてみます。

代わりに、elements配列を反復処理し、特定のタイプの最後の要素（たとえば、 circle ）を取得することによって、よりセマンティックなアプローチを目指すことができます。

Raphaëlでは、組み込みの関数セットを拡張することもできるため、その目的のためだけに関数を紙の要素にアタッチできます。false次のスニペットは、渡されたタイプの最後の要素を紙から返す、またはそのような要素が見つからなかった場合に、そのような関数の例を示しています。

Raphael.fn.last = function(type) {
    var element;
    this.forEach(function(el) {
        if (el.type == type) {
            element = el;
        }
    });
    return element || !!element;
};

紙の要素をインスタンス化する前に、必ずこの関数をアタッチしてください。それを呼び出すだけで、目的の要素タイプを渡すことができます。

var r = Raphael(paper, '100%', '100%');
// ...
// add elements etcetera
// ...
var lastCircle = r.last('circle');

提案された実装の場合、これは重い操作になる可能性があることに注意してください-紙に多くの要素が含まれている場合、ここでの目的は、機能拡張の概念を提供し、思考プロセスを開始することです。機能を向上させて効率を上げてください。

ライブデモ

于 2012-11-22T22:16:19.047 に答える
1

n番目の子をトラバースする方法について：パスをセットに入れるだけで、通常の配列と同じようにインデックスが作成されます。そのセットから任意の番号を簡単に呼び出して、そのプロパティに完全にアクセスできます。

var myPaper = Raphael('container', '800', '600');

myPaper.setStart();
var circ1 = myPaper.circle(50, 50, 40);
var circ2 = myPaper.circle(150, 50, 40);
var circ3 = myPaper.circle(250, 50, 40);
var circ4 = myPaper.circle(350, 50, 40);
var allCircles = myPaper.setFinish();

allCircles[2].attr({fill: "blue"});

</ p>

http://jsfiddle.net/eE7xS/

于 2012-11-22T22:57:44.370 に答える