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

aga*_*ett 2 javascript css-position raphael html5-canvas

使用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>
Run Code Online (Sandbox Code Playgroud)

如何从页面顶部找到纸张的绝对x和y坐标,而不知道它所在的div的ID?(在这个例子中,我可以知道,但是我的实际情况使得知道div ID要复杂得多.)

aga*_*ett 5

好.我看到它现在应该是什么:

var x = this.paper.canvas.offsetLeft;
var y = this.paper.canvas.offsetTop;
Run Code Online (Sandbox Code Playgroud)

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