Android Project Scratch award detailed (ii)

Android Project Scratch award details (i)

Objective

In the last period we simply realized the function of an artboard, the user can scribble on the above, in fact, scraping award is also the case, the user scraping the prize is also a random graffiti.

Principle of scraping and scraping award

A total of two layers of canvas, the bottom canvas to hold the picture of the winning information, the upper canvas is a cover layer, we will be the bottom canvas as the information layer, the upper canvas is called as a covering layer.
Users re-cover layer painting, we will user paint traces from the cover layer erase, display the content of the information layer, then achieved a simple scratch award.

Realize

Based on the code of the previous period, let's explain it.
In the previous issue in the comments I also have a hint to what the code is today's content, let's take a look at it.

1. Setting the background map

   First of all, we need to set the background of the information layer, the background image is random, remember to put the picture in the Drawable folder

   //Background image
     BitmapDrawable bitmap = (BitmapDrawable) getResources().getDrawable(R.drawable.rewrite6);//Get the specified name from the drawable folder and convert it to bitmapdrawable, R.drawable.xxx
     Background = bitmap.getBitmap();//bitmapdrawable Get the bitmap by getBItmap method
     Background = Bitmap.createScaledBitmap(background,width,height,true);//Use Bitmap's static method to create a suitable bitmap (the width and height are obtained from the previous onMeasure method, if you are not sure, please go back to the previous review)
   

2. 
   

   Draw a background image using canvas

   
   

   
   

   Supplemental Xfermode

   
   

   Xfermode abroad has the great God called the transition mode, this translation is more appropriate but I am afraid not easy to understand, we can also call the image blending mode, because the so-called "transition" is actually a kind of image mixing, this method is similar to the setcolorfilter we talked about above.

   Look at the API documentation and discover that there are three subclasses: Avoidxfermode, Pixelxorxfermode and Porterduffxfermode, these three subclasses are much more complex than the three subclasses of Setcolorfilter.

   Because of the Avoidxfermode, Pixelxorxfermode have been marked as obsolete, so this time the main research is still in use Porterduffxfermode:

   This class also has a constructor method with only one parameter Porterduffxfermode (Porterduff.mode Mode)

   
   

   There are 18 modes in the mode, after Google added add and overlayl two modes, the following is the plot of 16 modes

   
   

   
   

   
   

   
   

   
   

   How do we understand this picture? We just remember a little, first draw DST, and then draw SRC, some students say it is not easy to remember Ah, simple, teach you a formula, first draw the bottom (DST), and then draw on (SRC)

   
   

   • The first mode clear is clear
   • The second SRC shows only the upper picture
   • The third DST shows only the underlying image
   • The fourth srcover, showing three-fourths of the DST picture, shows all of the SRC
   • The rest is not much to say,

   
   

   We're going to use dsc_out to explain

   
   

   
   

   First draw DST, then painting src,src disappear, only the DST, this is actually the principle of eraser, we use this erase layer can be used to display the image of the information layer

   
   

   
   

   After understanding the principle, we look at the OnDraw method, in the OnDraw method, using canvas to draw the background picture, where the order is the first picture of the information layer, and then to the cover layer, the cover layer will be mbitmap directly draw out, review, here is the use of double buffering technology, Canvas directly copied the Mbitmap, displayed in the view, Mbitmap is actually mcanvas on the above to draw the user's finger movement traces
   Canvas.drawbitmap (background,0,0,null);//Draw the information layer

   
   

   canvas.drawBitmap(mBitmap, 0,0, null);//Draw a cover layer
     mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//Set xfermode dst\_out
     mCanvas.drawPath(mPath, mOutterPaint);//mCanvas draws the movement trace of the user's finger in mBitmap 
   

Test picture