Android Custom view for scratch card effect

Main ideas:

The design of a view into multiple layers: the background layer, including the winning information, etc.;

Cover layer, for scratch, using a canvas associated with a bitmap

On the bitmap, use its Canvas.drawpath API to handle gesture swipe (similar to the scratch action)

Use Paint.setxfermode to remove gesture sliding areas

/** * author:stone * Email: [email protected] * TIME:15/7/28 */public class Guaview extends View {p Rivate Bitmap Mbitmap; Covered layer private Canvas mcanvas;    Draw a masking layer private Paint mouterpaint;    Private Path MPath;    private float mlastx;    private float mlasty; Private Bitmap Mcoverbitmap;    Cover diagram private int mwidth, mheight;    Private Paint Minnerpaint;    Private String MInfo;    Public Guaview (Context context) {This (context, NULL);        } public Guaview (context context, AttributeSet Attrs) {Super (context, attrs);    Init ();        } private void Init () {MPath = new Path ();        Mouterpaint = new Paint ();        Minnerpaint = new Paint ();        Mcoverbitmap = Bitmapfactory.decoderesource (Getresources (), R.drawable.fg_guaguaka);    MInfo = "￥5 0 0"; } @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (widthmeas        Urespec, Heightmeasurespec); Mwidth= Mcoverbitmap.getwidth ();        Mheight = Mcoverbitmap.getheight ();        Setmeasureddimension (Mwidth, mheight);        Mbitmap = Bitmap.createbitmap (Mwidth, Mheight, Bitmap.Config.ARGB_8888);        Mcanvas = new Canvas (MBITMAP);        Mcanvas.drawbitmap (mcoverbitmap, 0, 0, NULL);        Setouterpaint ();    Setinnerpaint ();        } private void Setinnerpaint () {minnerpaint.setcolor (color.red);        Minnerpaint.setstyle (Paint.Style.STROKE);        Minnerpaint.setstrokecap (Paint.Cap.ROUND);        Minnerpaint.setstrokejoin (Paint.Join.ROUND);        Minnerpaint.setantialias (TRUE); Minnerpaint.setdither (TRUE);        Anti-Shake minnerpaint.setstrokewidth (5);        Minnerpaint.settextsize (100);    Minnerpaint.settextalign (Paint.Align.CENTER);        } private void Setouterpaint () {mouterpaint.setcolor (color.green);        Mouterpaint.setstyle (Paint.Style.STROKE);        Mouterpaint.setstrokecap (Paint.Cap.ROUND); Mouterpaint.setstrokejoin (Paint.Join.ROUND);        Mouterpaint.setantialias (TRUE); Mouterpaint.setdither (TRUE);    Anti-Shake mouterpaint.setstrokewidth (20);        } @Override//path Public boolean ontouchevent (Motionevent event) {float x = Event.getx ();        Float y = event.gety ();                Switch (event.getaction ()) {Case MotionEvent.ACTION_DOWN:mLastX = x;                Mlasty = y;                Mpath.moveto (x, y);            Break                Case MotionEvent.ACTION_MOVE:float DeltaX = Math.Abs (X-MLASTX);                float DeltaY = Math.Abs (y-mlasty);                if (DeltaX > 5 | | deltay > 5) {mpath.lineto (x, y);                } MLASTX = x;                Mlasty = y;            Break        Case MotionEvent.ACTION_UP:break;    } invalidate ();//Call OnDraw return true;        } @Override protected void OnDraw (canvas canvas) {super.ondraw (canvas); CAnvas.drawcolor (Color.parsecolor ("#bbbbbb")); Background Grey Canvas.drawtext (MInfo, MWIDTH/2, MHEIGHT/4 * 3, Minnerpaint); Draw Text Canvas.drawbitmap (mbitmap, 0, 0, NULL);    Draw Mbitmap This is a variable bitmap, drawn by Mcanvas, first drawn Mcoverbitmap DrawPath (); } private void DrawPath () {//after intersection with the MODE:DST and SRC, only DST is preserved and the intersecting part of the Mouterpaint.setxfermode is removed (new PORTERDUFFX        Fermode (PorterDuff.Mode.DST_OUT));    Mcanvas.drawpath (MPath, mouterpaint); }}

paint.join Continuous Brush Connection
MITER the outer edge is connected with a sharp angle
ROUND with Arcs
Bevel in straight line

PAINT.CAP specifies how the start and end points of lines and paths (lines and paths) are handled
Butt ends with the path does not surpass it
ROUND with the center at the end of the path semicircle
Square with the center at the end of the path square

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Custom view for scratch card effect