我想用JavaScript开发一个游戏“剪切形状”。几个带有凸多边形的组件需要根据凸自由面的数量进行剪切。线条和多边形显示在画布上。Paper.js图形加载使用。
但是问题来了，关于多边形相对于画线的正确分离，我就是想不出一个方法来做这个。
下面是一个简单多边形的示例（线可以是任何线，用户可以自己绘制）：

我得到的点划分成其他多边形使用小圆点与一条线：

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;
}