Android 使用PorterDuffXfermode实现刮奖效果

最新推荐文章于 2021-05-26 15:16:13 发布

艾阳Blog

最新推荐文章于 2021-05-26 15:16:13 发布

阅读量649

点赞数 2

分类专栏： Android 实战文章标签： android PorterDuffXfermode 刮奖刮刮乐

本文链接：https://blog.csdn.net/csdn_aiyang/article/details/56017247

版权

Android 实战专栏收录该内容

91 篇文章 26 订阅

订阅专栏

本文作为动画引文，希望大家能够阅读下一篇：

Android 动画介绍及自定义3D动画效果的基本使用

Android 使用ColorMatrix颜色矩阵改变图片风格

导语

在很多APP活动页面都会出现刮奖的功能，那么这个效果是如何实现的呢？这篇文章根据PorterDuffXfermode技术来简单实现该效果，代码量不多，实现很简单，注意是在实现效果之前，我们必须得先了解这个关键类。

PorterDuffXfermode介绍

PorterDuffXfermode是一种集合概念，交集、并集等图像的混合显示模式。如果懂得 Photoshop 软件使用的同学一定对这个概念不陌生。而作为开发，我们需要注意两个图层交集区域的显示方式：DST 是先画的图形，SRC 是后画的图形。

刮奖实现原理介绍

首先，将图片的Bitmap设置成为底层画板。

然后，创建透明画笔，并使用DST_IN模式。

最后，监听手势滑动将贝塞尔曲线的路径绘制覆盖在先画的图层上面即可。

先看效果图

实现代码介绍

自定义ImageView类

/**
 * Created by aiyang on 2018/5/28.
 */
public class XfermodeView extends ImageView {
    private Bitmap mBgBitmap,mFgBitmap;
    private Paint mPaint;
    private Canvas mCanvas;
    private Path mPath;

    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();
        Drawable drawable =getDrawable();
        mBgBitmap=((BitmapDrawable)drawable).getBitmap();
        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);
    }
}

 <com.example.aiyang.animationdemo.XfermodeView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/qq"/>

在xml布局文件中作为标签引入即可使用。

qq图片附上，欢迎加群。