【Android开发基础】Canvas画笔（以刮刮乐为例）

news2025/4/27 17:40:51

文章目录

- 一、引言
- 二、设计
- - 1、获取图片资源
  - 2、获取屏幕信息
  - 3、Canvas涂层
  - 4、随机内容
  - 5、屏幕监听
- 三、附件
- - 1、UI设计
  - 2、总代码
  - - （1）控件初始化
    - （2）图层初始化
  - 3、源代码

一、引言

（本篇博客只说明Canvas画笔的使用，关于案例仅供学习，禁止非法使用）

描述：如何使用Canvas将图片资源绘画出来，并通过触感传感器做到清除功能。广泛应用于 活动抽奖、游戏领域。其中尤为著名的游戏有 小鳄鱼爱洗澡等
难度：中级
知识点：
1、Bitmap资源的使用
2、Canvas画笔
效果

二、设计

1、获取图片资源

对上层资源（刮的图层）进行解析

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

2、获取屏幕信息

收集屏幕信息

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

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

3、Canvas涂层

适应屏幕进行涂顶层图层

//创建一个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方法随机一个值

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

5、屏幕监听

完成消除上层图层指定位置的Bitmap内容

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;
    }
});

三、附件

1、UI设计

<?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、总代码

（1）控件初始化

    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）图层初始化

    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;
            }
        });
    }