前段时间,产品有个需求就是要搞一个抽奖活动,类似支付宝的刮刮卡功能.自然想到了Paint的Xfermode.话不多说,先上效果.
在Paint的使用中,有一个方法叫做setXfermode,这个方法需要传递一个Xfermode的实例,为了实现这个效果,我们使用PorterDuffXfermode中的SRC_OUT模式,先上代码再讲原理.
首先,准备好两张图片,一张是底图,这个是不变的 也就是最下面那张图.一张是源图,也就是最上层那张图.
还是老套路,自定义控件继承自View,在构造方法中先初始化画笔Paint,准备好底图以及源图,还有一张跟源图相同大小的透明图片,初始化Path.
public GuaguaCard(Context context, AttributeSet attrs) {
super(context, attrs);
mBitPaint=newPaint();
mBitPaint.setColor(Color.BLACK);
mBitPaint.setStyle(Paint.Style.STROKE);
mBitPaint.setStrokeWidth(45);
BmpText=BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka_text1,n ull);
BmpSRC= BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka,null);
BmpDST= Bitmap.createBitmap(BmpSRC.getWidth(),BmpSRC.getHeight(), Bitmap.Config.ARGB_8888);
mPath=newPath();
}
在onDraw方法中先将BmpText绘制到画布上.创建一个新图层,然后根据将手指的移动轨迹绘制到BmpDST上,将BmpDST绘制到画布上,最后将BmpSRC以PorterDuff.Mode.SRC_OUT的模式绘制到canvas上.这样底层图片BmpText永远都在最下面的图层,然后BmpDST与BmpSRC的混合结果将铺在上面.这样就可以达到我们想要的结果.
上代码:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(BmpText,0,0,mBitPaint);
//官方叫法离屏缓存
intlayerId = canvas.saveLayer(0,0, getWidth(), getHeight(),null, Canvas.ALL_SAVE_FLAG);
//将path绘制到dst图像上
Canvas canvas1 =newCanvas(BmpDST);
canvas1.drawPath(mPath,mBitPaint);
//然后把目标图像画到画布上
canvas.drawBitmap(BmpDST,0,0,mBitPaint);
//使用Xfermode绘制源图
mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
// 还原混合模式
mBitPaint.setXfermode(null);
// 还原画布
canvas.restoreToCount(layerId);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
mPath.moveTo(event.getX(),event.getY());
mPreX= event.getX();
mPreY= event.getY();
return true;
case MotionEvent.ACTION_MOVE:
float endX = (mPreX+event.getX())/2;
float endY = (mPreY+event.getY())/2;
mPath.quadTo(mPreX,mPreY,endX,endY);
mPreX= event.getX();
mPreY=event.getY();
break;
case MotionEvent.ACTION_UP:
break;
}
postInvalidate();
return super.onTouchEvent(event);
}
这里面有一个特别重要的方法就是mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT))
根据PorterDuff的模式不同,展现的效果也不同.SRC_OUT的效果就是按照源图片BmpSRC以及目标图片BmpDST的进行组合,最终来绘制源图片.那这个组合的方式我们来看一下源码:
/** [Sa * (1 - Da), Sc * (1 - Da)] */
也就是根据上面的规则对源图片以及目标图片的颜色ARGB通道来进行组合,当我手势滑动的时候目标图片的对应区域的alpha值就变成1了,所以对应的区域就透明了,其他区域时透明的所以对应区域就按源图展示,这样就实现了刮刮卡效果了,是不是很神奇!