# GuaCard

**Repository Path**: tcht/GuaCard

## Basic Information

- **Project Name**: GuaCard
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-19
- **Last Updated**: 2021-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[自定义刮刮卡控件](https://www.aipiti.cn/read/c448ff31-8871-11eb-8d4a-525400bcb43b)

![输入图片说明](https://images.gitee.com/uploads/images/2021/0324/155655_e29e8e61_2230756.png "132455_2fd6e2e7_2230756.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0324/155706_8e2abed2_2230756.png "132522_698ddce7_2230756.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0324/155714_d974871e_2230756.png "Screenshot_20210324-155512.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0324/155722_39ab57b5_2230756.png "Screenshot_20210324-155512xxx.png")

1、继承View，实现构造方法

    public GuaCard(Context context) {
        this(context, null);
    }

    public GuaCard(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init(){
        //最上层的图片
        bmpSRC = BitmapFactory.decodeResource(getResources(), R.drawable.guacard,null);
        //显示的中奖信息图片
        bmpText = BitmapFactory.decodeResource(getResources(), R.drawable.guaok,null);
        //处理手势互动的图层
        bmpDST = Bitmap.createBitmap(bmpSRC.getWidth(), bmpSRC.getHeight(), Bitmap.Config.ARGB_8888);
        tX = ScaleUtils.px2dip(getContext(), 175); //495;
        tY = ScaleUtils.px2dip(getContext(), 160); //485;
        mPath = new Path();

        guaGua = new Path();
        guaGua.addRect(tX, tY, tX + bmpText.getWidth(), tY + bmpText.getHeight(), Path.Direction.CW);

        regionItem = new RegionItem(guaGua);

        mBitPaint = new Paint();
        mBitPaint.setColor(Color.RED);
        mBitPaint.setStyle(Paint.Style.STROKE);
        mBitPaint.setStrokeWidth(45);
    }


2、复写 onMeasure 方法在这里获取控件的大小计算出刮刮卡图片需要的缩放比例。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取到当前控件宽高值
        xw = MeasureSpec.getSize(widthMeasureSpec);
        xh = MeasureSpec.getSize(heightMeasureSpec);
        if(bmpSRC !=null){
            //获取到地图的矩形的宽、高
            double mapWidth = bmpSRC.getWidth();
            double mapHeight = bmpSRC.getHeight();
            //获取到比例值
            scale = (float) ((xw/mapWidth) < (xh/mapHeight) ? (xw/mapWidth) : (xh/mapHeight));
        }
        setMeasuredDimension(MeasureSpec.makeMeasureSpec(xw, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(xh , MeasureSpec.EXACTLY));
    }


3、复写 onDraw 方法

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //缩放
        canvas.scale(scale, scale);
        canvas.drawBitmap(bmpText, tX, tY, mBitPaint);
        int layerId = canvas.saveLayer(0, 0, bmpSRC.getWidth(), bmpSRC.getHeight(), null, Canvas.ALL_SAVE_FLAG);
        //先把手指轨迹画到目标Bitmap上
        Canvas c = new Canvas(bmpDST);
        c.drawPath(mPath, mBitPaint);
        //然后把目标图像画到画布上
        canvas.drawBitmap(bmpDST,0,0,mBitPaint);
        //计算源图像区域
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        canvas.drawBitmap(bmpSRC,0,0, mBitPaint);
        mBitPaint.setXfermode(null);
    }


4、复写 onTouchEvent 方法处理用户的触摸事件

path 中 记录用户触屏是的位置，移动时 Path 使用 quadTo() 画线（清除上层图片显示下层图片）

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mPreX = event.getX();
                mPreY = event.getY();
                if(regionItem.isTouch(mPreX / scale, mPreY / scale))
                    mPath.moveTo(mPreX / scale, mPreY / scale);
                return true;
            case MotionEvent.ACTION_MOVE:
                float endX = (mPreX+event.getX())/2;
                float endY = (mPreY+event.getY())/2;
                if(regionItem.isTouch(endX / scale, endY / scale))
                    mPath.quadTo(mPreX / scale, mPreY / scale, endX / scale, endY / scale);
                mPreX = event.getX();
                mPreY =event.getY();
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        postInvalidate();
        return super.onTouchEvent(event);
    }