PL
JavaScript - jak obliczyć punkt przecięcia dwóch prostych dla danych 4 punktów?
3
points
Wzór na punkt przecięcia się prostych, gdzie każda prosta opisana jest za pomocą dwóch punktów, należy obliczyć w następujący sposób:
Gdzie:
L1iL2reprezentują równania na wszystkie punkty znajdujące się na linii 1 i linii 2 - obliczone za pomocą liniowego równania parametrycznego, tzn. punkty(x1, y1)i(x2, y2)wyznaczają prostą linia 1, a(x3, y3)i(x4, y4)linia 2 .
Za pomocą JavaScript można obliczyć punkt przecięcia z powyższego wzoru w następujący sposób:
// ONLINE-RUNNER:browser;
function calculateIntersection(p1, p2, p3, p4) {
// dolna część formuły punktu przecięcia
var d1 = (p1.x - p2.x) * (p3.y - p4.y); // (x1 - x2) * (y3 - y4)
var d2 = (p1.y - p2.y) * (p3.x - p4.x); // (y1 - y2) * (x3 - x4)
var d = (d1) - (d2);
if(d == 0) {
throw new Error('Liczba punktów przecięcia wynosi zero lub nieskończoność.');
}
// górna część formuły punktu przecięcia
var u1 = (p1.x * p2.y - p1.y * p2.x); // (x1 * y2 - y1 * x2)
var u4 = (p3.x * p4.y - p3.y * p4.x); // (x3 * y4 - y3 * x4)
var u2x = p3.x - p4.x; // (x3 - x4)
var u3x = p1.x - p2.x; // (x1 - x2)
var u2y = p3.y - p4.y; // (y3 - y4)
var u3y = p1.y - p2.y; // (y1 - y2)
// formuła punktu przecięcia
var px = (u1 * u2x - u3x * u4) / d;
var py = (u1 * u2y - u3y * u4) / d;
var p = { x: px, y: py };
return p;
}
// Przykład użycia:
// linia 1
var p1 = { x: 85, y: 45 }; // P1: (x1, y1)
var p2 = { x: 260, y: 180 }; // P2: (x2, y2)
// linia 2
var p3 = { x: 225, y: 75 }; // P3: (x4, y4)
var p4 = { x: 65, y: 260 }; // P4: (x4, y4)
// wyliczamy punkt przecięcia
var p = calculateIntersection(p1, p2, p3, p4); // punkt przecięcia
console.log('P=(' + p.x + '; ' + p.y + ')');
1. Przykład wzoru na punkt przecięcia
Sekcja ta zawiera przykład obliczania punktu przecięcia zwizualizaowany na canvas-ie.
Animowana wersja tego artykułu została zaprezentowana tutaj .
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
<script>
function drawLine(context, p1, p2, color) {
context.strokeStyle = color;
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.stroke();
}
function drawPoint(context, x, y, label, color, size) {
if (color == null) {
color = '#000';
}
if (size == null) {
size = 5;
}
var pointX = Math.round(x);
var pointY = Math.round(y);
context.beginPath();
context.fillStyle = color;
context.arc(pointX, pointY, size, 0 * Math.PI, 2 * Math.PI);
context.fill();
if (label) {
var textX = pointX;
var textY = Math.round(pointY - size - 3);
var text = label + '=(' + x + '; ' + y + ')';
context.font = 'Italic 14px Arial';
context.fillStyle = color;
context.textAlign = 'center';
context.fillText(text, textX, textY);
}
}
</script>
</head>
<body>
<canvas id="my-canvas" width="350" height="300"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
function calculateIntersection(p1, p2, p3, p4) {
// dolna część formuły punktu przecięcia
var d1 = (p1.x - p2.x) * (p3.y - p4.y); // (x1 - x2) * (y3 - y4)
var d2 = (p1.y - p2.y) * (p3.x - p4.x); // (y1 - y2) * (x3 - x4)
var d = (d1) - (d2);
if(d == 0) {
throw new Error('Liczba punktów przecięcia wynosi zero lub nieskończoność.');
}
// górna część formuły punktu przecięcia
var u1 = (p1.x * p2.y - p1.y * p2.x); // (x1 * y2 - y1 * x2)
var u4 = (p3.x * p4.y - p3.y * p4.x); // (x3 * y4 - y3 * x4)
var u2x = p3.x - p4.x; // (x3 - x4)
var u3x = p1.x - p2.x; // (x1 - x2)
var u2y = p3.y - p4.y; // (y3 - y4)
var u3y = p1.y - p2.y; // (y1 - y2)
// formuła punktu przecięcia
var px = (u1 * u2x - u3x * u4) / d;
var py = (u1 * u2y - u3y * u4) / d;
var p = { x: px, y: py };
return p;
}
// linia 1
var p1 = { x: 85, y: 45 }; // P1: (x1, y1)
var p2 = { x: 260, y: 180 }; // P2: (x2, y2)
// linia 2
var p3 = { x: 225, y: 75 }; // P3: (x4, y4)
var p4 = { x: 65, y: 260 }; // P4: (x4, y4)
// wyliczamy punkt przecięcia
var p = calculateIntersection(p1, p2, p3, p4); // punkt przecięcia
drawLine(context, p1, p2, 'red');
drawPoint(context, p1.x, p1.y, 'P1', 'red', 5);
drawPoint(context, p2.x, p2.y, 'P2', 'red', 5);
drawLine(context, p3, p4, 'blue');
drawPoint(context, p3.x, p3.y, 'P3', 'blue', 5);
drawPoint(context, p4.x, p4.y, 'P4', 'blue', 5);
drawPoint(context, p.x, p.y, 'P', 'green', 5);
console.log('P1=(' + p1.x + '; ' + p1.y + ')');
console.log('P2=(' + p2.x + '; ' + p2.y + ')');
console.log('P3=(' + p3.x + '; ' + p3.y + ')');
console.log('P4=(' + p4.x + '; ' + p4.y + ')');
console.log('P=(' + p.x + '; ' + p.y + ')');
</script>
</body>
</html>