Silverlight mathematical engine (5)-animation demonstration

In the preceding four sections, we have implemented a hybrid expression parsing and evaluation process, which is not intuitive. Therefore, we will make a simple animation to demonstrate the entire process, it seems that work is not so awesome :)

There are two procedures to be demonstrated,Parsing processAndEvaluate Process.

Let's talk about the parsing process first. We have saved the nodes to the foundnodes of calculator in the parsing order. The constant and variable (x) are the bottom node, therefore, it does not depend on the underlying node, while other nodes depend on some other nodes. If we plot this dependency, It is a tree structure, and the root node of the tree is the node we finally parsed.

The type of the tree can be determined based on the node with the maximum number of dependent nodes. If there is only binary, the tree is a binary tree. If multiple parameter functions are used, such as (max, 3. However, it can be determined that in most cases Binary Trees are not full Binary Trees.

The job we need to do is to display the tree as a graph. This requires computing the position of each node and then connecting the parent and child nodes with a line, A tree structure is displayed, and there are many types of computing logic for location, we use a simple method-the structure of the full tree (because the full tree is more symmetrical than the tree with less arm and legs, it is convenient to calculate the arrangement position ), then, calculate the position of each node in the current tree in the full tree, and then check the number to get a seat.

Let's take a look at the definition of the tree (the specific implementation code is long and the logic is simple, so we won't post it out. Let's look at the source file ), we still use the freely-deployed canvas as the tree and treenode containers:

Public class tree: canvas {double nodesize = 50; Public int treetype {Get; private set;} private inode rootnode; Public textblock expression; private list <inode> nodes; // list in resolution order} public class treenode: canvas {public const int zindex = 200; Public inode node {Get; private set ;} private TREE tree {get {return parent as tree;} public point center {Get; set;} public textblock text; Public ellipse shape ;}

There is no explanation for the definition. In fact, animation is also a very simple animation, such as moving or changing elements. We focus on the sequence of processes:

1. Resolution order: we have saved the foundlist
2. Order of evaluation: we add a static attribute calculatednodes to nodebase to record it. Because getvalue () is called recursively, we can call getvalue () again () add the node to the calculatednodes list before return.

   Public override double getvalue () {var D = 0-node. getvalue (); Record (); // Add node to the calculatednodes list return D ;}

   Although they are all simple animations, there are indeed a lot of mechanical code to be written. What are your best practices for avoiding machinery? After thinking twice, I finally wrote several common methods for handling repetitive events, saving a lot of mechanical work. Let's show it out:

// Continuous event execution of a single element, such as moving the canvas from (100,100) to (), public static void runcommand <t> (double interval, int times, t OBJ, action <t> cmd, // Main Process Action <t> startcmd, // initialization process action <t> overcmd // final process) {var timer = new dispatchertimer {interval = timespan. frommilliseconds (interval)}; var itimercount = times; timer. tick + = (S, e) =>{ if (itimercount <= 0) {timer. stop (); run (overcmd, OBJ); return;} Run (CMD, OBJ); itimercount -- ;}; run (startcmd, OBJ); timer. start ();} // continuous event processing for batch elements. For example, you can move 10 canvases from (0, 0) to their respective target locations, public static void runcommand <t> (double interval, list <t> list, Action <t> cmd, Action startcmd, Action overcmd) {var timer = new dispatchertimer {interval = timespan. frommilliseconds (interval)}; int iindex = 0; timer. tick + = (S, e) =>{ if (iindex> = List. count) {timer. stop (); run (overcmd); return;} cmd (list [iindex ++]) ;}; run (startcmd); thread. sleep (100); timer. start ();}

Let's take a look at their usage: playwithshapemoving () enables a node to move from the resolution position to its position in the tree, which belongs to the repetitive event processing of a single element, play () an animated demonstration of all nodes is implemented, including playwithshapemoving (), and playwithgetvalues () is passed as "Action overcmd, it makes sure that all nodes start the evaluation process only after each other. Is it quite simple:

// Private void playwithshapemoving (treenode shape, point from, point to) {const int times = 8; double offsetx = (. x-from. x)/times; double offsety = (. y-from. y)/times; eventutils. runcommand (100, times, shape, S => // animation main process: Repeated times {var P = S. center (); S. centerto (new point (P. X + offsetx, P. Y + offsety);}, S => // initialization process: {shape. centerto (from); // move to the start position shape. visibility = visibility. visible; expression. TEXT = shape. node. expression;}, S => // final action: draw a line to connect the Parent and Child Nodes S. drawlinestochilds ();} // animation demo parsing and value process public void play () {var shapes = children. oftype <treenode> (). tolist (); shapes. foreach (S => S. visibility = visibility. collapsed); var startposition = expression. center (); var shapelist = // sort shapes nodes according to the resolution order. select (node => shapes. firstordefault (n => N. node = node )). tolist (); eventutils. runcommand (1000, shapelist, S => playwithshapemoving (S, startposition, S. center), // The animation demo parsing process is null, // initialization (none) playwithgetvalues // The animation demo value process );}

Let's see how it works:

[Source code and demo address]

Well, the parsing of expressions ends here. Although we still have a lot of things to do, such as calculation of the valid range of variables, detection of illegal expressions, performance testing, etc ..., This is all important to be improved and will be improved as needed in the future!

In the next section, we will turn on a new functional module to implement the ing function. Because UI programming is involved, we will deal with a lot of events, and geometric plotting is not an article that can be clearly explained! In the next section, let's start with the "point" of one of the three major elements of simple ing, and then explore our wonderful geometric universe from point to line from line to plane!