在Raphael JavaScript库中查找纸张/画布的绝对位置_Javascript_Html5 Canvas_Css Position_Raphael

在Raphael JavaScript库中查找纸张/画布的绝对位置

javascript html5-canvas

在Raphael JavaScript库中查找纸张/画布的绝对位置,javascript,html5-canvas,css-position,raphael,Javascript,Html5 Canvas,Css Position,Raphael,使用Raphael JavaScript库时，如何找到纸张/画布的绝对位置例如，假设最小工作示例如下所示： <html> <head> <script type="text/javascript" src="raphael.js"></script> <script> window.onload = function() { var size = 600; var paper = new Rap

使用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>


window.onload=函数（）{
变量大小=600；
var paper=new Raphael（document.getElementById（“canvas_容器”），
大小,大小),；
VarC=纸.圆（10010050）.attr（{fill:#00f}）；
var x=0；//获取纸张的绝对x坐标
var y=0；//获取纸张的绝对y坐标
document.getElementById（“坐标”）.innerHTML=x+“”+y；
};
#帆布集装箱{
宽度：600px；
左边距：自动；
右边距：自动；
边框：1px实心#aaa；
}

在不知道纸张所在div的ID的情况下，如何从页面顶部找到纸张的绝对x和y坐标？（在本例中，我可以知道这一点，但我的实际情况使了解div ID变得更加复杂。）

好的。我现在明白了：

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

这似乎在IE 8.0和Chrome 9.0上都能正常工作。

要获得Raphael论文的abs位置，可以使用jQuery：

$（paper.canvas）.offset（）

接受的解决方案对我不起作用，它给了我x=-1和y=-1，因此如果有人有相同的问题，我可以这样解决：

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

注意：这段代码在浏览器中给出不同的结果，其结果会随着纸张状态的变化而变化。。。