javascript - 在创建节点之前计算绘制的 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" 使其不可见。如果您想知道最后一段的长度，请测量整个路径，然后测量没有最后一段的路径的不可见副本并减去。