CODEWITHSUNDEEP
javascriptalgorithmgeometrypolygon
DYM
DYM

Reputation: 11

How can I straight cut a polygon into several pieces?

I want to develop a game "Cut the Shape" in JavaScript. Several components with convex polygons that will need to be clipped depending on the number of convex freedom faces. Lines and polygons are displayed on the Canvas. The Paper.js graphics load to use.

But then the question arose, which concerns the correct separation of the polygons from each other relative to the drawn line, I just can’t think of a way to do this.

Here is an example on simple polygons (the lines can be absolutely any, the user draws them himself):

enter image description here

I got to the points of dividing the polygon into other polygons using small dots with a line:

var polygon = new Path.RegularPolygon(new Point(200, 300), 4, 100);
polygon.strokeColor = 'blue';
polygon.fullySelected = true;

var shapesArray = [];
shapesArray.push(polygon);

function splitShape(path1, path2){
var shapesArrayCopy = path1.slice(0);
shapesArray = [];
for(var i = 0; i < shapesArrayCopy.length; i++){
    var intersections = shapesArrayCopy[i].getIntersections(path2);
    if(intersections.length >= 2){
        var p1 = shapesArrayCopy[i].split(shapesArrayCopy[i].getNearestLocation(intersections[0].point));
        var p2 = shapesArrayCopy[i].split(shapesArrayCopy[i].getNearestLocation(intersections[1].point));
        p1.closed = true;
        p2.closed = true;
        shapesArray.push(Object.assign(p1));
        shapesArray.push(Object.assign(p2));
        path2.visible = false;
    }
    else{
        shapesArray.push(shapesArrayCopy[i])
    }
}

var myPath;

function onMouseDown(event) {
   myPath = new Path();
   myPath.strokeColor = 'black';
   myPath.add(event.point);
   myPath.add(event.point);
}

function onMouseDrag(event) {
    myPath.segments.pop(); 
    myPath.add(event.point);
}

function onMouseUp(event) {
   splitShape(shapesArray, myPath)
   myPath.visible = false;
}

enter image description here

Upvotes: 1

Views: 418

Answers (2)

Suleman Uzair
Suleman Uzair

Reputation: 69

JSTS library can also be used to cut/split polygons with a multi-point line in Javascript. Here is an example that worked for me

Upvotes: 0

Spektre
Spektre

Reputation: 51933

In 2D You just displace the cuts in perpendicular direction to the cut line. If your cut line endpoints are: p0(x0,y0),p1(x1,y1) then the line direction is:

dp = p1-p0 = (x1-x0,y1-y0)

make it unit:

dp /= sqrt((dp.x*dp.x)+(dp.y*dp.y)

make it equal to half of the gap between cuts:

dp *= 0.5*gap

now tere are two perpendicular directions:

d0 = (-dp.y,+dp.x)
d1 = (+dp.y,-dp.x)

so now just add d0 to all vertexes of one cut, and d1 to the other one. Which use for which is simply you take point that does not lie on the cutting line (for example avg point of your cut) p and compute (only once for polygon cut):

t = dot(p-p0,d0) = ((p.x-x0)*d0.x)+((p.y-y0)*d0.y)

if (t>0) use d0, if (t<0) use d1 and if (t==0) you chose wrong point p as it lies on cutting line.

Upvotes: 1

Related Questions