限制一个对象留在另一个对象内
这与 SVG 有关，我有一个由保持静态的路径组成的大型 SVG 对象。只需按一下按钮，我就可以在较大的对象内创建另一个 SVG 对象。可以用鼠标向下拖动第二个对象。
问题：
现在我想添加一个限制，以便创建的第二个对象不能冒险到主对象之外。
我尝试使用“mouseup”进行限制，但这不起作用，因为限制是根据第二个对象上的光标点而不是第二个对象的边框应用的。
希望有人能帮忙。
更新：
@Phrogz：我们一直在努力让 Kevin 的代码正常工作，但正在努力获得任何结果。我们有一个附加到 onmouseup 的函数来找出对象在下面路径上的相交点。
该函数应该给出交集和交集的结果。发出该函数已执行的警报。它没有给出任何响应，这让我们怀疑该函数是否正在执行。
这是主要代码：
var path=svgDoc.getElementById("path");
var str=intersectPathShape(path,DragTarget);
alert(str)
Phrogz，对此有什么想法吗？
This is related to SVG, I have a large SVG object made of paths which stays static. With a press of a button, I can create another SVG object inside the larger object. The second object can be dragged with the mousedown.
PROBLEM:
Now I want to add a restriction so that the second object created cannot venture outside of the main object.
I tried using 'mouseup' for restriction but that does not work because the restriction is applied according to the cursor point on the second object, rather than the border of the second object.
Hope someone can help.
UPDATE:
@Phrogz : We have been trying to get Kevin's code to work but are struggling to get any results. We have a function attached to onmouseup to find out the intersected points of the object on the underneath path.
The function is suppose to give the results of the intersection & give an alert that the function has been exected. Its not giving anything in response, leading us to wonder whether the function is being executed at all.
Here is the main code:
var path=svgDoc.getElementById("path");
var str=intersectPathShape(path,DragTarget);
alert(str)
Phrogz, any thoughts on this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要使用一个交集库，例如 Kevin Lindsey 的这个库检测路径何时重叠并防止重叠。 （他还提供了他的代码演示。）
取决于您如何实现拖动时，您可能还需要检查两者的边界框项以确保一个包含在另一个中（因为将子项完全拖到父项之外会导致它们不相交，但也不是合法的位置）。
最简单的代码是存储子项的最后位置，并在检测到交叉点时将其返回到该位置。但是，在快速拖动的情况下，这可能会导致子级在实际未接触的位置停止拖动。为了获得更好的用户体验，您可能需要尝试对最后一个已知良好位置和当前位置之间的中间偏移量进行二分搜索，以找到该路径上合法的最近点。
You will need to use an intersection library like this one by Kevin Lindsey to detect when the paths overlap and prevent it. (He also provides demos of his code.)
Depending on how you implement your dragging, you may also need to check the bounding box of the two items to ensure that one is contained in the other (since dragging the child completely outside the parent would cause them not to intersect, but also not be a legal position).
The simplest code would be to store the last position of the child and return it to that position when an intersection is detected. Under fast dragging, though, this might cause the child to stop being dragged at a spot that is not actually touching. For a better user experience, you may want to try a binary search of intermediary offsets between the last known-good position and the current position to find the closest point along that path that is legal.
Kayote，
我想我在另一个问题中回答了这个问题。简短的版本是看看这个 github 项目：
https://github.com/thelonious/js-intersections
特别是此文件中的 loadShapes 函数：
https ://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js
您需要为每个节点类型实例化一个特定对象，然后将它们传递给 Intersection.intersectShapes。
哈特哈，
凯文
Kayote,
I think I answered this in another question. The short version is have a look at this github project:
https://github.com/thelonious/js-intersections
In particular, the loadShapes function in this file:
https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js
You will need to instantiate a specific object per node type then pass those to Intersection.intersectShapes.
HTH,
Kevin