Silverlight: learning notes of the beiser curve Flash/flex (20): beiser Curve

Silverlight does not directly provide the method of drawing lines, circles, and curves like flash. It can only use path to generate the besell curve.

The following is an exampleCode:

XAML section:

<Usercontrol X: class = "slcurvesample. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable =" D "D: designheight = "400" D: designwidth = "400"> <canvas X: name = "layoutroot" background = "white"> <ellipse width = "10" Height = "10" strokethickness = "1" stroke = "red" X: name = "point1"> </ellipse> <textblock text = "left point" name = "tbleftpoint" visibility = "Collapsed"> </textblock> <ellipse width = "10" height = "10" strokethickness = "1" stroke = "red" X: name = "point2"> </ellipse> <textblock text = "Right Point" name = "tbrightpoint" visibility = "Collapsed"> </textblock> <path stroke = "red" strokethickness = "1" X: name = "p"> <path. DATA> <pathgeometry. figures> <pathfigure. segments> <beziersegment/> </pathfigure. segments> </pathfigure> </pathgeometry. figures> </pathgeometry> </path. DATA> </path> </canvas> </usercontrol>

XAML. CS part:

Using system; using system. windows; using system. windows. controls; using system. windows. input; using system. windows. media; namespace slcurvesample {public partial class mainpage: usercontrol {point _ leftpoint = new point (); point _ rightpoint = new point (); beziersegment seg = NULL; Public mainpage () {initializecomponent (); this. loaded + = pageloaded;} void pageloaded (Object sender, routedeventargs E) {This. sizechanged + = pagesizechanged; this. mousemove + = pagemousemove; this. loaded-= pageloaded;} void pagemousemove (Object sender, mouseeventargs e) {point mousepos = E. getposition (this); // perform interactive double scale = math on the line width and left and right circles based on the mouse position. ABS (_ leftpoint. y-mousepos. y)/_ leftpoint. y; point1.width = point1.height = 10 + 40 * scale; point2.width = point2.height = point1.width; p. strokethickness = 3-2 * scale; // redraw draw (); // calculate the location of the two control points. Point ctlpoint1 = new point () {x = (mousepos. X + _ leftpoint. x) * 0.5, y = (mousepos. Y + _ leftpoint. y) * 0.5}; point ctlpoint2 = new point () {x = (mousepos. X + _ rightpoint. x) * 0.5, y = (mousepos. Y + _ rightpoint. y) * 0.5}; If (SEG! = NULL) {seg. point1 = ctlpoint1; // seg. point2 = ctlpoint2; // second control point of the beam curve} void pagesizechanged (Object sender, sizechangedeventargs e) {draw ();} void draw () {double _ stagewidth = This. actualwidth; double _ stageheight = This. actualheight; double _ margin = 80; // locate the two circles on the left and right sides of point1.setvalue (canvas. topproperty, _ stageheight * 0.5); point1.setvalue (canvas. leftproperty, _ margin); point2.setvalue (canvas. topproperty, _ stageheight * 0.5); point2.setvalue (canvas. leftproperty, _ stagewidth-_ margin); // calculates the center of the left-side small circle _ leftpoint. X = (double) point1.getvalue (canvas. leftproperty) + point1.width * 0.5; _ leftpoint. y = (double) point1.getvalue (canvas. topproperty) + point1.height * 0.5; tbleftpoint. setvalue (canvas. leftproperty, _ leftpoint. x-20); tbleftpoint. setvalue (canvas. topproperty, _ leftpoint. Y + 10); // calculate the center _ rightpoint of the small circle on the right. X = (double) point2.getvalue (canvas. leftproperty) + point2.width * 0.5; _ rightpoint. y = (double) point2.getvalue (canvas. topproperty) + point2.height * 0.5; tbrightpoint. setvalue (canvas. leftproperty, _ rightpoint. x-20); tbrightpoint. setvalue (canvas. topproperty, _ rightpoint. Y + 10); pathfigure figure = (P. data as pathgeometry ). figures [0]; figure. startpoint = _ leftpoint; // set the starting point seg = figure. segments [0] As beziersegment; seg. point3 = _ rightpoint; // end of the Beitz curve }}}

The above code first places a path in the canvas, then dynamically modifies the control point of the besell curve in the background, and adds some simple interaction with the mouse. For more detailed principles, see the flash/flex learning notes I recorded earlier (20): besell Curve

Run: