How to find intersection point of opposite lines of two lines

问题: I am trying to find intersection point of opposite lines of two lines: var ax=0.00, ay=0.50 ; var bx=1.00, by=1.00 ; var cx=2.00, cy=0.25 ; But I am very confused a...

问题:

I am trying to find intersection point of opposite lines of two lines:

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 ;

But I am very confused about finding an opposite of a line.

Here is a jsfiddle which points are converted between 0.0-1.0

So how to find that intersection?


回答1:

I've taken the liberty of clearing out your code a bit and adding a few objects in order to make recollection of data a bit easier. Added: Point, Line objects and an associated method draw() on both of them.

In order to do this, you first need to calculate the median point. This is pretty easy, with point (a,b) and (c,d) for your line, the median point is ( (a+c)/2, (b+d)/2 ). This will be where your opposite line starts from.

From there, you can calculate the opposite gradient by taking the gradient of your line (grad = (d-b)/(a-c)) and working out -1/grad (since perpendicular lines have opposite gradients). This is the opposite() function I defined.

From here, you have your two opposite lines, you just need to find the intersection. You have both equations for both lines (since you know that a line is y = g*x + r where g is the gradient and r is the y-value at origin), so you can easily figure out the value where (x,y) is the same on both lines. If you can't, go on the maths stackexchange site and post that question there.

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">


Caveat: I had a pretty big error in my code - the gradient for opposite lines was miscalculated as -1 * grad as opposed to -1 / grad.

  • 发表于 2018-12-27 06:42
  • 阅读 ( 210 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除