C # WPF Dynamic point arbitrary moving bubbles (solution using mathematical Pythagorean theorem, sine theorem, vector knowledge).

Long time no blog, recently in the study of WPF under the painting of bubbles, research and development process is more difficult (mainly to review the high school mathematics knowledge, MMP all forgot), this blog is mainly to provide a way for everyone to refer to, if there is a greater God and better solutions can be free of your comments to leave a message. Take a functional project of this type, first analysis can assume that the bubble is composed of: ellipse/Rectangle/Circle (special case of ellipse) and triangle, OK first step to introduce the steps of development:

First: First of all, all of my graphics are based on the matrix, the starting point of the axis is (0,0), assuming a drag point dynamicpoint (x, y), and a fixed point fixedpoint (M,n), from two points to determine the size of a rectangle, Draw an inner graph and a triangle from the inside;

1. New Rectangle var triaglerect = new Rect (fixedpoint, dynamicpoint);

2, suppose a rectangle within the size of a circle, and the circle is composed of the center and radius of the line across the arc determined, radius r, center centerxy (p,q); equivalent to a known

3, can move the point P is set to: Currentfixedpoint (s,t); This point is captured by the mouse equivalent to known;

4, by the moving Point Currentfixedpoint (s,t) to the Circle M (the center of the Circle is Centerxy (p,q), radius r) as the tangent of two circles, to find out two tangency F1 (f1x,f1y), F2 (f2x,f2y) coordinate values?

such as (do the figure is more ugly, do auxiliary use)

There must be a lot of people here who feel very familiar with it, yes this is a high school math problem, here in the process of research two solutions, the following simple introduction:

Scenario 1:

, from the center point C to the two tangent lines, and then according to the trigonometric functions of the auxiliary line PQ,QC to obtain the hypotenuse PC length, by the figure can be known          

Double Sine = R/ab; Find the sine value

∠f1pc= Math.Round ((Math.asin (Sine)/math.pi) * 180, 2);//convert the sine value into an angle

The F1,F2 coordinates can be obtained by using the vector and vector modulus to calculate the two-yuan quadratic equation.

Equation 1:pf1 vector =pc vector +cf1, here we can get a two-yuan equation about F1;

Equation 2:pf1 The modulus of the vector = (pc Square +cf1 Square) Open radical, here you can get a two-yuan two-time equation about F1;

The coordinate values of F1 can be solved by these two equations, and the coordinate values of F2 can be obtained in the same vein.

Scenario 2:

Also, Scenario 1 is a little more complicated, less conducive to the application of software, this side emphatically introduce the second calculation of the feasibility of the pointcut;

Double MB = math.sqrt (Math.pow (PC, 2)-Math.pow (R, 2));//MB is the length of the tangent

Double Sine = R/ab; Find the sine value

∠f1pc= Math.Round ((Math.asin (Sine)/math.pi) * 180, 2);//convert the sine value into an angle

The next step is different from Scenario 1: I want the center point to rotate counterclockwise by the angle ∠f1pc.

1  //rotate the moving point as the center angle Sineangle, with direction, clockwise2Vector vector =point.subtract (Centerxy, currentfixedpoint);3Matrix Matrix =NewMatrix ();4 Matrix. Rotateat (Sineangle, Currentfixedpoint.x, currentfixedpoint.y);5             //Convert to unit vector 16             varv =Matrix. Transform (vector);7 v.normalize ();8 9Matrix matrix2 =NewMatrix ();Ten matrix2. Scaleat (_vector, _vector, Currentfixedpoint.x, currentfixedpoint.y); One             varV2 =matrix2. Transform (v); A             returnv2;

after the above rotation, and then scaled to 1 of the vector is assumed to be PF1 ', and then scaled to PF1 the modulus of the length of the vector PF1, so that the F1 point coordinates can be derived, the same way F2;

1  // finding the coordinate value of a tangent point based on the obtained vector value 2             var tmppoint = point.add (P, secondpoint); 3             var tmpPoint2 = Point.add (P, thirdpoint);

This realizes the moving point P,f1,f2 will also follow the angle of the real-time changes, but the angle is unchanged, OK, now the dynamic two points have been confirmed, the next can be provided by the C # method to connect, so that the formation of a triangle, the triangle is from the inner center to extend to the dynamic point P graph.

1 //start connecting and draw points.2PathFigure pointpathfigure =NewPathFigure ();3Pointpathfigure.startpoint =Currentfixedpoint;4POINTPATHFIGURE.SEGMENTS.ADD (NewLineSegment (NewPoint (Tmppoint.x, Tmppoint.y),true));5POINTPATHFIGURE.SEGMENTS.ADD (NewLineSegment (NewPoint (tmppoint2.x, tmppoint2.y),true));6 7PathGeometry Mypathgeometry =NewPathGeometry ();8MYPATHGEOMETRY.FIGURES.ADD (pointpathfigure);

Second: Two independent graphs after that is the combination of graphics, C # Composite graphics provides a special method: Geometry.combine (Geometry geometry1, Geometry Geometry2, GeometryCombineMode mode, Transform Transform), not much to say do not know how to access information; Note:ellipse is the first shape, and the four center points are located on the edge of the matrix, respectively;

1             // Combining Graphics 2             var NULL ); 3 4             this. Drawgeometry (Streamgeometrycontext, geometry);

As follows: The following is the effect of any moving point p. Personal thoughts are for reference only. (This is the original article, if reproduced, please note clearly)

C # WPF Dynamic point arbitrary moving bubbles (solution using mathematical Pythagorean theorem, sine theorem, vector knowledge).