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

【问题标题】：Calculating an SVG path as it is drawn, before nodes are created在创建节点之前计算绘制的 SVG 路径
【发布时间】：2013-01-29 03:58:05
【问题描述】：

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

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

我正在使用 jQuery。

干杯！

【问题讨论】：

标签： javascript svg jquery-svg

【解决方案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());
};

【讨论】：

顺便说一句，当视图被缩放时，我提供的功能也应该可以工作。
发布您现有的代码（精简到最低限度），我会在有空的时候看看我能做什么......

【解决方案2】：

只需使元素可见性=“隐藏”或不透明度=“0”，使其不可见。如果您想知道最后一段的长度，请测量整个路径，然后测量没有最后一段的路径的不可见副本并减去。

【讨论】：

感谢您的回答！即使我让它不可见，路径仍然没有被绘制，所以 gettotallength 没有任何东西可以用来计算长度。还有其他想法吗？
这背后的想法是，用户在一张普通的纸上画了一颗星星，并写下了它的尺寸，他想在 svg-edit 上复制那个精确的星星。在他单击创建节点之前，我需要在 div 中显示最后一个路径段的尺寸，以便他知道将节点放在哪里（带有鼠标位置的东西可能有用？？？）我试图解决这个问题已经很久了。
将不可见路径添加到文档中，以便绘制它，然后测量它。
在用户绘制之前不存在不可见路径，因为用户还没有绘制任何东西。该文档只是一个空白画布。好吧，说用户决定画一颗星星。既然 svg-edit 不知道用户想要绘制什么并且用户还没有创建任何东西，那么该路径将如何预先存在？
我需要的是创建一个点。然后用户可以拖动鼠标并出现一条“虚拟”线，允许他在某处绘制另一个点并创建连接这两个点的路径。我想要当用户绘制该虚拟线时（尚未决定将他的第二个点放在哪里''，一个表示虚拟线长度的 div。当鼠标移动时，该 div 显示虚拟线的长度。如果他决定点击然后创建路径，并且 div 将重置为零，显示下一段虚拟线长度等等。