在创建节点之前计算绘制的SVG路径

Question

我想在创建节点之前计算并显示绘制路径的长度。其背后的想法是让用户在创建每个路径段之前查看每个路径段的长度，以便知道确切放置节点的位置。

我一直在使用gettotallength方法，但这会计算单击节点后路径的长度，使用户只能查看已创建路径的长度。

我正在使用jQuery。

干杯！

Answer 1

只需将元素visibility =“hidden”或opacity =“0”，使其不可见。如果你想知道最后一个段的长度，测量整个路径，然后测量路径的不可见副本，没有最后一个段并减去。

Answer 2

如果它是从最后一个绘制点到鼠标点的直线，则使用基本数学= 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());
};