javascriptpaperjs

Slice path into two separate paths using paper.js

I need to 'slice' a big path into two smaller paths using a line. For example, you may have the following configuration:

Example of slicing

After the operation, I should have two distinct closed paths. I probably should find two intersections and use Path.split function to split rectangle path, but I don't fully understand paper.js API and I am not sure about the best way to do that using exactly paper.js API.

For example, I split the original rectangle by doing the following commands:

 var starting_shape = new paper.Path.Rectangle([paper.view.center.x - 200, paper.view.center.y - 200], 400);
 starting_shape.strokeColor = "#aaa";
 starting_shape.strokeWidth = 2;
 starting_shape.fullySelected = true;

 var p1 = starting_shape.split(starting_shape.getNearestLocation([paper.view.center.x - 40, paper.view.center.y - 250]));
 var p2 = starting_shape.split(starting_shape.getNearestLocation([paper.view.center.x + 50, paper.view.center.y + 250]));

And I get the following:

Splitting rectangle

I tried to do the following: 

p1.closed = true;
p2.closed = true;

p1.position.x += 10;

I got the necessary result:

Result

But is there a way to make it more clever?

Solution

  • Yes, you can use path.divide(path2) to perform a division boolean operation. If you clone the project from github, there's a test for all boolean functions in Examples > Scripts > BooleanOperations.html

    I don't believe this currently works as you would like with just a line. It seems to be more stable with closed paths.