0

キャンバスに複数の要素があります。現在選択されている要素と交差/重複しているすべての要素を検索したい。

ラファエルJsでこれを見つける方法はありますか？

編集 さらに明確にするために、getByID（）によって要素を取得するとします。それと交差するすべての要素（すでにキャンバスに存在する）を取得する方法はありますか。

4

2 に答える 2

0

Raphael.isBBoxIntersect引数としてバウンディングボックスを受け入れるwhichを使用する必要があります（から返されElement.getBBoxます。

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

var circle2 = paper.circle(60, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle2.attr("fill", "blue");
// Sets the stroke attribute of the circle to white
circle2.attr("stroke", "#fff");

alert(
  Raphael.isBBoxIntersect(
    circle.getBBox(),
    circle2.getBBox()
  )
);

このコードの動作例：http：//jsbin.com/uwiyeg/1/edit

UPD。getIntersectionList「レンダリングされたコンテンツが指定された長方形と交差するグラフィック要素のリストを返す」SVGメソッドがあります。しかし、これはすべてのブラウザでサポートされているわけではないようです。

于 2012-12-15T14:28:38.600 に答える
0

もう少し考えてみてください。最善の解決策は、要素をパスに変換してから、それらが交差しているかどうかを比較することです。（私の例ではjQueryを使用しましたが、jQueryがなくても簡単に実行できます）。

intersectArray=new Array();  
paper.forEach(function (e) {
    isIntersection=Raphael.pathIntersection(currentElement.attr("path"), e.attr("path"));  //Need to check with currentElement
    if(!jQuery.isEmptyObject(isIntersection)) intersectArray[]=e.node.id; //assuming e has got ID. You can put any identifier for e.
}

私はそれを考えていません、rectそしてcircleあなたは道を得ることができます。ただし、パスに変換する関数を作成するのは非常に簡単rectです（x、yを知っているので、必要なのは幅と高さの組み合わせを追加することだけです）。このリンクcircleを使用します。

これができる関数をRaphaelに組み込んでもらいたいと思っていたのですが、ジョーカーが「最近は誰にも頼れないので、自分でやらなきゃいけないんですよね！」と言っていました。冗談だ。RaphaelJsはとてもきちんとしています。

于 2012-12-19T04:05:25.657 に答える