Android Project Scratch award detailed (iv)

Source: Internet
Author: User
Tags drawtext

Android Project Scratch award details (iii)


In the previous issue we have completed the basic function of scraping card, this issue is to add a function to our project and beautify

    • Add functionality users scrape to a certain extent, clear the cover layer
    • Put a picture on the overlay to increase the user experience
    • Add a scratch-out bonus callback monitor

      Implementation 1. Auto-elimination effect

      Let's first look at the bitmap getPixels method.


      The Getpixels () function intercepts a picture, from the specified offset position (offset), at the specified position (x, y), to the specified width and height (width,height), converting each pixel color of the resulting image to an int value, deposited pixels.
      As for the parameter stride, looked up the information, found not very understand, so that is not continue to dig, we directly use just

We need a thread to complete our compute pixel, because the calculation cannot be performed in the UI thread all the time, it may stutter, and when the user lifts his finger, we start the calculation process to calculate the pixel that the user erased.

This function is somewhat complex, want to understand, need to know UI thread update view knowledge and Java process part of knowledge, recommend to see this handouts process update UI

    Private Runnable mrunnable = new Runnable () {int[] pixels;        @Override public void Run () {int w = mbitmap.getwidth ();        int h = mbitmap.getheight ();        float Wipearea = 0;//erase pixel count, initially 0 float totalarea = w * h;//all pixel points pixels = new int[w * h]; /** * pixels The number of line spacing (must be greater than or equal to the bitmap width) in the first pixel index value * Stride pixels[] In the array that receives the bitmap color value * Offset written to pixels[] 。         The x-coordinate value of the first pixel that can be read as negative * x from a bitmap.         * Y the y-coordinate value of the first pixel read from the bitmap * width of pixels read from each line * Height reads the number of rows */Bitmap B = mbitmap;       B.getpixels (pixels, 0, W, 0, 0, W, h);                For loop to find the pixel point that the user erased, 0 is the erase, wipearea+1 for (int i = 0; i < Totalarea; i++) {if (pixels[i] = = 0) {            wipearea++; }}//if (Wipearea > 0 && totalarea > 0) {int percent = (int) (Wipearea * 100/totalarea);//Calculate the ratio if (Percent >) {isclear= True;//isclear is a previously declared global variable, postinvalidate ();//A child process that calls this method to redraw view}}}; 

There is a for loop in the above code to record the erase pixel point, some doubt, because the Yang big God uses the different, the hung Yang God is using the following nested loop

    for (int i = 0; i < w; i++) {            for (int j = 0; j < h; j++) {                int index = i + j * w;                if (pixels[index] == 0) {                    wipeArea++;                }            }        }

And then we need to rewrite the code, first of all, to add our actions to the user lifting the finger in the touch event.

     case MotionEvent.ACTION_UP:            new Thread(mRunnable).start();            break;

Then, by isclear this variable to control whether to draw the path, the onDraw method to make such a modification

    protected void onDraw(Canvas canvas) {        canvas.drawText(message,mBitmap.getWidth()/2-mBackground.width()/2,getMeasuredHeight()/2+mBackground.height()/2,messagePaint);        if (!isClear){            drawPath();            canvas.drawBitmap(mBitmap, 0,0, null);        }    }

When Canvas writes out text, it does not draw a cover layer, so that it achieves the effect of removing the cover layer.

Here you need to pay attention to if the conditions , but also to isClear use the volatile decoration, popular is to add a lock to prevent concurrency errors

2. Masking layers Drawing Pictures

Perhaps everyone to this function very disdain, think oneself before not will, in fact, not so simple, I myself try when all appeared error, after searching data try to achieve effect.
First of all, I have a problem.

    • Only part of the picture is displayed
    • Brushes can not clear the picture, when the painting appears black handwriting

First, we can solve the problem by bitmap static method.

    public static Bitmap createScaledBitmap(Bitmap src, int dstWidth, int dstHeight,boolean filter)

Pass in a bitmap object that needs to be resized, followed by length and height, and the last parameter passed in true
Background = Bitmap.createscaledbitmap (background,width,height,true);//Zoom to Bitmap

The second problem, because we're using a double-buffered technical drawing, so we need to draw the overlay's picture first in the Mbitmap.
Mbitmap = Bitmap.createbitmap (width, height, Bitmap.Config.ARGB_8888);//Create a 32-bit Bitmap with the obtained width and height
Mcanvas = new Canvas (MBITMAP);
Mcanvas.drawbitamap (Background,0,0,null);

3. Callback Interface
    public interface onGuaCompleteListener{        void complete();    }    private onGuaCompleteListener mlistener;    public void setGuaCompleteListener(onGuaCompleteListener mlistener) {        this.mlistener = mlistener;    }

Then add a callback to the onDraw method.

    protected void onDraw(Canvas canvas) {        Log.d(TAG, "onDraw: 画");        canvas.drawText(message,mBitmap.getWidth()/2-mBackground.width()/2,getMeasuredHeight()/2+mBackground.height()/2,messagePaint);        if (!isClear){            drawPath();            canvas.drawBitmap(mBitmap, 0,0, null);        }else if (mlistener!=null){            mlistener.complete();        }    }

When the 60 is drawn, the value of Isclear is changed to true, and then it is entered into the else if, the callback completes the Scraping award interface

We set the listener in mainactivity to listen for the scratch card, pop a toast or a dialog box, and I'll just pop up a toast here for the sake of simplicity.

    GuajiangView mView = (GuajiangView) findViewById(;    mView.setGuaCompleteListener(new GuajiangView.onGuaCompleteListener() {        @Override        public void complete() {            Toast.makeText(MainActivity.this, "hello", Toast.LENGTH_SHORT).show();        }    });    
Test diagram

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.