如何获取<g>内对象的绝对坐标团体? [英] How to get absolute coordinates of object inside a <g> group?

问题描述

这可能是一个常见问题解答，所以请随时为我指出另一个答案.这个话题很难搜索.

This may be a FAQ, so feel free to point me to another answer. The topic is difficult to search on.

如果我想使用 d3.js 来获取在 SVG 对象中显式声明的属性，或者我已经使用 D3 显式放置在那里的属性，我可以使用 d3.select 轻松获取该属性的值.例如，这会打印 300:

If I want to use d3.js to get an attribute that's explicitly declared in an SVG object, or that I've explicitly put there using D3, I can easily get the value of the attribute using d3.select. For example, this prints 300:

...
<circle id="mycircle" r="10" cx="100" cy="200">
...
d3.select("#mycircle").attr("cx", 300);
console.log(d3.select("#mycircle").attr("cx"));

如果我没有显式设置属性的值，而是从 <g> 组中隐式设置"了该怎么办?或者:如何使用代码找出 组的中心位置?我想要某种方法来确定 对象的绝对坐标系中 内的东西在哪里.如果我知道 <g> 在哪里，它在空间中的方向等等，我就能弄清楚它里面的点在哪里.我该怎么做?

What if I don't explicit set the value of the attribute, but it is implicitly "set" from a <g> group? Or: How can I use code to find out where a <g> group is centered? I'd like some way of determining where in the absolute coordinate system of the <svg> object the things inside the <g> are. If I knew where the <g> was, how it's oriented in space, etc., I could figure out where points inside it are. How can I do that?

BigBadaboom 在对 的回答的评论中发表评论这个问题继承的不是一对坐标，而是一个transform属性.所以我可以选择一个 并获取转换属性的值:

BigBadaboom remarks in a comment on an answer to this question that what is inherited is not a pair of coordinates, but a transform attribute. So I can select a <g> and get the value of the transform attribute:

console.log(d3.select("#mygroup").attr("transform"));

打印，例如:

"旋转(-125.93)翻译(0,-25)"

"rotate(-125.93)translate(0,-25)"

我是否必须解析它才能找出 在绝对坐标系中的位置?

Do I have to parse that to find out where the <g> is situated in the absolute coordinate system?

推荐答案

这里的其他人已经提到了 SVGLocatable.getBBox() 这对于抓取元素的边界框非常有用局部坐标系.不幸的是，正如您所注意到的，这并没有考虑对元素或其父元素所做的任何转换.

Others here have already mentioned SVGLocatable.getBBox() which is useful for grabbing the bounding box of an element in terms of its own local coordinate system. Unfortunately, as you noticed, this doesn't take into account any of the transformations done on the element or on its parent elements.

还有一些其他可用的函数可以帮助您处理这些转换.

There are a couple other functions available that will help you out a ton when dealing with those transforms.

SVGLocatable.getScreenCTM() 为您提供一个 SVGMatrix 表示从视口坐标转换为元素的本地坐标所需的转换.这很棒，因为它将考虑应用于它被调用的元素的变换，以及应用于父元素的任何变换.不幸的是，它还考虑了元素在屏幕上的确切位置，这意味着如果您在 svg 文档之前有内容，或者甚至只是它周围的一些边距，返回的矩阵将包含该空间作为翻译.

SVGLocatable.getScreenCTM() gives you an SVGMatrix representing the transformations needed to convert from the viewport coordinates to the local coordinates of your element. This is great because it will take into account the transforms applied to the element it is called on, and any transforms applied to parent elements. Unfortunately, it also takes into account where exactly the element is on the screen, which means if you have content before your svg document, or even just some margins around it, the returned matrix will include that space as a translation.

Element.getBoundingClientRect() 将允许您考虑该空间.如果你在 SVG 文档本身上调用这个函数，你就可以知道 SVG 在屏幕上偏移了多少.

Element.getBoundingClientRect() will allow you to account for that space. If you call this function on the SVG document itself, you can find out by how much the SVG is offset on the screen.

那么当你想在坐标系之间进行转换时，你所要做的就是将两者结合起来.这里 是一些关于如何SVGMatrix 有效.现在要知道的重要一点是 SVGMatrix 是一个具有六个属性的对象 a, b, c、d、e 和 f 表示如下转换:

Then all you have to do is combine the two when you want to convert between coordinate systems. HERE is some good info on how an SVGMatrix works. The important thing to know for now is that an SVGMatrix is an object with six properties a, b, c, d, e, and f which represent a transformation as follows:

假设您有一个变量 svgDoc，它是对 svg 文档的引用(不是 d3 选择，而是元素本身).然后，您可以创建一个函数，该函数将转换为 svg 元素 elem 的坐标系，如下所示.

Lets say you have a variable svgDoc which is a reference to the svg document (not a d3 selection, but the element itself). Then you can create a function that will convert to the coordinate system of an svg element elem as follows.

function convertCoords(x,y) {

  var offset = svgDoc.getBoundingClientRect();

  var matrix = elem.getScreenCTM();

  return {
    x: (matrix.a * x) + (matrix.c * y) + matrix.e - offset.left,
    y: (matrix.b * x) + (matrix.d * y) + matrix.f - offset.top
  };
}

然后，假设你想在 elem 中间放一个点，你可以这样做:

Then, say you wanted to put a dot in the middle of elem, you could do something like this:

var bbox = elem.getBBox(),
    middleX = bbox.x + (bbox.width / 2),
    middleY = bbox.y + (bbox.height / 2);

var absoluteCoords = convertCoords(middleX, middleY);

var dot = svg.append('circle')
  .attr('cx', absoluteCoords.x)
  .attr('cy', absoluteCoords.y)
  .attr('r', 5);

当然，您可能想要概括 convertCoords 函数，以便您可以传入目标元素，但希望这能让您朝着正确的方向前进.祝你好运！

Of course, you'd probably want to generalize the convertCoords function so you can pass in the target element, but hopefully that'll get you off in the right direction. Good luck!

一个更好的实现是为任何给定元素和 svg 文档上下文生成转换函数的工厂:

A better implementation would be a factory that generates a conversion function for any given element and svg document context:

function makeAbsoluteContext(element, svgDocument) {
  return function(x,y) {
    var offset = svgDocument.getBoundingClientRect();
    var matrix = element.getScreenCTM();
    return {
      x: (matrix.a * x) + (matrix.c * y) + matrix.e - offset.left,
      y: (matrix.b * x) + (matrix.d * y) + matrix.f - offset.top
    };
  };
}

给定与简单示例相同的 elem 和 svgDoc 可以如下使用:

This could be used as follows given the same elem and svgDoc as the naive example:

var bbox = elem.getBBox(),
    middleX = bbox.x + (bbox.width / 2),
    middleY = bbox.y + (bbox.height / 2);

// generate a conversion function
var convert = makeAbsoluteContext(elem, svgDoc);

// use it to calculate the absolute center of the element
var absoluteCenter = convert(middleX, middleY);

var dot = svg.append('circle')
  .attr('cx', absoluteCenter.x)
  .attr('cy', absoluteCenter.y)
  .attr('r', 5);

这篇关于如何获取<g>内对象的绝对坐标团体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！