Snap.svg确定沿路径的拖动距离 [英] Snap.svg determine drag distance along a path

问题描述

参考此处并更新以供使用使用Snap.svg 这里，我想更好地了解提供的方式gradSearch函数实际上有效（这有点过头），以及这种方法是否有任何好的替代方案？

  gradSearch = function（l0，pt）{
 l0 = l0 + totLen; 
 var l1 = l0，
 dist0 = dist（path.getPointAtLength（l0％totLen），pt），
 dist1，
 searchDir; 
 
 if（dist（path.getPointAtLength（（l0-searchDl）％totLen），pt）> 
 dist（path.getPointAtLength（（l0 + searchDl）％totLen），pt） ）{
 searchDir = searchDl; 
} else {
 searchDir = -searchDl; 
} 
 
 l1 + = searchDir; 
 dist1 = dist（path.getPointAtLength（l1％totLen），pt）; 
 while（dist1< dist0）{
 dist0 = dist1; 
 l1 + = searchDir; 
 dist1 = dist（path.getPointAtLength（l1％totLen），pt）; 
} 
 l1  -  = searchDir; 
 return（l1％totLen）; 
} 
  

解决方案

花了一些时间才明白代码，但这是我理解它的工作方式（试图简化说明）：

首先，路径上可拖动对象的位置记录为 l0 （请注意，这是 L0 ，首次查看代码时容易与数字10混淆。）

从新点（鼠标拖动到的位置）到路径上的位置的距离记录为 dist0 。

if 语句然后确定要拖入的方向。它通过添加 searchDl 路径位置的值（即沿路径的长度），并减去相同的值并查看哪个更接近鼠标位置。

一旦知道要移入哪个方向，它就会使用而循环继续通过 searchDl siz e直到路径上的点与鼠标位置之间的距离尽可能低。

然后返回路径上的新位置。 / p>

通过将 searchDir 更改为更大的值，您可以以更大的增量移动，它可以更快地计算，但代价是精度（如果我已正确理解代码）。

As referenced here and updated for use with Snap.svg here, I'd like to better understand how the provided gradSearch function actually works (it's a bit over my head), and whether there are any good alternatives to this approach?

gradSearch = function (l0, pt) {
    l0 = l0 + totLen;
    var l1 = l0,
        dist0 = dist(path.getPointAtLength(l0 % totLen), pt),
        dist1,
        searchDir;

    if (dist(path.getPointAtLength((l0 - searchDl) % totLen), pt) > 
       dist(path.getPointAtLength((l0 + searchDl) % totLen), pt)) {
        searchDir = searchDl;
    } else {
        searchDir = -searchDl;
    }

    l1 += searchDir;
    dist1 = dist(path.getPointAtLength(l1 % totLen), pt);
    while (dist1 < dist0) {
        dist0 = dist1;
        l1 += searchDir;
        dist1 = dist(path.getPointAtLength(l1 % totLen), pt);
    }
    l1 -= searchDir;
    return (l1 % totLen);
}

解决方案

Took me a while to understand the code, but this is how I understand it to be working (trying to keep the explanation simplified):

First the position of the draggable object on the path is recorded as l0 (Note that this is L0, easy to confuse with the number 10 when first looking at the code).

The distance from the new point (where mouse has dragged to) to the position on the path is recorded as dist0.

The if statement then determines which direction to drag in. It does this by adding searchDl value to the path position (i.e. length along the path), and subtracting the same value and seeing which is closer to the mouse position.

Once it knows which direction to move in, it uses the while loop to keep adding/subtracting the position by the searchDl size until the distance between the point on the path and the position of the mouse is as low as it can get.

It then returns the new position on the path.

By changing searchDir to a larger value you can move in larger increments and it can calculate faster at the expense of precision (If I've understood the code correctly).

这篇关于Snap.svg确定沿路径的拖动距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！