Windows Phone 7: Use framereported to create a simple drawing program

A simple WP7 plotting program that supports multi-touch, that is, different touch lines and multiple touch points of the same touch will have different colors.

 

The preparation is very simple. On the interface, there is an inkpresenter control called "inkpresenter:

<Inkpresenter name = "inkpresenter"/>

 

The background Code also requires a random color generation method, as shown below:

Static random = new random ();

Color getrandomcolor ()

{

Return color. fromargb (255, (byte) random. Next (256), (byte) random. Next (256), (byte) random. Next (256 ));

}

 

 

The next step is to use the touch. framereported event to complete the program logic.

 

The Touch type is in the system. Windows. Input namespace. In this way, any controls that touch the touch point are distributed and accepted, and everything is centered on the original touch, rather than being allocated to the control like a manipulation event, fortunately, our examples are all centered around inkpresenter and the above problems will not occur. We need to use a dictionary to store all currently touch stroke. The dictionary key is touchdevice. id attribute, so that when the touch is in progress, the touchdevice. id identifies the current stroke and then adds the corresponding styluspoint to the Stoke. After a touch point is completed, the stroke is removed from the dictionary.

 

Complete code:

// + Using system. Windows. Ink;

 

// Constructor

Public mainpage ()

{

Initializecomponent ();

Touch. framereported + = new touchframeeventhandler (touch_framereported );

}

 

// Stores all the currently touch stroke keys. The key is the touchdevice. ID attribute.

Dictionary <int, stroke> strokes = new dictionary <int, stroke> ();

 

Void touch_framereported (Object sender, touchframeeventargs E)

{

// Obtain all touchpoints

VaR points = E. gettouchpoints (inkpresenter );

Foreach (VAR point in points)

{

Switch (point. Action)

{

Case touchaction. Up:

// Complete one touch and delete the corresponding stroke

Strokes. Remove (point. touchdevice. ID );

Break;

Case touchaction. Move:

// Move and add styluspoint to stroke

VaR stroke = strokes [point. touchdevice. ID];

Stroke. styluspoints. Add (New styluspoint (point. position. X, point. position. y ));

Break;

Case touchaction. down:

// Add a new touch point to the internal dictionary and inkpresenter.

VaR drawingattr = new drawingattributes ();

Drawingattr. Height = drawingattr. width = 10;

Drawingattr. Color = getrandomcolor ();

 

VaR newstroke = new stroke ();

Newstroke. drawingattributes = drawingattr;

Newstroke. styluspoints. Add (New styluspoint (point. position. X, point. position. y ));

 

Strokes [point. touchdevice. ID] = newstroke;

Inkpresenter. Strokes. Add (newstroke );

Break;

}

}

}