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!

score 0 · Answer 1 · answered Jan 27 '13 at 20:34

0

Just make the element visibility="hidden" or opacity="0" so it's invisible. If you want to know the length of the last segment, measure the whole path then measure an invisible copy of the path without the last segment and subtract.

answered Jan 27 '13 at 20:34

Robert Longson

118,664
26
252
242

Thanks for you answer! Even if i make it invisible the path is still not drawn so there is nothing for the gettotallength to use for calculating a length. Any other ideas? – nicholaswmin Jan 27 '13 at 20:39
The idea behind this is that the user has a star for example drawn on a regular paper with its dimensions written down and he wants to replicate that exact star on svg-edit. I need to show in a div the dimensions of the last path segment before he clicks to create the node so that he knows where to put the node(something with mouseposition might work???) I am trying to fugre this out for ages. – nicholaswmin Jan 27 '13 at 20:42
Add the invisible path to the document so that it IS drawn, then measure it. – Robert Longson Jan 27 '13 at 21:00
The invisible path cannot exist before the user draws something since the user hasn't yet drawn anything. The document is just a blank canvas. okay say the user has decided to draw a star. How would that path exist beforehand since the svg-edit doesnt know what the user wants to draw and the user hansnt created anthing yet? – nicholaswmin Jan 27 '13 at 21:12
What i need is creating a point. Then the user can drag his mouse and a ''virtual'' line appears that allows him to draw another point somewhere and create a path that connects those 2 points. I want when the user is drawing that virtual line(hasnt yet decided where to put his second point'', a div that states the length of the virtual line. As the mouse moves, the div displays the length of the virtual line. If he decided to click then the path would be created and the div would reset to zero displaying the next segment virtual line length and so on. – nicholaswmin Jan 27 '13 at 21:14
So create an invisible path up to where the mouse is, measure it and display the result - the length of the existing path. – Robert Longson Jan 27 '13 at 21:17
right, you mean using an interval timer that automatically places nodes all the time and measures that path? Wouldn't that be awfully intensive??? – nicholaswmin Jan 27 '13 at 21:26
Yes, you could just adjust the last node of the hidden path using the SVG DOM as the mouse moves, you wouldn't need to recreate the entire node, that should be O(1). – Robert Longson Jan 27 '13 at 22:16
that would be impossible i think because as the mouse would move the nodes would be created evrywhere resulting in simply a "mouse tracking path". This would give me a total length of mouse movements not, path segment. – nicholaswmin Jan 27 '13 at 22:27
I don't see why. A path has segments and you can adjust each one with the SVG DOM. Just move the last segment as the mouse moves. – Robert Longson Jan 27 '13 at 22:45

score 0 · Accepted Answer · answered Jan 28 '13 at 19:58

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

BTW the function I provided should also work when the view is zoommed. — BigMac66, Jan 28 '13 at 20:06
Post your existing code (trimmed down to a minimum) and I will see what I can do when I get a spare moment... — BigMac66, Jan 29 '13 at 13:59

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

2 Answers2