我在画布上绘制形状(使用HTML5)并且需要确定(在javascript,jquery中)绘制的线点(x,y坐标)是否相互连接或交叉并形成一些形状(如三角形,正方形等)。 )。这样做的目的是用颜色填充这些形状,就像绘画工具一样。
已阅读过少篇文章,例如http://www.geeksforgeeks.org/articulation-points-or-cut-vertices-in-a-graph/但未明确了解是否可以将其用作此问题的解决方案。
如果线点相互连接并形成形状,请建议和算法确定。
谢谢,
答案 0 :(得分:1)
以下是一些链接,对我所关注的内容有一些必要的指导。在此处分享详细信息对于寻找类似信息的其他人可能会有所帮助。
https://gist.github.com/lengstrom/8499382
从jsfiddle中提取 http://jsfiddle.net/justin_c_rounds/Gd2S2/light/
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;
};