自定义刮刮卡

效果图

效果图

知识点(自定义TextView),重新方法
  • onTouchEvent
  • onDraw
1.自定义变量
    private Bitmap mDownBitmap, mUpBitmap;//图片
    private Paint mPaint; //画笔
    private Canvas mCanvas; //画布
    private Path mPath; //用于绘制复杂的图形轮廓,比如折线,圆弧以及各种复杂图案
2.初始化方法init():
private void init() {
        mPaint = new Paint();
        mPaint.setAlpha(0);//画笔透明度为0
        //使用DST_IN模式将路径绘制到前面覆盖的图层上
        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();
        mDownBitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.ic_launcher);
        mUpBitmap = Bitmap.createBitmap(mDownBitmap.getWidth(),
                mDownBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mUpBitmap);
        mCanvas.drawColor(Color.GRAY);
    }

其中PorterDuffXfermode有16种混合模式的效果
效果图

3.重新onTouchEvent方法:
public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.reset();//清除path设置的所有属性
                mPath.moveTo(event.getX(), event.getY());//将起始轮廓点移至x,y坐标点,默认情况为0,0点
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY()); //用于从当前轮廓点绘制一条线段到x,y点
                break;
        }
        mCanvas.drawPath(mPath, mPaint); //重新绘制Path
        invalidate(); //刷新
        return true;
    }
4.重新onDraw方法:
 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制图片
        canvas.drawBitmap(mDownBitmap, 0, 0, null);
        canvas.drawBitmap(mUpBitmap, 0, 0, null);
    }
完整版代码:
public class GuaGuaCard extends View {
    private Bitmap mDownBitmap, mUpBitmap;//图片
    private Paint mPaint; //画笔
    private Canvas mCanvas; //画布
    private Path mPath; //用于绘制复杂的图形轮廓,比如折线,圆弧以及各种复杂图案

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

    public GuaGuaCard(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public GuaGuaCard(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {
        mPaint = new Paint();
        mPaint.setAlpha(0);//画笔透明度为0
        //使用DST_IN模式将路径绘制到前面覆盖的图层上
        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();
        mDownBitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.ic_launcher);
        mUpBitmap = Bitmap.createBitmap(mDownBitmap.getWidth(),
                mDownBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mUpBitmap);
        mCanvas.drawColor(Color.GRAY);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.reset();//清除path设置的所有属性
                mPath.moveTo(event.getX(), event.getY());//将起始轮廓点移至x,y坐标点,默认情况为0,0点
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY()); //用于从当前轮廓点绘制一条线段到x,y点
                break;
        }
        mCanvas.drawPath(mPath, mPaint); //重新绘制Path
        invalidate(); //刷新
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制图片
        canvas.drawBitmap(mDownBitmap, 0, 0, null);
        canvas.drawBitmap(mUpBitmap, 0, 0, null);
    }
}

OK,收工,喜欢就点个赞

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

记住我的名字啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值