Question

我有许多构成圆的圆弧，我需要做的是点击圆弧，平移圆弧的中心点并放大。

我已经完成了翻译和剥落的工作，但我得到的弧的中心点需要转换为屏幕坐标（或更大的svg容器坐标，而不是100％），以便翻译实际上转到正确的位置并将弧线放在屏幕中间（相机）。

我在这里环顾四周，并没有太多的快乐。我确实通过使用svg的边界框来了解如何通过这里获得弧的中心点。但是，尝试我遇到的其他事情，我没有更多的快乐。

干杯标记

CODE

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];
}

Answer 1

不确定这是否是您正在寻找的，但我有一个功能，我用来处理从屏幕位置到缩放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变量，因为如果调用太快，浏览器有时不能正确创建点/矩阵。

无论如何，这个问题的答案提到了它：Get dimension of a path in SVG

获取弧形路径的中心并获得与屏幕坐标相关的x和y

1 个答案: