2011-01-30 2 views
2

Как найти абсолютное положение бумаги/холста при использовании библиотеки JavaScript Raphael?Поиск абсолютного положения бумаги/холста в библиотеке JavaScript Рафаэля

Например, предположим, что минимальный рабочий пример выглядит следующим образом:

<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, что оно живет в? (В этом примере я могу это знать, но моя фактическая ситуация делает знание идентификатора div намного сложнее.)

ответ

5

OK. Я вижу, что должно быть сейчас:

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

Это похоже на работу как с IE 8.0, так и с Chrome 9.0.

1

Чтобы получить позицию абс вашей работы Рафаэля, вы можете использовать JQuery:

$(paper.canvas).offset()

+0

Внимание: этот фрагмент кода дает разные результаты в браузере и его результат изменяется с состоянием бумаги ... – lajarre

0

Принятое решение не работает для меня, это дает мне х = -1 и у = -1 , так что если у кого-то есть такая же проблема, я решил это так:

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