得到圆弧路径的中心，得到与屏幕坐标相关的x和y

Get the center of an arc path and get the x and y that relates to in screen coords

本文关键字：屏幕坐标 路径      更新时间：2023-09-26

我有一些圆弧组成一个圆，我需要做的是在点击圆弧时平移圆弧的中心点并放大。

我已经完成了翻译和调用的工作，但是我得到的圆弧中心点需要翻译到屏幕坐标(或更大的svg容器坐标，而不是100%)，以便翻译实际到正确的地方，并将圆弧放在屏幕(相机)的中间。

我在这里四处看了看，没有多少快乐。我确实知道如何通过使用svg的边界框来获得圆弧的中心点。但是，当我尝试其他的事情时，我却没有得到更多的快乐。

干杯马克。

代码
var coords = getCentroid(arcParthObj);
 //seperated scale and translate as when both together the position it translates to changes (to the wrong one)
RadarDraw.ZoomListener.scale(6);
RadarDraw.ZoomListener.event(svg.transition().duration(500));
RadarDraw.ZoomListener.translate([-text[0], -text[1]]);
RadarDraw.ZoomListener.event(svg.transition().duration(500));
function getCentroid(selection) {
    var element = selection.parentNode;
    // use the native SVG interface to get the bounding box
    var bbox = element.getBBox();
    // return the center of the bounding box
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}

不确定这是否是您正在寻找的，但我有一个用于处理从屏幕位置到缩放svg坐标的事件坐标转换的函数:

   function handleEvent(e) {
        var root= el.ownerSVGElement || el; 
        var pt = root.createSVGPoint();
        var ctm = root.getScreenCTM().inverse();
        pt.x = e.pageX; 
        pt.y = e.pageY;
        return pt.matrixTransform(ctm);
   }

这是一个有点简化，但它的技巧。我不得不缓存pt和ctm变量，因为如果调用得太快，浏览器有时不能正确地创建点/矩阵。

无论如何，这个问题的答案提到:在SVG中获取路径的维度

相关文章：