如何动态识别由使用 JSX 图形绘制的多边形中的线形成的区域

Question

我有一个图表，用户可以在其中创建点和画线。这些线可以由用户移动。我还在线条周围添加了一个固定多边形 (EFGH)。现在我需要找到一种方法来允许用户单击并选择由线条和 EFGH 形成的区域。我想为这些区域中的每一个生成一个多边形，并在单击时提供填充颜色。但是由于这些线可以移动，因此必须动态生成多边形。我不确定如何识别端点并创建它们。要求是识别用户选择的区域并对其进行阴影处理，因此如果有比创建多边形更简单的解决方案，也可以。尽管示例代码会有所帮助，但如果有人至少可以为我指明一个方向，我将不胜感激。

下图显示了一个有 2 条线（和 4 个区域）的示例，但可能还有更多。

示例代码如下所示

let board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-13, 10, 10, -10], 
axis:true, keepAspectRatio:true});
var p1 = board.create('point', [0, 0]);
var p2 = board.create('point',  [1.0, 1.0]);
var p3 = board.create('point', [3, 0]);
var p4= board.create('point',  [3, 5],);

let l1 = board.create('line', [p1,p2],{dash:4});
let l2 = board.create('line', [p3,p4],{dash:4});


var p1x = board.create('point', [-5, 5],{fixed:true});
var p2x = board.create('point', [5, 5],{fixed:true});
var p3x = board.create('point', [5,-5],{fixed:true});
var p4x = board.create('point', [-5,-5],{fixed:true});

var pol = board.create('polygon', [p1x, p2x, p3x, p4x],{borders:{strokecolor:"green"},fillcolor:"white",highlightfillcolor:"white",fixed:true,});

样本可以在这个小提琴Jsxgraph fiddle试一试

我用过JSXGraph
我的要求类似于this

更新 1：
我尝试在 JSXgraph 画布上使用洪水填充。但是我无法在图表上选择正确的点，而且由于网格线和轴的颜色不同，它阻止了填充，因此也不起作用。 这是我尝试过的Flood fill Fiddle

Answer 1

首先是使用一条线，为这条线添加两个不等式元素，然后将它们与多边形相交。 此外，以下示例使用 Jordan 的 point-in-polygon 方法来确定点击是否在相交路径之一内。

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

var isInside = function(pos, path) {
    var len = path.numberPoints, i, j,
        x = pos[0],
        y = pos[1],
        c = false;

    // Jordan's method, see https://en.wikipedia.org/wiki/Point_in_polygon
    for (i = 0, j = len - 1; i < len; j = i++) {
        if (( (path.points[i].usrCoords[2] > y) !== (path.points[j].usrCoords[2] > y) ) &&
            (x < (path.points[j].usrCoords[1] - path.points[i].usrCoords[1]) * (y - path.points[i].usrCoords[2]) /
                  (path.points[j].usrCoords[2] - path.points[i].usrCoords[2]) + path.points[i].usrCoords[1])) {
            c = !c;
        }
    }
    return c;
};

var pol = board.create('polygon', [[-3, -3], [3, -3], [3, 3], [-3, 3]]);
var li  = board.create('line', [[3, -4], [-2, 4]]);
var in1  = board.create('inequality', [li]);
var in2  = board.create('inequality', [li], {inverse: true, fillColor: 'pink'});
var isect1 = board.create('curve', [[], []], {fillColor: 'yellow', fillOpacity: 0.3});
    isect1.updateDataArray = function() {
        var a = JXG.Math.Clip.intersection(pol, in1, this.board);
        this.dataX = a[0];
        this.dataY = a[1];
    };
var isect2 = board.create('curve', [[], []], {fillColor: 'blue', fillOpacity: 0.3});
    isect2.updateDataArray = function() {
        var a = JXG.Math.Clip.intersection(pol, in2, this.board);
        this.dataX = a[0];
        this.dataY = a[1];
    };
    
board.on('down', function(evt) {
    var pos = this.getUsrCoordsOfMouse(evt),
        path, isIn,
        list = [isect1, isect2];

    for (path of list) {
        isIn = isInside(pos, path);
        if (isIn) {
            path.setAttribute({fillColor: 'gray'});
        }
    }
});

在https://jsfiddle.net/e64qyLxt/1/观看直播。