获取矩形元素的屏幕像素坐标
获取矩形元素的屏幕像素坐标
提问于 2011-04-29 23:52:13
我正在尝试通过java脚本获取SVG中矩形的屏幕像素坐标。单击矩形后，我可以用getBBox()计算出它的宽、高、x和y位置。
但这些位置是原始位置。我想知道屏幕的位置。
例如，如果我操作整个SVG的viewBox，这些getBBox坐标与屏幕像素并不相同。考虑到当前的viewBox和svg元素的像素大小，有没有一个函数或方法可以获得坐标？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-04-30 01:21:10
演示：http://phrogz.net/SVG/screen_location_for_element.xhtml
var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
function screenCoordsForRect(rect){
var corners = {};
var matrix = rect.getScreenCTM();
pt.x = rect.x.animVal.value;
pt.y = rect.y.animVal.value;
corners.nw = pt.matrixTransform(matrix);
pt.x += rect.width.animVal.value;
corners.ne = pt.matrixTransform(matrix);
pt.y += rect.height.animVal.value;
corners.se = pt.matrixTransform(matrix);
pt.x -= rect.width.animVal.value;
corners.sw = pt.matrixTransform(matrix);
return corners;
}洋红色方块是HTML元素中绝对定位的div，使用屏幕空间坐标。当您拖动矩形或调整矩形大小时，将调用此函数并将角div移动到四个角上(第116-126行)。请注意，即使矩形处于任意嵌套变换中(例如蓝色矩形)，并且SVG被缩放(调整浏览器窗口的大小)，这也是有效的。
有趣的是，将其中一个矩形拖离SVG画布的边缘，并注意到屏幕空间的角停留在看不见的点上。
Stack Overflow用户
发布于 2011-04-30 17:23:05
您还可以检查elm.getScreenBBox()方法是否存在，该方法的作用与听起来一样。它是在SVG Tiny 1.2中定义的。
See the files here，它包括一个应该在所有浏览器中都能工作的getScreenBBox的后备实现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5834298
复制相关文章
相似问题