自定义view刮刮乐和点击区域高亮

在这里我先说一点那就是，其实这个东西真的不难，难在你是否对这个流程熟悉

先来看看刮刮乐，在刮之前先来熟悉一下步骤
1.先自定义view重写onDraw方法，他会给一个canvas
2.要写两层，下面一层是图片，上面一层是灰色的面
3.准备一支paint，颜色调整成透明
4.写路径path
5.写onTouchEvent触屏事件
6.点根烟收工

我就不挨个上代码了，反正在里面都能找到
实在找不到就带着有道词典来，一样可以

下面是神圣编码

public class XiangpiView extends View {
    private Context context;
    Paint paint = new Paint();
    private int width,height;
    public XiangpiView(Context context,  AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }
    private Bitmap back;
    private Bitmap front;
    private Canvas canvas1;
    private Path path;
    private void init() {
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(displayMetrics);
        width = displayMetrics.widthPixels;
        height =displayMetrics.heightPixels;
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setARGB(128,255,0,0);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeWidth(40);
        front = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        canvas1 = new Canvas(front);
        canvas1.drawColor(0XFF808080);
        back = BitmapFactory.decodeResource(context.getResources(), R.drawable.timg);
        back = Bitmap.createScaledBitmap(back,width,height,true);
        path = new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(back,0,0,null);
        canvas.drawBitmap(front,0,0,null);
        canvas1.drawPath(path,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        Log.i("###", "onTouchEvent: "+x+"----"+y);
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x,y);
                break;
            case MotionEvent.ACTION_MOVE:
                path.lineTo(x,y);
                break;
            case MotionEvent.ACTION_UP:
                path.lineTo(x,y);
                break;
        }
        invalidate();
        return true;
    }
}

然后再来看一下点击区域高亮

先说步骤
’1.拿到canvas 步骤不重复了
2.画一个三角区域
3.重写onTouchEvent事件拿到点击位置的xy
4.判断是否在区域中
5.改变画笔style为fill
6.再来一根

上代码

这部分我会敲，但是不会说，在这里我用的判断是根据对角线方程和一元一次方程的k（斜率）进行判断的，大家看看吧，不会我也…

public class Attrs2View extends View {

    private int myHeight;
    private  int myWidth;


    private  Paint paint;
    private  Path path;

    private  Context context;
    private  int  height;
    private  int  width;
    private  int  height2;
    private  int  width2;
    float k;
    public Attrs2View(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AttrsView);
        myHeight = typedArray.getInteger(R.styleable.AttrsView_myHeight,0);
        myWidth = typedArray.getInteger(R.styleable.AttrsView_myWidth,0);
        initPaint();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    private void initPaint() {

        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(displayMetrics);

        height = displayMetrics.heightPixels;
        width = displayMetrics.widthPixels;
        Log.i("###", "initPaint: X"+width);
        Log.i("###", "initPaint: Y"+height);
        height2 = height/2;
        width2 = width/2;

        k = height/width;
        paint = new Paint();

        path = new Path();

        path.moveTo(0,0);
        path.lineTo(width/2,height/2);

        path.lineTo(width,0);

        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPath(path,paint);
    }



    //判断点击事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int x = (int) event.getX();
        int y = (int)event.getY();
        switch (event.getAction()){
                case  MotionEvent.ACTION_DOWN:
                int z = getarea(x,y);
                    String ss = null;
                if(z == 2||z == 4){
                    ss = get24result(x, y, z);
                }else if(z == 1||z == 3){
                    ss = get13result(x,y,z);
                }


                    switch (ss){
                        case "up":
                            paint.setStyle(Paint.Style.FILL);
                            break;
                    }
                    break;

            }



            invalidate();
            return true;
    }
    private String get13result(int x,int y,int z){
        int now = (int)(x*(-k)+1280);
        switch (z){
            case 1:
                if(y<now)
                    return "up";
                else
                    return "right";
            case 3:
                if(y<now)
                    return "left";
                else
                    return "down";
        }
        return null;
    }
    private String get24result(int x,int y,int z){
        int now = (int)(x*k);
        switch (z){
            case 2:
                if(y<now)
                    return "right";
                else
                    return "down";
            case 4:
                if(y<now)
                    return "up";
                else
                    return "left";

        }
        return null;
    }
    private int getarea(int x,int y){
        if(x>width2&&y>height2){
            return 2;
        }else if(x>width2&&y<height2){
            return 1;
        }else if(x<width2&&y>height2){
            return 3;
        }else if(x<width2&&y<height2){
            return 4;
        }else {
            return 0;
        }
    }
}

INTERESTING!!!