Basic preparation for e-commerce scratch card development and e-commerce scratch card Foundation

Basic preparation for e-commerce scratch card development and e-commerce scratch card Foundation

We must have met many similar effects in our life and study. For example, when we shop, merchants sometimes seek attention in the form of rewards for promotions, with the rapid development of the mobile Internet, more and more e-businesses are entering our sights. How can we achieve the traditional scratch card effect on mobile phones? In this article, I will introduce you to the implementation methods and solutions.

Drawing is required for the implementation of this effect. If you have difficulties with this part of knowledge, we suggest you first prepare this knowledge, this helps you better understand the effect. OK. Let's start with the introduction of this article:

For the implementation of the scratch effect, we need to use paint. setXfermode () to control our layer display. For the effect of setXfermode () in 16, please take a look at it.

　　

Before proceeding to the specific operations, we will first introduce the design of the rounded corner image: 1. We will draw our rectangular (square) image; 2. setXferMode (srcIn );; 3. Draw our circle. In three steps, we can achieve our results. Our scratch card effect is based on this principle. Let's take a look at it.

The first step is to implement the effects of a canvas and lay a foundation for our next design. here we need to use custom views in the layout file, so our custom View code:

Public class guagua extends View {// defines the variable private Paint mOutterPath; // the Paint brush object private Path mPath; // records the Painting Process of the user's finger in private Canvas mCanvas; // canvas private Bitmap mBitmap; // image // record the coordinate value when the user draws private int mLastX = 0; private int mLastY = 0; public guagua (Context context) {this (context, null);} public guagua (Context context, AttributeSet attrs) {this (context, null, 0);} public guagua (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); // initialization variable init () ;}/ *** initialization operation */private void init () {mOutterPath = new Paint (); // Paint object mPath = new Path (); // drawing process}/*** get the width and height of the control */@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth (); int height = getMeasuredHeight (); // initialize our Bitmap (canvas) object mBitmap = Bitmap. createBitmap (width, height, Config. ARGB_8888); mCanvas = new Canvas (mBitmap); // initialize our paint brush attribute this. myOutterPath ();}/*** initialize our paint brush attributes */protected void myOutterPath () {mOutterPath. setColor (Color. BLUE); // set the paint brush color mOutterPath. setAntiAlias (true); // you can call this operation to set the mOutterPath. setDither (true); mOutterPath. setStrokeJoin (Paint. join. ROUND); // rounded mOutterPath. setStrokeCap (Paint. cap. ROUND); mOutterPath. setStyle (Style. STROKE); mOutterPath. setStrokeWidth (10); // line bandwidth}/*** user operation event monitoring */@ Override 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: // press event mLastX = x; mLastY = y; mPath. moveTo (mLastX, mLastY); break; case MotionEvent. ACTION_MOVE: // exit event // judge whether the user has drawn a certain value int dx = Math. abs (x-mLastX); int dy = Math. abs (y-mLastY); if (dx> 3 | dy> 3) {mPath. lineTo (x, y);} mLastX = x; mLastY = y; break; case MotionEvent. ACTION_UP: // lift event break; default: break;} invalidate (); return true ;}@ Override protected void onDraw (Canvas canvas) {drawPath (); canvas. drawBitmap (mBitmap, 0, 0, null);} private void drawPath () {mCanvas. drawPath (mPath, mOutterPath );}}

In step 2, we need to reference it in the Layout file:

<cn.edu.hpu.guaguaka.guagua        android:layout_below="@id/text"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        />

Here, our canvas effect is achieved. Next we will further improve our custom View to bring our final effect closer. Next we will implement a game similar to the previous one: take off the beauty effect. We need to prepare an image as our beauty. The Code is as follows:

Public class guagua extends View {// defines the variable private Paint mOutterPath; // the Paint brush object private Path mPath; // records the Painting Process of the user's finger in private Canvas mCanvas; // canvas private Bitmap mBitmap; // image // record the coordinate value of the user when drawing private int mLastX = 0; private int mLastY = 0; // --------------------------------- private Bitmap bitmap; public guagua (Context context) {this (context, null);} public guagua (Context context, AttributeSet attrs) {this (context, null, 0 );} public guagua (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); // initialization variable init ();} /*** initialize */private void init () {mOutterPath = new Paint (); mPath = new Path (); // load the underlying image bitmap = BitmapFactory. decodeResource (getResources (), com. example. guaguaka. r. drawable. girl);}/*** get the width and height of the control */@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth (); int height = getMeasuredHeight (); // initialize our Bitmap (canvas) object mBitmap = Bitmap. createBitmap (width, height, Config. ARGB_8888); mCanvas = new Canvas (mBitmap); // initialize our paint brush attribute this. myOutterPath (); // sets the coverage color mCanvas. drawColor (Color. parseColor ("# C0C0C0"); // mCanvas. drawColor (Color. BLACK);}/*** initialize our paint brush attributes */protected void myOutterPath () {mOutterPath. setColor (Color. RED); // set the paint brush color mOutterPath. setAntiAlias (true); // you can call this operation to set the mOutterPath. setDither (true); mOutterPath. setStrokeJoin (Paint. join. ROUND); // rounded mOutterPath. setStrokeCap (Paint. cap. ROUND); mOutterPath. setStyle (Style. STROKE); mOutterPath. setStrokeWidth (20); // line bandwidth}/*** user operation event monitoring */@ Override 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: // press event mLastX = x; mLastY = y; mPath. moveTo (mLastX, mLastY); break; case MotionEvent. ACTION_MOVE: // exit event // judge whether the user has drawn a certain value int dx = Math. abs (x-mLastX); int dy = Math. abs (y-mLastY); if (dx> 3 | dy> 3) {mPath. lineTo (x, y);} mLastX = x; mLastY = y; break; case MotionEvent. ACTION_UP: // lift event break; default: break;} invalidate (); return true ;}@ Override protected void onDraw (Canvas canvas) {canvas. drawBitmap (bitmap, 0, 0, null); drawPath (); canvas. drawBitmap (mBitmap, 0, 0, null);} private void drawPath () {mOutterPath. setXfermode (new porterduduxfermode (android. graphics. porterDuff. mode. DST_OUT); mCanvas. drawPath (mPath, mOutterPath );}}

The location to be modified has been marked for everyone, which is clear and understandable to everyone. For the specific implementation of the scratch card, I will introduce the implementation of point 1.1 in the following sections.