Use js to detect intersection of two line segments

In Graphic programming, it is often necessary to detect the intersection of two line segments. For example, the collision detection of irregular lines is the basis for detecting the collision of line segments. a line segment is not a straight line. It may be a little difficult to calculate, and there are many methods. Here we will introduce a method of vector method. how can we detect the intersection of two line segments? First... SyntaxHighlighter. all ();

 

In Graphic programming, it is often necessary to detect the intersection of two line segments. For example, the collision detection of irregular lines is the basis for detecting the collision of line segments.

 

A line segment is not a straight line. It may be a little difficult to calculate, and there are many methods. Here we will introduce a method of vector method.

 

How can we detect the intersection of two line segments? First, four points p1, p2, p3, and p4 are required. p1 and p2 represent a line segment, and p3 and p4 represent the second line segment.

 

Then, it is deduced that if the two line segments intersect, then for the first line segment (starting from p1 and p2), p3 and p4 must be on both sides. at the same time, for the second line segment (from p3 and p4 as the endpoint), p1 and p2 must be on both sides of the second line segment. to prove the intersection of two line segments, you only need to prove the two conditions behind them. This is a necessary and sufficient condition.

 

How can we prove that the two points are on both sides of a straight line? Use the vector method to see the figure:

 

 

In the figure, p1, p2, p3, and p4 correspond to four points, indicating two green line segments. We first use the line segment p3-> p4 as the baseline to determine whether p1 and p2 are on both sides of it.

 

, Create three vectors, v1, v2, and v3 based on four points. The direction is clearly indicated in the figure.

 

To determine whether p1 and p2 are on both sides of the online segment, you must first calculate the values of v1 × v3 and v2 × v3. Here the multiplication of vectors is involved. Here the cross multiplication is used,

 

The result of the Cross multiplication of vector a and vector B is a vector in the vertical direction of the plane composed of vector a and vector B. Its values are positive and negative.

 

Here, we use the result obtained by the cross to guide the direction of the angle. If the two results v1 × v3 and v2 × v3 are of the same number, it means that, the same side of the two vertex online segments. If it is a different sign, it indicates that the two vertex online segments have different sides.

 

Finally, we can determine that (v1 × v3) * (v2 × v3) <= 0 indicates that they are on different sides.

 

The cross-multiplication formula of the vector is V1 (x1, y1) × V2 (x2, y2) = x1y2-y1x2

 

Then, use the same method to determine whether p1-> p2 is the baseline and whether p3 and p4 are on both sides. If both are satisfied, the two line segments are intersection.

 

Js implementation is as follows:

 

 

 

 

01

// Calculate the cross Multiplication

02

Var crossMul = function (v1, v2 ){

03

Return v1.x * v2.y-v1.y * v2.x;

04

}

05

// Returns true if the intersection exists.

06

Var checkCross = function (p1, p2, p3, p4 ){

07

Var v1 = {x: p1.x-p3.x, y: p1.y-p3.y },

08

V2 = {x: p2.x-p3.x, y: p2.y-p3.y },

09

V3 = {x: p4.x-p3.x, y: p4.y-p3.y },

10

V = crossMul (v1, v3) * crossMul (v2, v3)

11

V1 = {x: p3.x-p1.x, y: p3.y-p1.y}

12

V2 = {x: p4.x-p1.x, y: p4.y-p1.y}

13

V3 = {x: p2.x-p1.x, y: p2.y-p1.y}

14

Return (v <= 0 & crossMul (v1, v3) * crossMul (v2, v3) <= 0 )? True: false

15

}

Then, call:

 

01

CheckCross ({

02

X: 0,

03

Y: 0

04

},{

05

X: 100,

06

Y: 100

07

},{

08

X: 20,

09

Y: 0

10

},{

11

X: 50,

12

Y: 40

13

})

Here is a simple demo, but the parameter is written to death... no time to write ....

 

Http://www.html-js.com/mj/version1.0.3/lab/point-rect-test.html