安卓开发_慕课网_百度地图_刮刮涂层效果

浏览数：73 / 时间：2015年06月11日

学习内容来自“慕课网”

很多电商APP中都有刮刮卡活动，刮开涂层，获取刮刮卡内部信息

原理图：

技术分享

刮刮卡效果：通过画笔画笔来实现，黄色涂层，蓝色涂层，刮动则将两涂层共有的部分去掉，就是DstOut对应的效果

MainActivity.java

 1 package com.example.gauguaka;
 2 
 3 import android.os.Bundle;
 4 import android.app.Activity;
 5 import android.view.Menu;
 6 
 7 public class MainActivity extends Activity {
 8 
 9     @Override
10     protected void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         setContentView(R.layout.activity_main);
13     }
14 
15     
16 }

新建一个包guaguaka.java 在包中新建类Guaguaka.java

  1 package guaguaka.view;
  2 
  3 import com.example.gauguaka.R;
  4 
  5 import android.content.Context;
  6 import android.graphics.Bitmap;
  7 import android.graphics.Bitmap.Config;
  8 import android.graphics.BitmapFactory;
  9 import android.graphics.Canvas;
 10 import android.graphics.Color;
 11 import android.graphics.Paint;
 12 import android.graphics.Paint.Style;
 13 import android.graphics.Path;
 14 import android.graphics.PorterDuff.Mode;
 15 import android.graphics.PorterDuffXfermode;
 16 import android.util.AttributeSet;
 17 import android.view.MotionEvent;
 18 import android.view.View;
 19 
 20 public class Guaguaka extends View{
 21     //画笔
 22     private Paint moutterpaint;
 23     //记录绘制路径
 24     private Path mpath;
 25     //画布
 26     private Canvas mcanvas;
 27     //图片
 28     private Bitmap mbitmap;
 29     //绘制坐标值
 30     private int mlastx;
 31     private int mlasty;
 32     /*----------------------*/
 33     private Bitmap bitmap;
 34     
 35     
 36     
 37     public Guaguaka(Context context) {
 38         // TODO Auto-generated constructor stub
 39         this(context,null);
 40     }
 41     public Guaguaka(Context context, AttributeSet attrs) {
 42         this(context, attrs,0);
 43         // TODO Auto-generated constructor stub
 44     }
 45     public Guaguaka(Context context, AttributeSet attrs,int defStyle) {
 46         super(context, attrs ,defStyle);
 47         // TODO Auto-generated constructor stub
 48         init();
 49     }
 50     //获得控件的宽度和高度
 51     @Override
 52     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 53         // TODO Auto-generated method stub
 54         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 55         
 56         int width = getMeasuredWidth();
 57         int height = getMeasuredHeight();
 58         // 初始化我们的bitmap
 59         mbitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
 60         mcanvas = new Canvas(mbitmap);
 61         // 设置绘制path画笔的一些属性
 62         setupOutPaint();
 63         //setUpBackPaint();
 64         mcanvas.drawColor(Color.parseColor("#c0c0c0"));
 65         
 66     }
 67     //初始化操作
 68     private void init() {
 69         // TODO Auto-generated method stub
 70         moutterpaint = new Paint();
 71         mpath = new Path();
 72         //刮开后的图片
 73         bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.fg_guaguaka);    
 74         }
 75     /**
 76      * 设置绘制path画笔的一些属性
 77      */
 78     private void setupOutPaint()
 79     {
 80         //画笔颜色 --红色
 81         moutterpaint.setColor(Color.parseColor("#c0c0c0"));
 82         //锯齿
 83         moutterpaint.setAntiAlias(true);
 84         moutterpaint.setDither(true);
 85         //线条圆角
 86         moutterpaint.setStrokeJoin(Paint.Join.ROUND);
 87         moutterpaint.setStrokeCap(Paint.Cap.ROUND);
 88         moutterpaint.setStyle(Style.FILL);
 89         //画笔宽度
 90         moutterpaint.setStrokeWidth(20);
 91     }
 92     /**
 93      * 设置我们绘制获奖信息的画笔属性
 94      */
 95     
 96     //绘制事件
 97     @Override
 98     public boolean onTouchEvent(MotionEvent event)
 99     {
100         int action = event.getAction();
101 
102         int x = (int) event.getX();
103         int y = (int) event.getY();
104 
105         switch (action)
106         {
107         case MotionEvent.ACTION_DOWN://按下
108 
109             mlastx = x;
110             mlasty = y;
111             mpath.moveTo(mlastx, mlasty);
112             break;
113         case MotionEvent.ACTION_MOVE://移动
114 
115             int dx = Math.abs(x - mlastx);
116             int dy = Math.abs(y - mlasty);
117 
118             if (dx > 3 || dy > 3)
119             {
120                 mpath.lineTo(x, y);
121             }
122             //更新坐标
123             mlastx = x;
124             mlasty = y;
125 
126             break;
127         case MotionEvent.ACTION_UP://抬起
128         
129             break;
130         }
131         
132             invalidate();
133         return true;
134 
135     }
136     @Override
137     protected void onDraw(Canvas canvas)
138     {
139             canvas.drawBitmap(bitmap, 0 , 0, null);
140 
141         
142             drawPath();
143             canvas.drawBitmap(mbitmap, 0, 0, null);
144         }
145 
146     private void drawPath()
147     {
148         moutterpaint.setStyle(Style.STROKE);
149         moutterpaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));
150         mcanvas.drawPath(mpath, moutterpaint);
151     }
152 
153 }

Guaguaka.java

将布局文件修改：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     >
 6 
 7  <guaguaka.view.Guaguaka
 8         android:id="@+id/id_guaguaka"
 9         android:layout_width="300dp"
10         android:layout_height="100dp"
11         android:layout_centerInParent="true"
12         />
13 </RelativeLayout>