Silverlight mathematical engine (9)-online point of ruler plotting

Online point, this line can be a straight line or a curve, which is collectively referred to as a line here, because there is no difference between the two. According to the analysis above, the online point is a semi-free point:

1. It can be dragged with the mouse
2. Always located online

This leads to a problem: for example, when the length of the line or the size of the circle changes, how does the free point position change? The preceding solution is to keep the ratio unchanged:

1. For a straight line, the distance ratio remains unchanged (strictly speaking, the vector CA: BA remains unchanged, because the point may be on the extension line of the online segment)
2. For the circle, the angle ratio remains unchanged (that is, the angle between point C on the circle and the center of the center relative to the start point P with the reference diameter PQ)

As shown in:

The red point indicates the position of the mouse when the online point C (yellow) is dragged by the mouse. Because we do not control the movement of the mouse, the mouse can be moved out of the line, so to determine the ratio of C, we need to calculate it. From this we can see that point C is actually the projection point of the mouse on the line AB (vertical), and mousec is the vertical line of AB. For the circle, C is the intersection of mouseo and circle.

Let's take a look at the line AB. If the equation is Y = ax + B, the slope of the line perpendicular to it must be-1/A (learned in junior high school ), it can be expressed as Y =-x/A + B2, and the point of the mouse can be substituted into B2, so the ratio of C is the intersection of the first two straight lines, we have introduced this in the previous section. Let's look at the Code directly:

// Projection from a point out of the line (vertical) public static logicalpoint getprojectionpoint (logicalpoint point, logicalline line) {If (line. a. iszero () return New logicalpoint (point. x, line. p1.y); // line: Y = AX + B, then the vertical line line2 equation is: y =-x/A + B2, place the point coordinate to B2 var b2 = point. Y + point. x/line. a; var point2 = new logicalpoint (point. X + 1,-(point. X + 1)/line. A + b2); var line2 = new logicalline (point, point2); // calculates the intersection of line and line2: Return Linea Ndline (line2, line);} // the vector of a line segment outside the line is greater than that of public static double getprojectionratio (logicalpoint point, logicalline) {var projectionpoint = getprojectionpoint (point, line ); vaR result = 0.0; If (! (Line. p1.x-line. p2.x ). iszero () {result = (projectionpoint. x-line. p1.x)/(line. p2.x-line. p1.x);} else if (! (Line. p1.y-line. p2.y ). iszero () {result = (projectionpoint. y-line. p1.y)/(line. p2.y-line. p1.y);} return result ;}

Haha, isn't it quite simple? Of course, there is also a simpler way, that is, you don't need to pay attention to the concept, just use the X of the mouse to determine the intersection (that is, mousec is always parallel to the Y axis ), haha, we don't need this method, so we are afraid that the goods will not be good at low prices :)

Let's take a look at the circle, which is simpler. In fact, we don't need to use the intersection method. Because there are two intersections, It is troublesome to handle them. We just determined it using the trigonometric function:

// Calculate the angle between the line AB and the horizontal line (X axis). Public static double getradians (this logicalpoint A, logicalpoint B) {// math cannot be used. atan cannot determine the direction of return math because of atan. atan2 (. y-B .y), (a.x-B. x);} // calculate the radian public static double getradians (this logicalpoint A, logicalpoint B, logicalpoint C) of ABC {var R1 = getradians (A, B ); vaR r2 = getradians (C, B); Return R1-R2;} public void updateratio (logicalpoint point) {ratio = point. getradians (circle. center, circle. circle. radius. p1)/math. PI/2 ;}

All right, as long as you confirm the rules, it is not so troublesome to implement online points. To start our test:

1. Use the element created earlier
2. Create a point pointonline (yellow) on P1P2 in a straight line)
3. Create a point pointoncircle (yellow) on PO1)
4. You can drag a yellow dot to change the mouse event.

The code is very simple. It is all based on the previous model. Let's take a look at the running effect:

[Source code and demo address]

With the introduction of the points, the other two (straight lines and circles) of the three elements of the ry plot have also come to the fore. After so many analyses, we only want to clarify the relationship between them. If we use a word to describe the relationship, it is dependency. We only need to move the red dot, other points will change automatically, which is the magic of dependency. How can we use this dependency to make our coding and design work more similar to the real world? Obviously our test program has not implemented this point. In the next section, we will repeat the dependency to design the coordinate elements and give each Graphic Element an appropriate name!