javascript - 限制一个对象留在另一个对象内

Question

这与 SVG 有关，我有一个由保持静态的路径组成的大型 SVG 对象。通过按下按钮，我可以在较大的对象中创建另一个 SVG 对象。第二个对象可以用鼠标向下拖动。

问题:
现在我想添加一个限制，以便创建的第二个对象不能在主对象之外冒险。

我尝试使用“mouseup”进行限制，但这不起作用，因为限制是根据第二个对象上的光标点而不是第二个对象的边框应用的。

希望有人能帮忙。

更新:

@Phrogz:我们一直在努力让 Kevin 的代码正常工作，但正在努力获得任何结果。我们有一个附加到 onmouseup 的函数来找出对象在下方路径上的相交点。

该函数假设给出交集的结果并给出函数已执行的警报。它没有给出任何响应，让我们怀疑函数是否正在执行。

主要代码如下:

var path=svgDoc.getElementById("path");


var str=intersectPathShape(path,DragTarget);
     alert(str)

Phrogz，对此有什么想法吗？

Answer 1

您将需要使用类似 this one by Kevin Lindsey 的交集库检测路径何时重叠并防止重叠。 (他还提供了 demos of his code 。)

根据您实现拖动的方式，您可能还需要 check the bounding box两个项目中的一个以确保一个包含在另一个项目中(因为将子项目完全拖到父项目之外会导致它们不相交，但也不是合法的位置)。

最简单的代码是存储 child 的最后位置，并在检测到交叉点时将其返回到该位置。但是，在快速拖动下，这可能会导致 child 在实际上没有接触的地方停止被拖动。为了获得更好的用户体验，您可能想要尝试对最后一个已知良好位置和当前位置之间的中间偏移量进行二分搜索，以找到该路径上合法的最近点。