PorterDuffXfermode ——实现刮刮卡效果

利用PorterDuffXfermode实现,图例如下,需要注意的是,PorterDuffXfermode设置的是两个图层交集区域的显示方式,dst是先画的图形,src是后画的图形。

这里写图片描述

其中最常用的就是通过DST_IN,SRC_IN模式来实现将一个矩形图片编程圆角图片或者圆形图片的效果。先利用一个普通画笔画一个Mask遮罩层,再用带PorterDuffXfermode的画笔讲图像画在遮罩层上,这样就可以通过上面所说的效果来混合两个图像了。

 mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.test);
   mOut = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(mOut);
   paint = new Paint();
    paint.setAntiAlias(true);
    canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), 80, 80, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(mBitmap,0,0,paint);

下面实现刮刮卡效果,如下图
这里写图片描述

完整代码如下:

package com.example.administrator.myapplication;

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 Administrator on 2015/11/25 0025.
 */
public class XfermodeView extends View {

    Bitmap mBgBitmap,mFgBitmap;
    Paint mPaint;
    Canvas mCanvas;
    Path mPath;

    public XfermodeView(Context context) {
        super(context);
        init();
    }

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

/*
*   让它的笔触和连接处能更加圆滑一点,即Paint.Join.ROUND和Paint.Cap.ROUND属性
*   最关键的一步是:需要将画笔的透明度设置为0,这样才能显示出擦除的效果,因为在使用PorterDuffXfermode进行图层混合时,并不是简单地进行图层的计算,同时也会去计算透明度通道的值
*
*/
    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.test);
        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);

    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 Android 图片扫光效果,可以通过以下步骤: 1. 创建一个 ImageView 控件,在其中加载要显示的图片。 2. 创建一个线性渐变的 Shader 对象,用于实现扫光效果。可以使用 LinearGradient 类来创建该对象。 3. 创建一个 Paint 对象,设置其 Shader 为线性渐变的 Shader 对象,然后设置其 Xfermode 为 SRC_IN,这样可以让扫光只显示在图片的区域内。 4. 在 ImageView 控件的 onDraw() 方法中,使用 Canvas 对象绘制图片和扫光效果。首先绘制图片,然后再使用 Paint 对象绘制扫光效果。 下面是一个示例代码,实现了从左到右的扫光效果: ```java public class SweepImageView extends ImageView { private Paint mPaint; private LinearGradient mShader; private int mSweepWidth; public SweepImageView(Context context, AttributeSet attrs) { super(context, attrs); mSweepWidth = getWidth() / 5; int[] colors = {0x00000000, 0xff000000, 0xff000000, 0x00000000}; float[] positions = {0f, 0.3f, 0.7f, 1f}; mShader = new LinearGradient(0, 0, mSweepWidth, 0, colors, positions, Shader.TileMode.CLAMP); mPaint = new Paint(); mPaint.setShader(mShader); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); canvas.translate(-mSweepWidth, 0); canvas.drawRect(0, 0, mSweepWidth, getHeight(), mPaint); canvas.restore(); } } ``` 在该示例代码中,创建了一个 LinearGradient 对象,使用了四个颜色值,分别表示透明、黑色、黑色和透明。其中,0x00000000 表示透明,0xff000000 表示黑色。使用了一个 float 类型的数组 positions,来指定每个颜色值所占的位置。在 Paint 对象中,设置了 Shader 为线性渐变的 Shader 对象,设置了 Xfermode 为 SRC_IN,这样可以让扫光只显示在图片的区域内。在 onDraw() 方法中,使用 Canvas 对象绘制图片和扫光效果,首先绘制图片,然后再使用 Paint 对象绘制扫光效果。通过调用 canvas.save() 和 canvas.restore() 方法,可以保证绘制完扫光效果后,画布的状态不会影响到后续的绘制操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值