Question

所有

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

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

我尝试使用'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这两个项目，以确保一个包含在另一个项目中（因为将子项完全拖到父项之外会导致它们不相交，但也不是法律地位。）

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

Answer 2

Kayote，

我想我在另一个问题上回答了这个问题。简短的版本是看看这个github项目：

特别是此文件中的loadShapes函数：

您需要为每个节点类型实例化一个特定对象，然后将它们传递给Intersection.intersectShapes。

HTH，凯文