自定义view刮刮卡效果

要实现这种效果,必须要知道这样一个类

PorterDuffXfermode,设置两张图片重叠的效果

他有以下过滤模式:(SRC:ImageView 的src ;DST:ImageView的Background)

android.graphics.PorterDuff.Mode. SRC :只绘制源图像

android.graphics.PorterDuff.Mode. DST :只绘制目标图像 

android.graphics.PorterDuff.Mode. DST_OVER :在源图像的顶部绘制目标图像 

android.graphics.PorterDuff.Mode. DST_IN :只在源图像和目标图像相交的地方绘制目标图像 

android.graphics.PorterDuff.Mode. DST_OUT :只在源图像和目标图像不相交的地方绘制目标图像 

android.graphics.PorterDuff.Mode. DST_ATOP :在源图像和目标图像相交的地方绘制目标图像,在不相交的地方绘制源图像 

android.graphics.PorterDuff.Mode. SRC_OVER :在目标图像的顶部绘制源图像 

android.graphics.PorterDuff.Mode. SRC_IN :只在源图像和目标图像相交的地方绘制源图像 

android.graphics.PorterDuff.Mode. SRC_OUT :只在源图像和目标图像不相交的地方绘制源图像 

android.graphics.PorterDuff.Mode. SRC_ATOP :在源图像和目标图像相交的地方绘制源图像,在不相交的地方绘制目标图像 

android.graphics.PorterDuff.Mode. XOR :在源图像和目标图像重叠之外的任何地方绘制他们,而在不重叠的地方不绘制任何内容 

android.graphics.PorterDuff.Mode. LIGHTEN :获得每个位置上两幅图像中最亮的像素并显示 

android.graphics.PorterDuff.Mode. DARKEN :获得每个位置上两幅图像中最暗的像素并显示

android.graphics.PorterDuff.Mode. MULTIPLY :将每个位置的两个像素相乘,除以255,然后使用该值创建一个新的像素进行显示。结果颜色=顶部颜色*底部颜色/255 

android.graphics.PorterDuff.Mode. SCREEN :反转每个颜色,执行相同的操作(将他们相乘并除以255),然后再次反转。结果颜色=255-(((255-顶部颜色)*(255-底部颜色))/255) 


代码:

package com.lei.demo.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import com.lei.demo.utils.Logs;

/**
 * Created by lei on 2016/5/11.
 */
public class XFormodeView extends View {
    private Paint mPaint;//用来绘制path的
    private Paint mContentPaint;
    private Bitmap mSrcBit;//上面覆盖的一层
    private Bitmap mObjBit;//刮出来的结果图
    private Path mPath;//绘制刮的路径
    private Canvas mCanvas;

    private Rect mRect;

    private String mContent = "恭喜发财";//显示的文字,可以将此暴露出去自定义

    public XFormodeView(Context context) {
        super(context);
        initView();
    }

    public XFormodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public XFormodeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        mObjBit = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
        mSrcBit = Bitmap.createBitmap(mObjBit.getWidth(), mObjBit.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mSrcBit);
        mCanvas.drawColor(getResources().getColor(android.R.color.black));

        mPath = new Path();

        initPathPaint();
        initContentPaintRect();
    }

    //初始化滑动路径的画笔
    void initPathPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);//抗锯齿true
        mPaint.setAlpha(0);//将此透明度设为0,完全透明
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeWidth(10f);
        mPaint.setPathEffect(new CornerPathEffect(0.3f));
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));//设置过滤模式
    }

    //初始化描述内容画笔和区域
    void initContentPaintRect() {
        mContentPaint = new Paint();
        mRect = new Rect();
        mContentPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
        mContentPaint.setTextSize(50);
        mContentPaint.getTextBounds(mContent, 0, mContent.length(), mRect);//通过rect得到文字的宽高

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(mObjBit, 0, 0, null);
        canvas.drawText(mContent, (mSrcBit.getWidth() - mRect.width()) / 2, (mSrcBit.getHeight() - mRect.height()) / 2, mContentPaint);

        canvas.drawBitmap(mSrcBit, 0, 0, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Logs.v("onTouchEvent");
        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;
    }
}
效果图:

自定义view刮刮卡效果_第1张图片


你可能感兴趣的:(自定义view刮刮卡效果)