获取平面中直线的交点

Question

I have a canvas with this params: width = 400 , height = 400

and have a line passing through the point cursor[x1,y1] at an angle Q (in degree)

I need get all coords of the intersection of the line in the plane and write it to array. Now i use this equation: y - y1 = k * (x - x1)

to check all point I use this code:

var rad = Q * Math.PI/180;

for (ctrY = 0; ctrY < 400; ctrY += 1) {
    for (ctrX = 0; ctrX < 400; ctrX += 1) {

        if ( (ctrY - cursor.y) ===
              ~~(Math.tan(rad) * (ctrX - cursor.x)) ) {

            z.push([ctrX, ctrY]);
        }

    }
}

For example when 0 < Q < 90 and cursor[x1,y1] = [200,200] z.length = 0 and it's not correct.

Where i'm wrong? Maybe there is a more convenient algorithm?

PS Sorry for my english

Answer 1

I imagine an algorithm like this. (I only consider the case when 0 < Q < 90). First I will want to calculate the points where the line will intersect the Ox and Oy axes, considering the origin (0,0) point the upper left corner and if we imagine that the negative x and y values are respectively to the left and to the top of this point. Let x2 and y2 be the values where the line will intersect Ox and Oy. We want to calculate these values. We now have a system with 2 unknown variables (x2 and y2): Math.tan(rad) = (y1 -y2)/x1 and Math.tan(rad) = y1/(x1-x2) . We can deduct these equations by drawing the line on the coordinate system and analyzing a bit. If we solve the system of equations we find something like: x2 = (x1*y1 -x1 * x1 * Math.tan(rad)/(2 * y1-x1)) and y2= y1- x1 * Math.tan(rad) (These need to be verified, I haven't double checked my calculus). A linear equation can be defined by the formula y = a*x + b and in our case a = x2 and b = y2 . We can then calculate the points like this:

for (xIdx = 0; xIdx < 400; xIdx += 1) {
    var ctrX = xIdx;
    var ctrY = x2 * ctrX + y2 //todo: replace with the respective calculated variables x2 and y2(we could also define two functions in js) and proper rounding
    z.push([ctrX, ctrY]);
}

I'm not sure if I'm 100% accurate but I hope you understand my idea.

Answer 2

Seems you need line rastering algorithm. Consider Bresenham algorithm .

You can also look at DDA algorithm