JavaScript的測試，如果兩行重疊或並行

我想測試，如果兩行重疊，發現這個腳本：JavaScript的測試，如果兩行重疊或並行

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(){ 
 
\t canvas = document.getElementsByTagName("canvas")[0]; 
 
\t ctx = canvas.getContext("2d"); 
 
\t 
 
\t 
 
\t drawLine(line1.x1,line1.y1,line1.x2,line1.y2,"red"); \t //draw line 1 
 
\t drawLine(line2.x1,line2.y1,line2.x2,line2.y2,"blue"); \t //draw line 2 
 
\t 
 
\t console.info(lineIntersection(line1.x1,line1.y1,line1.x2,line1.y2, \t //line 1 
 
\t \t \t \t \t \t \t \t line2.x1,line2.y1,line2.x2,line2.y2)) //line 2 
 
\t 
 
\t 
 
\t drawLine(line3.x1,line3.y1,line3.x2,line3.y2,"green"); \t //draw line 3 
 
\t drawLine(line4.x1,line4.y1,line4.x2,line4.y2,"black"); \t //draw line 4 
 
\t 
 
\t console.info(lineIntersection(line3.x1,line3.y1,line3.x2,line3.y2, \t //line 3 
 
\t \t \t \t \t \t \t \t line4.x1,line4.y1,line4.x2,line4.y2)) //line 4 
 
\t 
 
} 
 

 

 

 
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){ 
 
\t ctx.beginPath(); 
 
\t ctx.moveTo(x1, y1); 
 
\t ctx.lineTo(x2, y2); 
 
\t ctx.strokeStyle = (color)?color:'#000'; 
 
\t ctx.lineWidth=3; 
 
\t ctx.stroke(); 
 
} 
 

 
var line1 = {x1:10,y1:10, 
 
\t \t \t x2:100,y2:100}; 
 
var line2 = {x1:50,y1:100, 
 
\t \t \t x2:200,y2:50}; 
 
var line3 = {x1:50,y1:30, 
 
\t \t \t x2:200,y2:30}; 
 
var line4 = {x1:100,y1:30, 
 
\t \t \t 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.

來源

2016-10-02 B. Colin Tim

檢查的山坡上，如果他們2點1線相同的檢查在裏面另一個，檢查這個檢查是否三角形創建了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);} 
}

來源

2016-10-02 16:24:07 Aschab

JavaScript的測試，如果兩行重疊或並行

回答

相關問題