Languages
[Edit]
PL

JavaScript - jak obliczy─ç punkt przeci─Öcia dwóch prostych dla danych 4 punktów?

3 points
Created by:
Dirask Community
6900

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:

Wz├│r na punkt przeci─Öcia dla danych dw├│ch punkt├│w na ka┼╝dej linii
Wz├│r na punkt przeci─Öcia dla danych dw├│ch punkt├│w na ka┼╝dej linii

Gdzie:┬áL1┬ái┬áL2┬áreprezentuj─ů 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>
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join