android开发刮刮卡自定义View之刮刮卡

释放双眼,带上耳机,听听看~!

看了徐宜生的《android群英传》学习到了很多知识,一遍肯定是不够的,粗看一遍后仔细品味,发现每次读的时候看到的东西都不一样,感谢徐宜生的无私奉献,让我们这些小白能快速成长。

 

刮刮卡一般有两个图层,即上面的用来被刮掉的图层和下面隐藏的图层。在初始状态下,上面的图层会将下面的整个图层覆盖,当你用手刮上面的图层的时候,下面的图层会慢慢显示出来,这也类似很多画图工具中的橡皮擦效果。这个效果可以使用PorterDuffXfermode来实现。

首先需要做一些初始化工作,例如准备好图片,设置好Paint的一些属性,代码如下:

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.l1);
mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(),mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mFgBitmap);
mCanvas.drawColor(Color.GRAY);

在上面的代码中,给Paint设置一些属性,让它的笔触和连接处能更加圆滑一点,即Paint.Join.ROUND和Paint.Cap.ROUND属性。

接下来,看一下如何获取用户手指滑动所产生的路径,代码如下所示。

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;
}

最后,只需使用DST_IN模式将路径绘制到前面覆盖的图层上面即可。

完整代码如下:

package com.billylu.android.jan15;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
* Created by Bruce on 2017-1-15.
*/
public class XfermodeView extends View {
private Bitmap mBgBitmap,mFgBitmap;
private Paint mPaint;
private Canvas mCanvas;
private Path mPath;
public XfermodeView(Context context) {
super(context);
}
public XfermodeView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
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.l1);
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;
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(mBgBitmap,0,0,null);
canvas.drawBitmap(mFgBitmap,0,0,null);
}
}

把这个View当成一个自定义的View在布局文件中引入就可以了

人已赞赏
Android文章

Android开发NotificationManager的详细介绍

2020-1-21 10:51:18

Android文章

Android关于富文本标签页的内容产生的乱码问题以及Html.fromHtml不能换行的问题。

2020-1-21 11:34:50

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索