Restrict An Object To Stay Within Another Object

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 o

Solution 1:

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.

Solution 2:

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