我试图找到两条线的相反线的交点:
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 之间转换
那么如何找到那个交叉点呢?
我试图找到两条线的相反线的交点:
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 之间转换
那么如何找到那个交叉点呢?
我冒昧地清除了您的代码并添加了一些对象,以便更容易地回忆数据。添加了: 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
是原点的 y 值),因此您可以轻松找出两条线上相同的值。如果做不到,请访问maths stackexchange 网站并在那里发布该问题。g
r
(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
.