[Basics of Android development] Canvas brush (taking scratch music as an example)

I. Introduction

( This blog only explains the use of Canvas brushes. The cases are only for learning and illegal use is prohibited )

• Description: How to use Canvas to draw picture resources and clear them through the touch sensor . Widely used in event lottery and game fields . Among the most famous games are Little Crocodile Loves to Take a Bath, etc.
• Difficulty: Intermediate
• Knowledge points:
  1. Use of Bitmap resources
  2. Canvas brush
• Effect
  

2. Design

1. Obtain image resources

Parse the upper-layer resources (scraped layers)

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.scratch_card);
Bitmap alterBitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(),bitmap.getConfig());

2. Get screen information

Collect screen information

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

double NX = bitmap.getWidth()/dm.widthPixels;
double NY = bitmap.getHeight()/dm.heightPixels;

3. Canvas coating

Apply the top layer to fit the screen

//创建一个canvas对象
Canvas canvas = new Canvas(alterBitmap);
//画笔
Paint paint = new Paint();
//设置颜色
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
//Matrix对象
Matrix matrix = new Matrix();
//画图
canvas.drawBitmap(bitmap,matrix,paint);

4. Random content

Random method randomizes a value

//随机抽奖
Random XingYun = new Random();
int kelang = XingYun.nextInt(3);
String[] deng = {
    
    "一等奖","二等奖","三等奖"};
text_bg.setText(deng[kelang]);

5. Screen monitoring

Complete the elimination of the Bitmap content at the specified location on the upper layer

bg.setOnTouchListener(new View.OnTouchListener(){
    
    
    @Override
    public boolean onTouch(View v, MotionEvent event) {
    
    
        try {
    
    
            int x = (int)event.getX();
            int y = (int)event.getY();
            for (int i = -100 ; i<100 ; i++){
    
    
                for (int j = -100 ; j<100 ; j++){
    
    
                    if (Math.sqrt((i*i) + (j*j)) <= 100){
    
    
                        alterBitmap.setPixel((int)(x*NX) + i , (int) (y*NY +90)+j , Color.TRANSPARENT);
                    }
                }
            }
            bg.setImageBitmap(alterBitmap);
        }catch (Exception e){
    
    
            e.printStackTrace();
        }
        return true;
    }
});

3. Accessories

1.UI design

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="50dp" />

    <ImageView
        android:id="@+id/image_bm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/scratch_card"/>

</RelativeLayout>

2. Total code

(1) Control initialization

    private void init() {
    
    
        bg = findViewById(R.id.image_bm);
        text_bg = findViewById(R.id.text_bg);

        //随机抽奖
        Random XingYun = new Random();
        int kelang = XingYun.nextInt(3);
        String[] deng = {
    
    "一等奖","二等奖","三等奖"};
        text_bg.setText(deng[kelang]);
    }

(2) Layer initialization

    private void initImage() {
    
    
        //资源解析
        Bitmap bitmap =
                BitmapFactory.decodeResource(getResources(),R.drawable.scratch_card);
        alterBitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(),bitmap.getConfig());
        //收集屏幕信息
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);

        //适应屏幕
        NX = bitmap.getWidth()/dm.widthPixels;
        NY = bitmap.getHeight()/dm.heightPixels;

        //创建一个canvas对象
        Canvas canvas = new Canvas(alterBitmap);
        //画笔
        Paint paint = new Paint();
        //设置颜色
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        //Matrix对象
        Matrix matrix = new Matrix();
        //画图
        canvas.drawBitmap(bitmap,matrix,paint);
        //监听
        bg.setOnTouchListener(new View.OnTouchListener(){
    
    

            @Override
            public boolean onTouch(View v, MotionEvent event) {
    
    
                try {
    
    
                    int x = (int)event.getX();
                    int y = (int)event.getY();
                    for (int i = -100 ; i<100 ; i++){
    
    
                        for (int j = -100 ; j<100 ; j++){
    
    
                            if (Math.sqrt((i*i) + (j*j)) <= 100){
    
    
                                alterBitmap.setPixel((int)(x*NX) + i , (int) (y*NY +90)+j , Color.TRANSPARENT);
                            }
                        }
                    }
                    bg.setImageBitmap(alterBitmap);
                }catch (Exception e){
    
    
                    e.printStackTrace();
                }
                return true;
            }
        });
    }

3. Source code

CSDN：https://download.csdn.net/download/weixin_48916759/87920165
 
gitee：https://gitee.com/xu-pq/android-demo/tree/master/CanvasDemo