1

これは100％簡単だと思っていましたが、結局のところ、Raphael.jsで作成および操作されたsvgのx属性とy属性が何を意味するのか理解できません。キャンバスに対するオブジェクトの左上隅の座標だと思いましたが、今はよくわかりません。

キャンバス（）を作成し、それに画像または長方形を追加した後、たとえば、メソッド（たとえば）var paper = new Raphael(container,width,height)を使用して「x」属性と「y」属性を取得すると、両方とも0になります。ただし、それを回転させるとオブジェクトを作成してから、xとyの値を再度取得すると、値は、キャンバスに対するオブジェクトの左上隅の位置を反映しなくなります。attrobject.attr("x")

誰かが私にこれを説明してもらえますか？

4

2 に答える 2

2

@afaf12の答えが無頓着に半分の距離しか行かないのではないかと心配しています。彼は、変換ロジックが特定の要素の基本的な属性の後に発生し、それらに影響を与えないことは絶対に正しいですが、変換が適用された後にその要素のxとyを取得することは確かに可能です。次のように、 getBBoxメソッドを使用することをお勧めします。

var bbox = elem.getBBox();
console.log("Transformed coordinates of element are %s,%s", bbox.x, bbox.y );

いくつかの注意が必要です。これにより、要素のバウンディングボックスが返されます。これは、多くの場合、要素が占めるスペースのスーパーセットです。したがって、返されるポイントが要素内にあるという保証はありません。

パスを使用している場合は、別の方法が発生します--path。getPointAtLengthは変換された座標でも機能するため、を呼び出すことでパスの先頭のx、yオフセットを取得できます。

var coord = elem.getPointAtLength(0);
console.log("Transformed coordinates of path are %s,%s", coord.x, coord.y );
于 2012-10-22T16:51:55.460 に答える
1

回転は変換であり、オブジェクトのxとyは変更されません。 http://raphaeljs.com/reference.html#Element.transform

于 2012-10-22T16:00:52.903 に答える