Android刮刮卡效果实现代码

高洛峰

发布时间：2017-01-17 10:09:39

1837人浏览过

来源于php中文网

原创

本文实例为大家分享了android刮刮卡效果，供大家参考，具体内容如下

android实现底层一张图片，上层一个遮罩层，触摸滑动按手指滑动路径实现去除遮罩效果，类似于抽奖的刮刮卡一样，不多说先上张效果图：

Android刮刮卡效果实现代码

直接上代码：

XfermodeView.java

/** 
 * Created by 57 on 2016-4-21. 
 */
public class XfermodeView extends View{ 
 private Bitmap mBgBitmap,mFgBitmap; 
 private Paint mPaint; 
 private Canvas mCanvas; 
 private Path mPath; 
  
 public XfermodeView(Context context) { 
 super(context); 
 init(); 
 } 
  
  
 public XfermodeView(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 init(); 
 } 
  
 public XfermodeView(Context context, AttributeSet attrs, int defStyleAttr) { 
 super(context, attrs, defStyleAttr); 
 init(); 
 } 
  
 @Override
 protected void onDraw(Canvas canvas) { 
  
 canvas.drawBitmap(mBgBitmap,0,0,null); 
 canvas.drawBitmap(mFgBitmap,0,0,null); 
 } 
  
  
 private void init() { 
 mPaint = new Paint(); 
 mPaint.setAlpha(0); 
 mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 
 mPaint.setStyle(Paint.Style.STROKE); 
 mPaint.setStrokeJoin(Paint.Join.ROUND); 
 mPaint.setStrokeWidth(50); 
 mPaint.setStrokeCap(Paint.Cap.ROUND); 
 mPath = new Path(); 
 mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test5); 
 mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(),mBgBitmap.getHeight(),Bitmap.Config.ARGB_8888); 
 mCanvas = new Canvas(mFgBitmap); 
 mCanvas.drawColor(Color.GRAY); 
  
 } 
  
 @Override
 public boolean onTouchEvent(MotionEvent event) { 
 switch(event.getAction()){ 
  case MotionEvent.ACTION_DOWN: 
  mPath.reset(); 
  mPath.moveTo(event.getX(),event.getY()); 
  break; 
  case MotionEvent.ACTION_MOVE: 
  mPath.lineTo(event.getX(),event.getY()); 
  break; 
 } 
 mCanvas.drawPath(mPath,mPaint); 
 invalidate(); 
 return true; 
 } 
}

Xfermode有三个子类 :
AvoidXfermode 指定了一个颜色和容差，强制Paint避免在它上面绘图(或者只在它上面绘图)。
PixelXorXfermode 当覆盖已有的颜色时，应用一个简单的像素异或操作。
PorterDuffXfermode 这是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint

HTML5+JS实现刮刮乐刮刮卡抽奖特效代码

非常不错的HTML5+JS实现刮刮乐刮刮卡抽奖特效代码，基于jQuery实现，支持响应式手机页面使用，支持手机涂抹，如今在微营销中经常使用这种方式，用户体验非常的不错。

下载

如何与已有的Canvas图像进行交互。

从上面我们可以看到PorterDuff.Mode为枚举类,一共有16个枚举值:
1.PorterDuff.Mode.CLEAR
所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
   显示上层绘制图片
3.PorterDuff.Mode.DST
显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
   取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN
取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
取两图层全部区域，交集部分变为透明色