Scriptographer offers various functionalities for testing the overlapping of paths and finding their intersections.
To find out if one path intersects another, we can use path.intersects(path):
// Create a circular path at {x: 100, y: 100}, with a radius of 50:
var blue = new Path.Circle([100, 100], 50);
blue.strokeColor = 'blue';
// Create a second circular path that overlaps the first path:
var red = new Path.Circle([50, 100], 50);
red.strokeColor = 'red';
console.log(red.intersects(blue)); // true
We can find out if an item is contained within the interior of a path by using path.contains(item):
// Create a circular path at {x: 100, y: 100}, with a radius of 50:
var blue = new Path.Circle([100, 100], 50);
blue.strokeColor = 'blue';
// Create a second circular path that overlaps the first path,
// but isn't contained within its interior:
var red = new Path.Circle([50, 100], 40);
red.strokeColor = 'red';
// This will return false, because the red path isn't completely
// within the interior of the blue path:
console.log(blue.contains(red)); // false
// Now move the red path to the same position as the blue path:
red.position = blue.position;
// Now the contains function returns true, because secondPath is
// completely within the interior of firstPath:
console.log(blue.contains(red)); // true
Finding Path Intersections
Scriptographer allows you to find the intersections between paths by using the path.getIntersections(path) function. When intersections are found, the function returns an array of CurveLocation objects, which describe the intersection locations on the intersected Curve of the path.
A CurveLocation object contains different kinds of information about the intersection, including:
- curveLocation.point: the intersection point
- curveLocation.segment: the closest Segment to the intersection
Path Intersections Example
The following example script creates two overlapping circle shaped paths and draws red circles on the positions of their intersections.
// Create two overlapping paths:
var square = new Path.Rectangle(new Point(0, 0), new Size(50, 50));
var circle = new Path.Circle(square.bounds.bottomRight, 25);
// Find the intersection locations between the paths:
var locations = square.getIntersections(circle);
// Loop through the locations (if any):
for(var i = 0; i < locations.length; i++) {
// The position of the intersection:
var point = locations[i].point;
// Create a circle shaped path at the
// position of the intersection:
var path = new Path.Circle(point, 2);
path.fillColor = 'red';
}
Mouse Tool Example
The following example shows an example of a mouse tool that creates a circle shaped path every time you click and shows the intersections with the last path while you drag the mouse.
// Define these variables outside of the mouseHandlers, so
// we can access them from both mouse handlers:
var path, lastPath;
function onMouseDown(event) {
// if a path was produced before, put it into the
// lastPath variable, which we will be checking for
// intersections later.
if(path) {
lastPath = path;
}
path = new Path.Circle(event.point, 50);
}
function onMouseDrag(event) {
// Move path to the position of the mouse:
path.position = event.point;
// If we already have a lastPath:
if(lastPath) {
// Find the intersections between path and lastPath, if any.
var intersections = path.getIntersections(lastPath);
// Check to see if there were any intersections:
if(intersections.length) {
// Run through the intersections:
for(var i = 0, i < intersections.length; i++) {
// The point of the intersection:
var point = intersections[i].point;
// Create a red circle shaped path with its
// centerpoint on the intersection point:
var hitPath = new Path.Circle(point, 5);
hitPath.fillColor = 'red';
// Automatically remove the path, the next time
// onMouseDrag is called:
hitPath.removeOn({ drag: true });
}
}
}
}