Javascript 确定线点是否相互连接并形成形状的算法

Javascript 确定线点是否相互连接并形成形状的算法,javascript,algorithm,graph-algorithm,Javascript,Algorithm,Graph Algorithm,我正在画布上绘制形状(使用HTML5),需要确定(在javascript、jquery中)绘制的线点(x、y坐标)是否相互连接或相交并形成某种形状(如三角形、正方形等)。其目的是用颜色填充这些形状,就像绘画工具一样 我读过一些类似的文章,但不清楚这是否可以作为解决此问题的方法 请建议和算法,以确定直线点是否相互连接并形成形状 谢谢,这里有一些链接,对我所关注的内容有一些必要的指导。在这里分享详细信息对其他寻找类似信息的人很有帮助 从jsfiddle中提取 功能检查LineIntersecti

我正在画布上绘制形状(使用HTML5),需要确定(在javascript、jquery中)绘制的线点(x、y坐标)是否相互连接或相交并形成某种形状(如三角形、正方形等)。其目的是用颜色填充这些形状,就像绘画工具一样

我读过一些类似的文章,但不清楚这是否可以作为解决此问题的方法

请建议和算法,以确定直线点是否相互连接并形成形状


谢谢,

这里有一些链接,对我所关注的内容有一些必要的指导。在这里分享详细信息对其他寻找类似信息的人很有帮助

从jsfiddle中提取

功能检查LineIntersection(line1StartX、line1StartY、line1EndX、line1EndY、line2StartX、line2StartY、line2EndX、line2EndY){
//如果直线相交,则结果包含相交点的x和y(将直线视为无穷大)以及线段1或线段2是否包含该点的布尔值
变量分母,a,b,数值1,数值2,结果={
x:null,
y:空,
在线1:错,
网上2:错
};
分母=((line2EndY-line2StartY)*(line1EndX-line1StartX))-((line2EndX-line2StartX)*(line1EndY-line1StartY));
如果(分母==0){
返回结果;
}
a=线路1起点-线路2起点;
b=line1StartX-line2StartX;
数值1=((line2EndX-line2StartX)*a)-(line2EndY-line2StartY)*b);
数值2=((line1EndX-line1StartX)*a)-(line1EndY-line1StartY)*b);
a=分子1/分母;
b=分子2/分母;
//如果我们在两个方向上无限地投射这些线,它们在这里相交:
结果.x=line1StartX+(a*(line1EndX-line1StartX));
结果y=line1StartY+(a*(line1EndY-line1StartY));
/*
//值得注意的是,这应与:
x=line2StartX+(b*(line2EndX-line2StartX));
y=line2StartX+(b*(line2EndY-line2StartY));
*/
//如果直线1是线段,而直线2是无限长的,则它们在以下情况下相交:
如果(a>0&&a<1){
result.onLine1=真;
}
//如果直线2是线段,而直线1是无限长的,则它们在以下情况下相交:
如果(b>0&&b<1){
result.onLine2=真;
}
//如果直线1和直线2是线段,则如果上述两条均为真,则它们相交
返回结果;
};

function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
// if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
var denominator, a, b, numerator1, numerator2, result = {
    x: null,
    y: null,
    onLine1: false,
    onLine2: false
};
denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY));
if (denominator == 0) {
    return result;
}
a = line1StartY - line2StartY;
b = line1StartX - line2StartX;
numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b);
numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b);
a = numerator1 / denominator;
b = numerator2 / denominator;

// if we cast these lines infinitely in both directions, they intersect here:
result.x = line1StartX + (a * (line1EndX - line1StartX));
result.y = line1StartY + (a * (line1EndY - line1StartY));
/*
    // it is worth noting that this should be the same as:
    x = line2StartX + (b * (line2EndX - line2StartX));
    y = line2StartX + (b * (line2EndY - line2StartY));
    */
// if line1 is a segment and line2 is infinite, they intersect if:
if (a > 0 && a < 1) {
    result.onLine1 = true;
}
// if line2 is a segment and line1 is infinite, they intersect if:
if (b > 0 && b < 1) {
    result.onLine2 = true;
}
// if line1 and line2 are segments, they intersect if both of the above are true
return result;
};