Android graffiti technology and scratch Example Analysis, android scratch

Android graffiti technology and scratch Example Analysis, android scratch
Overview:

A long time ago, I wanted to study graffiti in Android. It was actually not a research. After all, it was a relatively simple knowledge point. The following describes how to implement graffiti and scratch Based on Canvas and onTouchEvent.

Refer:

Http://blog.csdn.net/lmj623565791/article/details/40162163

This person's blog is really good. Anyone who wants to learn can also refer to other blogs of this Daniel.

Http://blog.csdn.net/t12x3456/article/details/10432935

Example Analysis:

The following are two simple examples: Simple Analysis and effect display of graffiti technology and scratch.

1. Graffiti ideas analysis and code Display

Those who have learned Canvas should know that we can overwrite a canvas on a View and implement the onTouchEvent method of the View so that we can leave the track when the screen is touched on the Canvas, there is also a class for track records that needs to be understood-Path. For more information about Canvas, click here.

Android will obtain the size, position, and other parameters of the control in the layout when drawing the interface, and then draw the layout. Here we only draw through onMeasure and onDraw, but onLayout is not used because there is only one control, and there is not much Dynamic Layout to be processed. For Path records, onTouchEvent is required.

Measurement size:

Protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth (); int height = getMeasuredHeight (); // initialize bitmap mBitmap = Bitmap. createBitmap (width, height, Config. ARGB_8888); mCanvas = new Canvas (mBitmap );}

Drawing:

protected void onDraw(Canvas canvas) {        drawPath();        canvas.drawBitmap(mBitmap, 0, 0, null);    }

Path drawing:

We use Path to save the Path track of our touch. As follows:

private void drawPath() {        mFingerPaint.setStyle(Paint.Style.STROKE);        mCanvas.drawPath(mPath, mFingerPaint);    }

Touch event:

MotionEvent is a class that is very important to touch events and cannot be ignored. It has the following three common action events:

1. MotionEvent. ACTION_DOWN // when you press

2. MotionEvent. ACTION_MOVE // The touch is being moved.

3. MotionEvent. ACTION_UP // when the touch leaves

Let's take a look at the onTouchEvent implementation process:

public boolean onTouchEvent(MotionEvent event) {        int action = event.getAction();        int x = (int) event.getX();        int y = (int) event.getY();        switch (action) {        case MotionEvent.ACTION_DOWN:            actionMotionEventDown(x, y);            break;                    case MotionEvent.ACTION_MOVE:            actionMotionEventMove(x, y);            break;        }        invalidate();        return true;    }

In the above Code, we implemented the logic of the press when we press it, and implemented the Move logic when the finger moves on the screen. And don't forget invalidate (). The main function of the invalidate () function is to request the View tree for re-painting. If you do not call it, nothing will happen.

2. Logic Analysis and code Display

Analysis: in fact, the idea of implementation is very similar to graffiti. They are all painted in a single place, leaving traces (laughter, but not without reason. ^_^ ). However, the difference is that the place where the paint brush passes through during the scratch drawing process is transparent. Here you may say that it is simple, not just to overwrite two layers of images, but to draw a touch path, the color of the touch path is transparent. Is that true? You can try it. Of course, this is not feasible. You can try the final effect of the practice on your own. The key point here is that we need to erase the above masked layer and keep the bottom layer below. Here we use the image mixing technology.

It seems very advanced to hear the name of the graphic mixed technology, but it is indeed a good technology, but Java has been encapsulated for us, we just need to know how to use it, using it is not that difficult.

For a detailed description of image mixing, you can refer to here. I will not duplicate the wheel. However, I would like to briefly introduce one of the three sub-classes of Xfermode: porterduxfermode. This is a very powerful conversion mode. You can use any of the 16 Porter-Duff rules for image synthesis to control how Paint interacts with existing Canvas images.

Porter-Duff rules are as follows:

PorterDuff. Mode is an enumeration class. There are 16 enumerated values in total:
1. PorterDuff. Mode. CLEAR
The drawn image is not submitted to the canvas.
2. PorterDuff. Mode. SRC
Show upper-layer picture
3. PorterDuff. Mode. DST
Show lower layer picture
4. PorterDuff. Mode. SRC_OVER
Normal painting display, stacked on the upper and lower layers.
5. PorterDuff. Mode. DST_OVER
The upper and lower layers are displayed. The lower layer is displayed on top.
6. PorterDuff. Mode. SRC_IN
Draw the intersection of two layers. The upper layer is displayed.
7. PorterDuff. Mode. DST_IN
Draw the intersection of two layers. The lower layer is displayed.
8. PorterDuff. Mode. SRC_OUT
Draw non-intersection parts from the upper layer.
9. PorterDuff. Mode. DST_OUT
Draws non-intersection parts from the lower layer.
10. PorterDuff. Mode. SRC_ATOP
Take the lower-layer non-intersection part and the upper-layer intersection part
11. PorterDuff. Mode. DST_ATOP
Take the non-intersection part of the upper layer and the intersection part of the lower layer
12. PorterDuff. Mode. XOR
Exclusive or: remove the intersection of the two layers
13. PorterDuff. Mode. DARKEN
Take all the regions of the two layers, and the color of the intersection is deepened.
14. PorterDuff. Mode. LIGHTEN
Take all two layers to light the intersection color
15. PorterDuff. Mode. MULTIPLY
Color after overlapping the intersection of the two layers
16. PorterDuff. Mode. SCREEN
Take all the regions of the two layers, and the intersection area becomes transparent.

What we need is DstOut. In the code, we implement the following:

Private void drawPath () {mFingerPaint. setStyle (Paint. style. STROKE); // set the mode when the two images intersect (draw the non-intersection part from the lower layer) mFingerPaint. setXfermode (new porterduxfermode (PorterDuff. mode. DST_OUT); mCanvas. drawPath (mPath, mFingerPaint );}

The process of measurement and drawing is as follows:

@ Override protected void onDraw (Canvas canvas) {canvas. drawText (mText, getWidth ()/2-mTextBound. width ()/2, getHeight ()/2 + mTextBound. height ()/2, mBackPint); if (! IsComplete) {drawPath (); canvas. drawBitmap (mBitmap, 0, 0, null) ;}@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth (); int height = getMeasuredHeight (); // initialize bitmap mBitmap = Bitmap. createBitmap (width, height, Config. ARGB_8888); mCanvas = new Canvas (mBitmap); // draw the masking layer mFingerPaint. setStyle (Paint. style. FILL); mCanvas. drawRoundRect (new RectF (0, 0, width, height), 30, 30, mFingerPaint); mCanvas. drawBitmap (BitmapFactory. decodeResource (getResources (), R. drawable. mask), null, new RectF (0, 0, width, height), null );}

There is also a blog that uses this technology. Click here to view details.

Download source code:

Http://download.csdn.net/detail/u013761665/8737527