― I’M SHISHIR RAVEN

WEBSITE & App Builder

Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry’s standard dummy text.

Multiple Dividing a Path/Shape into multiple parts in PaperJS. Solution.

Problem.

I had a shape, say a paper.js Circle that I wanted to divide into multiple parts, based on cut marks. Cut marks are basically lines which overlap the shape.

The following is an example.

Once I split the shapes they should look like the following.

I searched for a solution in the paperJS to find out a decent solution which could help me do this slicing and I found that divide function from PaperJS can get the task done, but for multiple cuts I would have to create a function.

So as a solution I present that following code which I used to solve this problem.

var myCircle = new Path.Circle(new Point(300, 300), 200);
myCircle.fillColor = 'yellow';
myCircle.strokeColor = 'black';

function splitShape(shape,path)
{
    var partsGroup = new Group();
    partsGroup.addChild(shape);
    // Looping all the Shapes. 
    for(var i=0; i<path.children.length; i++)
    {
        // Dividing the Path Multiple Times. 
     
        
        var tempParts = Array();
        for (var x = 0; x < partsGroup.children.length; x++) {
        if (path.children[i].intersects(partsGroup.children[x])) {
            var result = partsGroup.children[x].divide(path.children[i], { insert: false, stroke: false, trace: false });
            var clone = result.clone();
            result.remove()
            var group = new Group();
            group.addChildren(clone.children);
            for (var s = 0; s < group.children.length; s++) {
                group.children[s].closed=true;
               tempParts.push(group.children[s]);
            }
        }
        else {
                tempParts.push(partsGroup.children[x]);
             }
        } // end for
        
        partsGroup.removeChildren();
        for(var y=0; y<tempParts.length;y++)
        {
           partsGroup.addChild(tempParts[y],{insert:false})
        }
    } // end for
    return partsGroup;
}


var path = new CompoundPath({
    children: [
        new Path.Line([100, 50], [600, 600]),
        new Path.Line([300, 50], [800, 600])
    ],
    fillColor: 'black',
    selected: true,
});

var partsGroup = splitShape(myCircle,path)

// Code to Move the Pieces Apart. 
 for (var x = 0; x < partsGroup.children.length; x++) {
     partsGroup.children[x].position = partsGroup.children[x].position + [-10*x,20*x] 
 }
 path.selected=false;
 


Posted

in

by

Tags: