Вычисление SVG-пути в том виде, в котором оно нарисовано, до создания узлов

Question

Я хотел бы рассчитать и отобразить длину пути, как он нарисован, прежде чем его узлы будут созданы. Идея заключается в том, чтобы позволить пользователю увидеть длину каждого сегмента пути до того, как он его создаст, чтобы знать, куда именно поместить узел.

Я использовал метод gettotallength, но он вычисляет длину пути после нажатия на узел, позволяя пользователю просматривать только длину пути, который он уже создал.

Я использую JQuery.

Ура!

Answer 1

Если это линия от последней нарисованной точки до точки мыши, используйте базовую математику = SQRT((x1-x2)^2 + (y1-y2)^2)

Единственным приемом будет преобразование координат экрана в пользовательские координаты. Вот функция, которую я использую, которая работает очень хорошо (пока)...

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

Answer 2

Просто сделайте элемент visibility="hidden" или opacity="0", чтобы он был невидимым. Если вы хотите узнать длину последнего сегмента, измерьте весь путь, затем измерьте невидимую копию пути без последнего сегмента и вычтите.