2011-01-30 8 views
2

Raphael JavaScriptライブラリを使用しているときに用紙/キャンバスの絶対位置を見つけるにはどうすればよいですか?例えばRaphael JavaScriptライブラリのペーパー/キャンバスの絶対位置の特定

、次のように最小限の作業例があるとします私はそのdiv要素のIDを知らなくても、ページの最上部からの絶対xと紙のy座標を見つけるにはどうすればよい

<html> 
<head> 
<script type="text/javascript" src="raphael.js"></script> 
<script> 
    window.onload = function() { 
     var size = 600; 
     var paper = new Raphael(document.getElementById("canvas_container"), 
           size, size); 
     var c = paper.circle(100, 100, 50).attr({fill: "#00f"}); 
     var x = 0; // get the paper's absolute x coordinate 
     var y = 0; // get the paper's absolute y coordinate 
     document.getElementById("coordinates").innerHTML = x + " " + y; 
    }; 
</script> 
<style type="text/css"> 
    #canvas_container { 
     width: 600px; 
     margin-left: auto; 
     margin-right: auto; 
     border: 1px solid #aaa; 
    } 
</style> 
</head> 
<body> 
    <p id="coordinates"></p> 
    <div id="canvas_container"></div> 
</body> 
</html> 

それは住んでいます? (例ではわかりますが、私の実際の状況でdiv IDがもっと複​​雑になっていることが分かります)

答えて

5

OK。私は今それが何であるかを参照してください:

var x = this.paper.canvas.offsetLeft; 
var y = this.paper.canvas.offsetTop; 

IE 8.0と9.0の両方で正しく動作するようです。

1

あなたのラファエル紙の腹筋の位置を取得するには、あなたはjQueryのを使用することができます。

$(paper.canvas).offset()

+0

注意:コードのこの作品は、異なるブラウザ間での結果と紙の状態とその結果の変化を与えます... – lajarre

0

受け入れられた溶液を私のために働いていない、それは= X私を与え-1とy = -1誰かが同じ問題を抱えているので、もし、私はそれをこのように解決:

var x = paper.canvas.parentNode.offsetLeft; 
var y = paper.canvas.parentNode.offsetTop;