Notepad (9) for android projects ----- eraser, brush size, and paint color for the canvas Function
The above Section has implemented the painting, deletion, and restoration functions in the drawing board, as well as the eraser, setting the paint brush size and color is not implemented, this section will implement these functions one by one.
First look:
The first shows the function of setting the paint brush color, the second shows the color of setting the paint brush size, and the third shows the function of the eraser, this section sets the icon color to blue and adds the leftmost button (in fact, an item is added to the gridview ).
Next we will discuss the main idea of setting the size and color of a paint brush by using an eraser:
1. Eraser function:
Basic Principles:The eraser is a paint brush of the same color as the canvas in the screen touch. It is simple to implement the eraser function.
1) initialize the paint brush and set the color of the paint brush to white (in fact, set it to the canvas color ).
2) set the size of the paint brush to a proper size.
3) Use a variable to remember the color of the eraser and use it again after other operations.
2. Set the paint brush size:
1) initialize the paint brush.
2) set the paint brush size to the selected size.
3) Use a variable to remember the size of the current paint brush. It is used to keep the size of the previously set paint brush after other operations.
3. Set the paint brush color:
1) initialize the paint brush.
2) set the paint brush color to the selected color.
3) Use a variable to remember the color of the current paint brush. It is used to maintain the color of the previously set paint brush after other operations.
The main code is as follows:
private Bitmap mBitmap; private int currentColor = Color.RED; private int currentSize = 5; private int currentStyle = 1;
// Set the Paint brush style public void setPaintStyle () {mPaint = new Paint (); mPaint. setAntiAlias (true); mPaint. setDither (true); mPaint. setStyle (Paint. style. STROKE); mPaint. setStrokeJoin (Paint. join. ROUND); mPaint. setStrokeCap (Paint. cap. ROUND); mPaint. setStrokeWidth (currentSize); if (currentStyle = 1) mPaint. setColor (currentColor); else {mPaint. setColor (Color. WHITE );}}
// Initialize the canvas public void initCanvas () {setPaintStyle (); mBitmapPaint = new Paint (Paint. DITHER_FLAG); // canvas size mBitmap = Bitmap. createBitmap (bitmapWidth, bitmapHeight, Bitmap. config. RGB_565); mCanvas = new Canvas (mBitmap); // All mCanvas objects are saved in mBitmap. drawColor (Color. WHITE); mPath = new Path (); mBitmapPaint = new Paint (Paint. DITHER_FLAG );}
Set the paint brush style:
// Set the paint brush style public void selectPaintStyle (int which) {if (which = 0) {currentStyle = 1; setPaintStyle () ;}// when an eraser is selected, set the color to white if (which = 1) {currentStyle = 2; setPaintStyle (); mPaint. setStrokeWidth (20 );}}
Set the paint brush size:
// Select the paint brush size public void selectPaintSize (int which) {int size = Integer. parseInt (this. getResources (). getStringArray (R. array. paintsize) [which]); currentSize = size; setPaintStyle ();}
Set the paint color:
// Set the paint brush color public void selectPaintColor (int which) {currentColor = paintColor [which]; setPaintStyle ();}
Of course, these methods are implemented in the Custom view, that is, PaintView. Next, you can call the custom View method by clicking the button at the bottom to implement the corresponding functions.
// Select the paint brush style case 0: showMoreDialog (view); break; // paint brush size case 1: showPaintSizeDialog (view); break; // paint color case 2: showPaintColorDialog (view); break;
// Public void showPaintColorDialog (View parent) {AlertDialog. builder alertDialogBuilder = new AlertDialog. builder (this, R. style. custom_dialog); alertDialogBuilder. setTitle ("select paint color:"); alertDialogBuilder. setSingleChoiceItems (R. array. paintcolor, select_paint_color_index, new DialogInterface. onClickListener () {@ Overridepublic void onClick (DialogInterface dialog, int which) {select_paint_color_index = which; paintView. selectPaintColor (which); dialog. dismiss () ;}}); alertDialogBuilder. setNegativeButton ("cancel", new DialogInterface. onClickListener () {@ Overridepublic void onClick (DialogInterface dialog, int which) {dialog. dismiss () ;}}); alertDialogBuilder. create (). show () ;}// the paint brush size dialog box public void showPaintSizeDialog (View parent) {AlertDialog. builder alertDialogBuilder = new AlertDialog. builder (this, R. style. custom_dialog); alertDialogBuilder. setTitle ("select the paint brush size:"); alertDialogBuilder. setSingleChoiceItems (R. array. paintsize, select_paint_size_index, new DialogInterface. onClickListener () {@ Overridepublic void onClick (DialogInterface dialog, int which) {select_paint_size_index = which; paintView. selectPaintSize (which); dialog. dismiss () ;}}); alertDialogBuilder. setNegativeButton ("cancel", new DialogInterface. onClickListener () {@ Overridepublic void onClick (DialogInterface dialog, int which) {dialog. dismiss () ;}}); alertDialogBuilder. create (). show () ;}// the public void showMoreDialog (View parent) {AlertDialog dialog box appears when you select a paint brush or eraser. builder alertDialogBuilder = new AlertDialog. builder (this, R. style. custom_dialog); alertDialogBuilder. setTitle ("select paint brush or eraser:"); alertDialogBuilder. setSingleChoiceItems (R. array. paintstyle, select_paint_style_index, new DialogInterface. onClickListener () {@ Overridepublic void onClick (DialogInterface dialog, int which) {select_paint_style_index = which; paintView. selectPaintStyle (which); dialog. dismiss () ;}}); alertDialogBuilder. setNegativeButton ("cancel", new DialogInterface. onClickListener () {@ Overridepublic void onClick (DialogInterface dialog, int which) {dialog. dismiss () ;}}); alertDialogBuilder. create (). show ();}
Arrays. xml is used as follows:
@string/track_line
@string/Eraser
5
10
15
20
25
30
RED
BLUE
BLACK
GREEN
YELLOW
CYAN
LTGRAY
So far, all the functions of the canvas have been implemented.
In fact, another interesting feature is to set a pencil icon for the paint brush. The main principle is to load the pencil image in the ondraw method of the custom View, and set the image to move along with the path.
Add the following to the ondraw method in the Custom View:
// If (this. isMoving & currentColor! = Color. WHITE) {// set the paint brush icon Bitmap pen = BitmapFactory. decodeResource (this. getResources (), R. drawable. pen); canvas. drawBitmap (pen, this. mX, this. mY-pen. getHeight (), new Paint (Paint. DITHER_FLAG ));}