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

Question

I have a number of arcs that make up a circle and what I need to do is on the click of an arc translate the center point of the arc and zoom in.

I have done the work for translating and scalling but the center point i get for the arc needs translating to screen coords (or the larger svg container coords, not 100% on that) so that the translate actually goes to the correct place and puts the arc in the middle of the screen (camera).

I have looked around on here and not had much joy. I did get the way how to get the center point of an arc off of here by using the svg's bounding box. But trying the other things I have come across I have not had anymore joy.

Cheers Mark

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

It would help if you could show the code that you've produced so far (preferably in something like a jsfiddle). — Lars Kotthoff, Aug 05 '14 at 12:55
Hi Lars,There is not much code to it for what i have at the minute so I have just edited the post above to include it. Cheers — markblue777, Aug 05 '14 at 13:11

score 0 · Answer 1 · edited May 23 '17 at 11:49

Not sure if this is what you're looking for, but I've got a function I used to handle the translation of event coords from the screen position into scaled svg coords:

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

This is a bit simplified, but it does the trick. I've had to cache the pt and ctm vars because the browser sometimes didn't create the point / matrix properly if called too quickly.

Anyway, the answer to this question mentions it: Get dimension of a path in SVG

For some reason using this would not work. the point i got on screen and translating to svg space was just not correct. I have changed how im getting the centre now and it seems to ok — markblue777, Aug 11 '14 at 23:53

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

1 Answers1