12/2 of custom View learning, custom view learning 12

12/2 of custom View learning, custom view learning 12

In the previous article, we drew a circular level bar with a delayed thread to complete the animation.
Today, let's get a little fun ).
First, think about the policy.
1. A background image is required.
2. A gray and opaque image block that overwrites the background image is required.
3. When we move our fingers in the gray block, the path will be drawn to the gray non-transparent block, but because the painting path is transparent, the calculated and generated hybrid images will also be transparent. So we will get the effect of "eraser.

Okay. The policy has been figured out, and the following code starts.

Private Bitmap fgBitmap, frontBitmap; // The Bitmap of the foreground eraser and the Bitmap private Canvas mCanvas of the background map; // The Canvas private Paint mPaint that draws the eraser path; // eraser Path brush private Path mPath; // eraser draw Path private float x, y; public CustomView (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr);} public CustomView (Context context, AttributeSet attrs) {super (context, attrs);} public CustomView (C Ontext context) {super (context);} private void init () {// instantiate the Path object mPath = new Path (); // instantiate the Paint brush and enable its anti-aliasing and anti-jitter mPaint = new Paint (); // anti-sawtooth mPaint. setAntiAlias (true); // anti-jitter mPaint. setDither (true); // set the mixed mode to DST_IN mPaint. setXfermode (new porterduduxfermode (Mode. CLEAR); // set the paint brush style to stroke mPaint. setStyle (Paint. style. STROKE); // set the path combination style mPaint. setStrokeJoin (Paint. join. ROUND); // set the stroke type mPaint. setStrokeCa P (Paint. Cap. ROUND); // set the stroke width mPaint. setStrokeWidth (50); // generate the foreground map Bitmap. The width and height here can be obtained only in onDraw. FgBitmap = Bitmap. createBitmap (getWidth (), getHeight (), Config. ARGB_4444); // obtain the gray background image frontBitmap = CreateBitmap (Color. GRAY, getWidth (), getHeight (); // inject it into the Canvas mCanvas = new Canvas (fgBitmap); // draw a GRAY background image mCanvas. drawBitmap (frontBitmap, 0, 0, null);}/** get the incoming color, high-end, width Bitmap */public Bitmap CreateBitmap (int color, int width, int height) {int [] rgb = new int [width * height]; for (int I = 0; I <rgb. length; I ++) {rgb [I] = color;} return Bitmap. createBitmap (rgb, width, height, Config. ARGB_8888) ;}@ Override protected void onDraw (Canvas canvas) {if (mCanvas = null) {init () ;}// draw the foreground canvas. drawBitmap (fgBitmap, 0, 0, null ); /** note that canvas and mCanvas are two different canvas objects. * When we move our fingers on the screen to draw a path, the path is drawn to fgBitmap through mCanvas * every time we move our fingers the path mPath will be drawn to mCanvas as the target image at one time, in the above section, we first draw a Neutral gray * On mCanvas, because the calculation in DST_IN mode only shows Neutral gray, but because of the transparency of mPath, the calculated hybrid image will also be transparent * so we will get the "eraser" effect */mCanvas. drawPath (mPath, mPaint); super. onDraw (canvas) ;}@ SuppressLint ("ClickableViewAccessibility") @ Override public boolean onTouchEvent (MotionEvent event) {/** get coordinates of the current event location */x = event. getX (); y = event. getY (); if (event. getAction () = MotionEvent. ACTION_DOWN) {// reset path mPath when the finger contacts the screen. reset (); mPath. moveTo (x, y); // redraw the invalidate (); return true;} else if (event. getAction () = MotionEvent. ACTION_MOVE) {// The connection path mPath when the finger moves. lineTo (x, y); // redraw the invalidate (); return true;} return super. onTouchEvent (event );}

The xml layout is as follows:
The ImageView should be put together with the custom image. Otherwise, the image will have no content.

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <ImageView        android:layout_width="400dp"        android:layout_height="400dp"          android:layout_centerInParent="true"        android:src="@drawable/bb" />    <com.customguaguale.CustomView        android:id="@+id/CustomView_b"        android:layout_width="400dp"        android:layout_height="400dp"        android:layout_centerInParent="true" /></RelativeLayout>

As follows:

This is the scratch layer. Hey, hurry up and scratch it. Let's see what can be scratched...

I scratch, I scratch, I scratch ..........................

A pretty girl ..... Good white and tender ........ How nice my girlfriend is .....

Cough ....... Okay, I admit that I think too much ..

You are welcome to correct the mistakes and make more optimization solutions.
The following is the source code address: (http://download.csdn.net/detail/u013895206/8437885)

To be continued.