Question

我想测试两条线是否重叠并找到了这个脚本：

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.

Answer 1

检查斜坡，如果它们是相同的，检查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);}
}

javascript测试两条线是重叠还是平行

1 个答案: