美文网首页
Android刮刮乐效果-proterDuffXfermode

Android刮刮乐效果-proterDuffXfermode

作者: 拖鞋王子猪 | 来源:发表于2020-12-15 15:33 被阅读0次

Android刮刮乐效果-proterDuffXfermode

先看看实现的效果


效果展示

这个场景主要是模拟我们有些app里面的刮刮乐中奖的效果,主要是利用Android的proterDuffXfermode这个类去实现的。

proterDuffXfermode

在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果。PorterDuffXfermode的功能十分的强大,其他的应用场景这里就不多介绍,主要是看,刮刮乐的实现和原理。

public class PorterDuffXfermode extends Xfermode

PorterDuffXfermode 继承了Xfermode,使用的时候注意的API是Paint.setXfermode(Xfermode xfermode)。
PorterDuffXfermode支持以下十几种像素颜色的混合模式,分别为:CLEAR、SRC、DST、SRC_OVER、DST_OVER、SRC_IN、DST_IN、SRC_OUT、DST_OUT、SRC_ATOP、DST_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。
这里是使用PorterDuff.Mode.DST_IN,取两层绘制交集,显示下层。这个模式,来进行操作的。

在这里插入图片描述
  • 自定义view继承ImageView
    代码比较少,我就直接来了
public class ProterDuffXfermodeView extends AppCompatImageView {
    private Bitmap mBgBitmap,mFgBitmap;
    private Paint mPaint;
    private Canvas mCanvas;
    private Path mPath;

    public ProterDuffXfermodeView(Context context, AttributeSet attrs) {
        super(context,attrs);
        init();
    }

     private void init() {
        //创建Paint
        mPaint=new Paint();
        //设置透明度
        mPaint.setAlpha(0);
        //设置Xfermode模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        //Paint类型
        mPaint.setStyle(Paint.Style.STROKE);
        //Paint.Join.MITER-锐角,ROUND-圆弧,BEVEL-直线
        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);
    }
}

首先有两个bitmap,一个是背景(刮刮乐的照片),一个是前置的(灰色遮挡)。
这里解释一下几个API

        //设置画笔的样式
        mPaint.setStyle(Paint.Style.FILL);//填充内容
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStyle(Paint.Style.STROKE);//描边
        //线帽
        mPaint.setStrokeCap(Paint.Cap.BUTT);//没有
        mPaint.setStrokeCap(Paint.Cap.ROUND);//圆的
        mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形
    mPaint.setStrokeJoin(Paint.Join.MITER);//锐角
    mPaint.setStrokeJoin(Paint.Join.ROUND);//圆弧
    mPaint.setStrokeJoin(Paint.Join.BEVEL);//直线

别的API都好理解,这里就不介绍了。
onTouchEvent事件分发
主要使用了Path
Path封装了由直线和曲线(二次,三次贝塞尔曲线)构成的几何路径。你能用Canvas中的drawPath来把这条路径画出来(同样支持Paint的不同绘制模式),也可以用于剪裁画布和根据路径绘制文字。我们有时会用Path来描述一个图像的轮廓,所以也会称为轮廓线(轮廓线仅是Path的一种使用方法,两者并不等价)。
Path详解 如果不了解可以看下这篇文章
moveTo 移动下一次操作的起点位置
lineTo 添加上一个点到当前点之间的直线到Path
主要用到了这两个api
最后就是onDraw().

  • XML直接引用自定义view即可。
    当然,实现这个功能可能还有其它写法,这里只是提供一种思路,也是最简单的实现。

王子猪 祝您天天开心。

相关文章

  • Android刮刮乐效果-proterDuffXfermode

    Android刮刮乐效果-proterDuffXfermode 先看看实现的效果 这个场景主要是模拟我们有些app...

  • Android刮刮乐效果

    今天看到一个关于刮刮卡的库,经过测试,感觉还不错,使用方法也比较简单,在这里分享一下。转载地址

  • 刮刮乐效果

    实现原理: 利用layer的mask遮罩 + 贝塞尔曲线UIBezierPath 关键代码: 效果图:

  • 刮刮乐效果

    html: javascript部分: 调用方法:

  • 刮刮乐效果

    虽然对于canvas不是很了解,但是写这个效果确实是很常用的,看到这个资料的时候相对于来说这个代码还是比较简单的,...

  • canvas 刮刮乐

    今天我们来模拟刮刮乐效果 既然是使用Canvas来完成刮刮乐的效果,那么我们先来创建一个Canvas标签,并给它赋...

  • iOS开发 刮刮乐效果的实现

    引言 我们平时在使用支付宝的时候, 会看到类似彩票刮刮乐的效果。如何实现的呢?下面就直接上代码了... 刮刮乐效果...

  • 刮刮乐

  • 刮刮乐

    2007年3月3日,特别的日子。 为啥特别? 第一次坐飞机,青岛飞西安,提前4个小时就到机场了,在网上研究过攻略,...

  • 刮刮乐

    2014年11月3日 刮刮乐 今天杏子又在济南火车站候车了,这次她是故地重游,明显轻松了许多。 ...

网友评论

      本文标题:Android刮刮乐效果-proterDuffXfermode

      本文链接:https://www.haomeiwen.com/subject/dbswgktx.html