获取矩形元素的屏幕像素坐标

Getting the Screen Pixel coordinates of a Rect element

本文关键字：屏幕 像素 坐标 元素 获取      更新时间：2023-09-26

我试图通过java脚本在SVG中获得矩形的屏幕像素坐标。当矩形被点击时，我可以通过getBBox()计算出它的宽度、高度、x和y位置。

但这些位置是原始位置。我想要屏幕位置

例如，如果我操纵整个SVG的viewBox，这些getBBox坐标将不再与屏幕像素相同。有没有函数或方法可以得到坐标考虑当前的viewBox和像素大小的svg元素?

Demo: 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画布的边缘拖出，并注意屏幕空间的角停留在看不见的点上方。

您还可以检查是否存在elm.getScreenBBox()方法，它的作用就像它听起来的那样。它在SVG Tiny 1.2中定义。

请参阅这里的文件，其中包括getScreenBBox的后备实现，应该在所有浏览器中工作。

相关文章：