Android Project Scratch award detailed (ii)

Source: Internet
Author: User

Android Project Scratch award details (i)


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.


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

      //背景图 BitmapDrawable bitmap = (BitmapDrawable) getResources().getDrawable(R.drawable.rewrite6);//从drawable文件夹中获得指定名称的该图片,并转型为bitmapdrawable, background = bitmap.getBitmap();//bitmapdrawable通过getBItmap方法得到bitmap background = Bitmap.createScaledBitmap(background,width,height,true);//利用Bitmap的静态方法创建一个合适的bitmap(宽高都是之前onMeasure方法中获取的,不太清楚的同学请去上期回顾一下)
  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);//画出遮盖层 mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//设置xfermode dst\_out mCanvas.drawPath(mPath, mOutterPaint);//mCanvas在mBitmap中画出用户的手指的移动痕迹
Test picture

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.