Как найти точку пересечения противоположных линий двух линий - PullRequest
Новая
       36

Как найти точку пересечения противоположных линий двух линий

0 голосов
/ 25 декабря 2018

Я пытаюсь найти точку пересечения противоположных линий двух линий:

enter image description here

var ax=0.00, ay=0.50 ;
var bx=1.00, by=1.00 ;
var cx=2.00, cy=0.25 ;

Но я очень запутался в поиске противоположнойлинии.

Вот jsfiddle , точки которого конвертируются между 0,0-1,0

Так как найти это пересечение?

1 Ответ

0 голосов
/ 25 декабря 2018

Я позволил себе немного очистить ваш код и добавить несколько объектов, чтобы немного упростить процесс сбора данных.Добавлено: Point, Line объекты и связанный с ними метод draw() на обоих из них.

Для того, чтобы сделать это, вам сначала нужно вычислить срединную точку.Это довольно легко, с точкой (a,b) и (c,d) для вашей линии, средняя точка равна ( (a+c)/2, (b+d)/2 ).Это будет то место, откуда начинается ваша противоположная линия.

Отсюда вы можете рассчитать противоположный градиент, взяв градиент вашей линии (grad = (d-b)/(a-c)) и обработав -1/grad (поскольку перпендикулярные линии имеют противоположные градиенты).Это определенная мной функция opposite().

Отсюда у вас две противоположные линии, вам просто нужно найти пересечение.У вас есть оба уравнения для обеих линий (поскольку вы знаете, что строка равна y = g*x + r, где g - градиент, а r - значение y в начале координат), поэтому вы можете легко определить значение, где (x,y)одинаково на обеих линиях.Если вы не можете, зайдите на сайт математического стека обмена и отправьте этот вопрос там. 

function Point(x,y) {
  this.x = x;
  this.y = y;
}
Point.prototype.draw = function(color="blue") {
  var diff = 0.0125 ;
  (new Line(this.x-diff, this.y-diff, this.x-diff, this.y+diff)).draw("normal", color);
  (new Line(this.x-diff, this.y+diff, this.x+diff, this.y+diff)).draw("normal", color);
  (new Line(this.x+diff, this.y+diff, this.x+diff, this.y-diff)).draw("normal", color);
  (new Line(this.x+diff, this.y-diff, this.x-diff, this.y-diff)).draw("normal", color);
}

function Line(x1, y1, x2, y2) {
  this.point1 = new Point(x1, y1);
  this.point2 = new Point(x2, y2);
}

Line.prototype.draw = function(style="normal", color="black") {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.save();
  if (style == "dashed-back") {
  	ctx.setLineDash([5,3]); }
 	ctx.strokeStyle = color ;
  ctx.beginPath();
  ctx.moveTo(xp(this.point1.x), yp(this.point1.y));
  ctx.lineTo(xp(this.point2.x), yp(this.point2.y));
  ctx.stroke();
  ctx.restore();
  return this;
}
Line.prototype.intersect = function(otherLine) {
	var grad1 = (this.point2.y - this.point1.y)/(this.point2.x - this.point1.x);
  var grad2 = (otherLine.point2.y - otherLine.point1.y)/(otherLine.point2.x - otherLine.point1.x);
  var remainder1 = this.point1.y - this.point1.x * grad1;
  var remainder2 = otherLine.point1.y - otherLine.point1.x * grad2;
  var x = (remainder2 - remainder1)/(grad1 - grad2);
  var y = grad1 * x + remainder1;
  return new Point(x, y);
}
Line.prototype.opposite = function(style = "normal", color = "Black") {
	var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.save();
  var midway = new Point((this.point1.x + this.point2.x)/2, (this.point1.y + this.point2.y)/2);
  var invgrad = -1 * 1/(this.point2.y - this.point1.y)/(this.point2.x - this.point1.x);
  return new Line(midway.x - 100, midway.y - 100*invgrad, midway.x+100, midway.y + 100 * invgrad);
}

// Normalize points for normal plot
function xp (x) { return x*300+50 ; }
function yp (y) { return 450-(y*300) ; }

// Write a text
function text (str,x,y,size=12,color="black") {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.save();
  ctx.font = size+"px Arial" ;
  ctx.fillStyle = color;
  ctx.fillText(str,xp(x),yp(y));
  ctx.restore();
}

// Init guides
function init () {
  new Line(0, 0, 0, 1).draw("dashed-back", "#888");
  new Line(0, 1, 3, 1).draw("dashed-back", "#888");
  new Line(3, 1, 3, 0).draw("dashed-back", "#888");
  new Line(1, 0, 1, 1).draw("dashed-back", "#888");
  new Line(2, 0, 2, 1).draw("dashed-back", "#888");
  text("1",-0.05,0.95)
  text("0",-0.05,-0.05)
  text("1",1,-0.05)
  text("2",2,-0.05)
  text("3",3,-0.05)
}

init();

var ax=0.00, ay=0.50 ;
var bx=1.00, by=1.00 ;
var cx=2.00, cy=0.25 ;
var dx=3.00, dy=0.75 ;

new Point(ax,ay).draw("red");
new Point(bx,by).draw("red");
new Point(cx,cy).draw("red");
new Point(dx,dy).draw("red");

var line1 = new Line(ax, ay, bx, by).draw("normal", "blue");
var line2 = new Line(bx, by, cx, cy).draw("normal", "blue");
var line3 = new Line(cx, cy, dx, dy).draw("normal", "blue");
line2.opposite().draw("normal", "red");
line1.opposite().draw("normal", "orange");
line1.opposite().intersect(line2.opposite()).draw("normal", "purple");
<canvas id="myCanvas" width="1000" height="600">

Предостережение : в моем коде была довольно большая ошибка - градиент для противоположных линий был неверно рассчитан как -1 * gradв отличие от -1 / grad.

...