我想测试两条线是否重叠并找到了这个脚本:
function lineIntersection(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) {
var s1_x, s1_y, s2_x, s2_y;
s1_x = p1_x - p0_x;
s1_y = p1_y - p0_y;
s2_x = p3_x - p2_x;
s2_y = p3_y - p2_y;
var s, t;
s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y);
t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);
return (s >= 0 && s <= 1 && t >= 0 && t <= 1);}
}
但是如果这些行是并行的并且我不知道如何测试它们是否重叠并行,则此脚本不起作用。这是完整的脚本:
var canvas, ctx;
function load(){
canvas = document.getElementsByTagName("canvas")[0];
ctx = canvas.getContext("2d");
drawLine(line1.x1,line1.y1,line1.x2,line1.y2,"red"); //draw line 1
drawLine(line2.x1,line2.y1,line2.x2,line2.y2,"blue"); //draw line 2
console.info(lineIntersection(line1.x1,line1.y1,line1.x2,line1.y2, //line 1
line2.x1,line2.y1,line2.x2,line2.y2)) //line 2
drawLine(line3.x1,line3.y1,line3.x2,line3.y2,"green"); //draw line 3
drawLine(line4.x1,line4.y1,line4.x2,line4.y2,"black"); //draw line 4
console.info(lineIntersection(line3.x1,line3.y1,line3.x2,line3.y2, //line 3
line4.x1,line4.y1,line4.x2,line4.y2)) //line 4
}
function lineIntersection(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) {
var s1_x, s1_y, s2_x, s2_y;
s1_x = p1_x - p0_x;
s1_y = p1_y - p0_y;
s2_x = p3_x - p2_x;
s2_y = p3_y - p2_y;
var s, t;
s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y);
t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);
return (s >= 0 && s <= 1 && t >= 0 && t <= 1);
}
function drawLine(x1,y1,x2,y2,color){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = (color)?color:'#000';
ctx.lineWidth=3;
ctx.stroke();
}
var line1 = {x1:10,y1:10,
x2:100,y2:100};
var line2 = {x1:50,y1:100,
x2:200,y2:50};
var line3 = {x1:50,y1:30,
x2:200,y2:30};
var line4 = {x1:100,y1:30,
x2:150,y2:30};
<!DOCTYPE html>
<html>
<head>
<title>Inersection Test</title>
<script src="intersection.js"></script>
</head>
<body style="overflow: hidden; width: 100%; height: 100%" onload="load()">
<main>
<canvas id="game" style="border: 2px solid black; width: 400px; height: 200px">
</canvas>
</main>
</body>
</html>
控制台输出是:
true -> lines 1 and 2 are overlapping, correct!
false -> lines 3 and 4 are **not** overlapping, that's not what wanted.
答案 0 :(得分:0)
检查斜坡,如果它们是相同的,检查1个线中的2个点是否在另一个中,检查此检查是否创建的三角形具有0个区域。
function lineIntersection(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) {
var s1_x, s1_y, s2_x, s2_y;
s1_x = p1_x - p0_x;
s1_y = p1_y - p0_y;
s2_x = p3_x - p2_x;
s2_y = p3_y - p2_y;
var s, t;
s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y);
t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);
m1 = s1_y/s1_x;
m2 = s2_y/s2_x;
//If they have the same slope check for the points to intersect
if(m1 == m2)
return ((p_0.x - p_2.x)*(p_0.y - p_3.y) - (p_0.x - p_3.x)*(p_0.y - p_2.y) == 0 || (p_1.x - p_2.x)*(p_1.y - p_3.y) - (p_1.x - p_3.x)*(p_1.y - p_2.y) == 0);
return (s >= 0 && s <= 1 && t >= 0 && t <= 1);}
}