Calculating an SVG path as it is drawn, before nodes are created

Question

I would want to calculate and display the length of a path as it drawn, before its nodes are created. The idea behind it is letting the user see the length of each path segment before he creates it so as to know where exactly to put the node.

I have been using the gettotallength method but this calculates the length of a path after the node is clicked enabling the user to only view the length of the path he already created.

I am using jQuery.

Cheers!

Answer 1

If it is a line from the last drawn point to the point of the mouse then use basic math = SQRT((x1-x2)^2 + (y1-y2)^2)

The only trick will be converting from screen co-ordinates to user co-ordinates. Here is a function I use that works really well (so far)...

function getMousePos(evt) 
{
    var svgPoint = document.documentElement.createSVGPoint();

    evt = evt || window.event;

    if (typeof evt.pageX != 'undefined') // Firefox
    {
      svgPoint.x = evt.pageX;
      svgPoint.y = evt.pageY;
    }
    else // IE et al
    {
      svgPoint.x = document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset || 0;
      svgPoint.y = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;
    }

    return svgPoint.matrixTransform(document.documentElement.getScreenCTM().inverse());
};