Android Note 29. A simple drawing board development

a simple drawing board development reprint please indicate source:http://blog.csdn.net/u012637501 ( embedded _ small J Sky )
first, drawing board principle 1. Linear effectThe drawing board can appear on the surface of the user on the touch screen freely draw arbitrary graphics, but in fact , when the user moves on the touch screen, two times the distance of the point of the drag event is very small, many very short straight lines connected to the naked eye, we look straight . When drawing graphics on the touchscreen, each line is drawn from the point at which the last drag event occurred to the point where the drag event occurred, and can be implemented using the path class provided by Android . Then, if each time the program draws a straight line from the point at which the last drag event occurred to the point at which the drag event occurred, the graphic that was drawn before the user is lost. Therefore, in order to preserve the content drawn by the user before, we refer to "double buffering technology" to deal with. 2. Double Buffering TechnologyThe so-called double buffering technology, that is, when the program needs to draw on the specified view, the program does not directly draw to the view component, but first drawn to an in-memory bitmap picture (that is, buffer), until the in-memory bitmap draw Well, Once again, the bitmap is drawn to the view component . second, the development of ideasin order to achieve touch screen drawing, we also need to provide a response to the touchscreen's drag events, that is, when touching the touch screen, the previous drag event occurred in the location and as the starting point of the drag action, and then, in the drag event to get the coordinates of the contact point (x, Y) and as the end point coordinates of the curve And finally, when the finger leaves the screen, it generates an event call the canvas's DrawPath method to draw the path graph and save it to the buffer bitmap. Dual buffering technology enables: 1. Define a buffer bitmap object and implement a Canvas object in the bitmap, call the buffer bitmap canvas to buffer the drawing; Bitmap cachebitmap= bitmap.createbitmap (view_width, View_height, config.argb_8888);
New Canvas (). SetBitmap (CACHEBITMAP)//bitmap for the specified canvas
. DrawPath (path, paint); Draw a graph into a bitmap
2. Call the canvas of the view to draw the bitmap object in the buffer (assuming Cachebitmap) to the View componentPaint bmppaint = new paint (); New Canvas (). Drawbitmap (cachebitmap, 0, 0, bmppaint)//Draw Cachebitmap to the view component. DrawPath (path, paint); Draw a graphic along path    third, the realization of the source code1.Handdraw.java: Sub-class inheriting from view

Package Com.example.path3;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.bitmap.config;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.path;import Android.util.attributeset;import Android.view.motionevent;import android.view.view;/* Realization: The use of double buffering to achieve the drawing board */public class Drawview extends view {float PreX; float PreY; private path Path; Public Paint Paint=null; Final int view_width = 320; Final int view_height = 480; Bitmap cachebitmap = null; Defines an in-memory picture that will be used as the buffer Canvas Cachecanvas = null; Defines the canvas object/*---------------------construction method on Cachecanvas----------------------------*/public Drawview (Context  Context, AttributeSet set) {Super (context, set); Path = new Path (); 1. Create a buffer of the same size as the VIEW Cachebitmap = Bitmap.createbitmap (View_width, View_height, config.argb_8888);  2. Set Cachecanvas will be drawn to the cachebitmap on memory Cachecanvas = new Canvas (); Cachecanvas.setbitmap (CACHEBITMAP); 3. Set brush (color, style, anti-aliasing) paint = new Paint (Paint.dither_flag); Create Brush Paint.setcolor (color.red); The brush color is red paint.setstyle (Paint.Style.STROKE); Sets the brush style Paint.setantialias (true); Anti-aliasing Paint.setdither (true); }/*---------------------listen for touch events----------------------------*/@Override public boolean ontouchevent (motionevent  Event) {//gets where the drag event occurred float x = Event.getx ();  Float y = event.gety ();     Switch (event.getaction ()) {case MotionEvent.ACTION_DOWN:path.moveTo (x, y);     PreX = x;     PreY = y;   Break    Case MotionEvent.ACTION_MOVE:path.quadTo (PreX, PreY, x, y);    PreX = x;    PreY = y;   Break    Case MotionEvent.ACTION_UP:cacheCanvas.drawPath (path, paint);//Draw a graph along the path and store it in Cachebitmap Path.reset ();  Break  } invalidate (); Return true;//returns True to indicate that the processing method has handled the event}///*--------------------drawing-------------------------*/@Override protected void  OnDraw (canvas canvas) {super.ondraw (canvas);  Paint Bmppaint = new paint (); A. Draw Cachebitmap to the View component Canvas.drawbitmap (cachebitmap, 0, 0, bmppaint); B. Draw Canvas.drawpath along path (path, paint); }}

2.handdraw.java: Program Main interface

Package Com.example.path3;import Android.graphics.blurmaskfilter;import Android.graphics.color;import Android.graphics.embossmaskfilter;import Android.os.bundle;import android.support.v7.app.ActionBarActivity; Import Android.view.menu;import Android.view.menuitem;public class Handdraw extends Actionbaractivity { Embossmaskfilter Emboss;    Blurmaskfilter Blur;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.main);        Emboss = new Embossmaskfilter (new float[] {1.5f,1.5f,1.5f}, 0.6f, 6,4.2f);    Blur = new Blurmaskfilter (8, BlurMaskFilter.Blur.NORMAL); }//load R.menu.hand_draw corresponding menu and add to menu @Override public boolean Oncreateoptionsmenu (Menu menu) {Getmenuinfla         ter (). Inflate (R.menu.hand_draw, menu);    return true;         }//The callback method after the menu is clicked @Override Public boolean onoptionsitemselected (MenuItem item) {int id = item.getitemid (); Drawview dv = (Drawview) fiNdviewbyid (R.id.draw); Determine which menu item is clicked and respond to the switch (ID) {//Color setting Case r.id.red://Red Dv.paint.setColor (C Olor.          RED);          Item.setchecked (TRUE);         Break          Case R.id.green://Green Dv.paint.setColor (Color.green);          Item.setchecked (TRUE);         Break          Case R.id.blue://Red Dv.paint.setColor (Color.Blue);          Item.setchecked (TRUE);                       Break          Brush size Setting Case r.id.width_1://Number Brush dv.paint.setStrokeWidth (1);         Break          Case r.id.width_2://Number Brush dv.paint.setStrokeWidth (2);         Break          Case R.ID.WIDTH_5://Number Brush Dv.paint.setStrokeWidth (5);                  Break          Fuzzy effect case r.id.blur:dv.paint.setmaskfilter (blur);         Break          Relief effect Case R.id.emboss:dv.paint.setmaskfilter (emboss);        Break    } return super.onoptionsitemselected (item); }} 

3.menu.xml: Menu Layout file

<menu xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/ Res-auto "xmlns:tools=" Http://schemas.android.com/tools "tools:context=" Com.example.path3.HandDraw "> <!-- Define a set of color options menu Items--<item android:title= "@string/color" > <menu> <group android:checkablebehavior= " Single "> <item android:id=" @+id/red "android:title=" @string/color_red "/> <item android:id=" @+id/green " android:title= "@string/color_green"/> <item android:id= "@+id/blue" android:title= "@string/color_blue"/> </group> </menu> </item> <!--define a set of stroke Size Options menu item--<item android:title= "@string/width" > <menu> <group android:checkablebehavior= "single" > <item android:id= "@+id/width_1" android:title= "@ String/width1 "/> <item android:id=" @+id/width_2 "android:title=" @string/width2 "/> <item android:id=" @+ Id/width_5 "android:title=" @string/width5 "/> </group> </menu> </item> <!----> <item android:id= "@+id/blur" android:title= "@string/blur"/> <!--define a set of width options menu items--<item  Android:id= "@+id/emboss" android:title= "@string/emboss"/> </menu>

4.main.xml: main interface Layout

5./res/values/string.xml: string resource file

<?xml version= "1.0" encoding= "Utf-8"?><resources> <string name= "App_name" > Simple artboards </string>    <string name= "Color" > select color </string> <string name= "color_red" > Red </string> <string Name= "Color_green" > Green </string> <string name= "Color_blue" > Blue </string>  <string name= " width > Brush size </string> <string name= "width1" >1 number brush </string> <string name= "width2" >2 number Brush < /string> <string name= "width5" >3 brush </string>  <string name= "blur" > Blur effects </string> < String name= "Emboss" > Emboss effect </string></resources>

Effect Demo:

Android Note 29. A simple drawing board development