javascript - 在 Raphael JavaScript 库中查找纸/ Canvas 的绝对位置

标签 javascript html5-canvas css-position raphael

如何在使用 Raphael JavaScript 库时找到纸张/ Canvas 的绝对位置?

例如,假设最小的工作示例如下:

<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 的情况下从页面顶部找到纸张的绝对 x 和 y 坐标? (在例子中,我可以知道,但我的实际情况让知道div ID变得更加复杂。)

最佳答案

好的。我现在明白它应该是什么了:

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

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

关于javascript - 在 Raphael JavaScript 库中查找纸/ Canvas 的绝对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4841151/

相关文章:

javascript - ng-repeat 构建时间表

javascript - 为什么在 FabricJS 中没有任何缩进的靠近放置的对象彼此之间有一个空格

html - 如何使用html css居中对齐

html - CSS img 引起麻烦

html - 绝对定位的元素——它们可以在相对定位的 sibling 或 parent 之下吗?

javascript - 如何在asp上调用JS函数:LinkButton click event

java - 如何将jsp页面中的javascript变量传递到另一个java文件?

javascript - 如何在不同的车速表中显示数值

javascript - 如何在json文件中添加或插入记录

javascript - 如何使用 FlashCC 和 CreateJS 制作展开式广告?