Android 使用 Canvas 和 Paint 实现圆角图片

学习笔记

效果展示:

全部代码:

java 复制代码
public class YuanActivity extends AppCompatActivity {

    private ActivityYuanBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 通过 DataBinding 获取布局文件
        binding = ActivityYuanBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        // 设置返回按钮的点击事件,点击时跳转到 MainActivity
        binding.fanhuiYuan.setOnClickListener(v -> {
            Intent intent = new Intent(YuanActivity.this, MainActivity.class);
            startActivity(intent);
        });

        // 加载原始图片(从资源文件加载)
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.userphoto);

        // 获取圆形裁剪后的图片,这里 500 是圆角的半径
        Bitmap roundedBitmap = getRoundedCornerBitmap(bitmap, 500);

        // 设置 ImageView 显示圆形裁剪后的图片
        binding.yuanjiaophotoYuan.setImageBitmap(roundedBitmap);
    }

    /**
     * 将原始 Bitmap 转换为圆角图片(这里实际是圆形图片)
     *
     * @param bitmap 原始图片
     * @param radius 圆角半径
     * @return 圆角(圆形)图片
     */
    private Bitmap getRoundedCornerBitmap(Bitmap bitmap, float radius) {
        // 获取原始图片的宽高
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        // 创建一个新的 Bitmap,用于保存圆角效果的图像
        // 使用 ARGB_8888 配置,支持透明度,效果较好
        Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        // 创建一个 Canvas 对象,用于在新 Bitmap 上绘制
        Canvas canvas = new Canvas(output);

        // 创建 Paint 对象,设置绘制样式
        Paint paint = new Paint();
        paint.setAntiAlias(true); // 启用抗锯齿,以确保绘制出来的圆角平滑
        paint.setFilterBitmap(true); // 启用图像过滤,提高图像质量
        paint.setDither(true); // 启用抖动,使图像颜色更平滑
        paint.setColor(Color.BLACK); // 设置画笔颜色为黑色

        // 创建一个矩形区域,作为圆角矩形的边界
        RectF rectF = new RectF(0, 0, width, height);

        // 绘制一个圆角矩形(实际绘制的是一个圆形矩形)
        // 这里的 radius 就是圆角的半径,设置为较大的值会形成圆形效果
        canvas.drawRoundRect(rectF, radius, radius, paint);

        // 设置 Xfermode(混合模式),使得图片绘制在圆角矩形内
        // SRC_IN 表示仅保留矩形与原图片交集部分的内容,超出部分透明
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        // 将原始图片绘制到圆角矩形区域内
        canvas.drawBitmap(bitmap, 0, 0, paint);

        // 返回处理后的圆角图片
        return output;
    }
}

学习笔记:使用 CanvasPaint 实现圆角图片

在 Android 中,CanvasPaint 是用于图形绘制的基础类,利用这两者可以对图片进行各种裁剪和样式处理。实现圆角图片的关键是对原始图片进行裁剪,使其边角变圆。通过绘制一个圆角矩形,将图片内容限制在这个矩形内,即可实现圆角效果。

基本概念
  • Canvas:用于绘制图形的画布,可以用来绘制矩形、圆形、图片等内容。
  • Paint:控制绘制的样式,包括颜色、线条宽度、抗锯齿等。
  • Bitmap:位图对象,表示图片的数据,可以对其进行操作(例如裁剪、旋转等)。

步骤说明:实现圆角图片

1. 创建新的 Bitmap

为了将原图裁剪为圆角图像,首先需要创建一个新的 Bitmap,它的宽度和高度与原图相同,并且格式为 ARGB_8888,以保证图片质量。

2. 绘制圆角矩形

使用 CanvasPaint 绘制一个圆角矩形。圆角的半径通过传入的参数来控制,矩形的大小与原始图片相同。

3. 使用 Xfermode 实现图像裁剪

Xfermode 控制图形的混合模式。在这里,使用 PorterDuff.Mode.SRC_IN 可以确保图片只绘制在圆角矩形区域内,其他部分会变成透明。

4. 将原始图片绘制到圆角区域

最后,我们将原始图片绘制到上面创建的圆角矩形区域,从而实现圆角效果。


代码实现:

复制代码
java 复制代码
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.imageView);

        // 加载原始图片
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);

        // 获取圆角裁剪后的图片
        Bitmap roundedBitmap = getRoundedCornerBitmap(bitmap, 30); // 30是圆角的半径

        // 显示圆角图片
        imageView.setImageBitmap(roundedBitmap);
    }

    /**
     * 将 Bitmap 转换为圆角图片
     *
     * @param bitmap 原始图片
     * @param radius 圆角半径
     * @return 圆角图片
     */
    private Bitmap getRoundedCornerBitmap(Bitmap bitmap, float radius) {
        // 获取图片的宽高
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        // 创建一个新的 Bitmap,用于保存圆角效果
        Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        // 创建一个 Canvas 用来绘制圆角图像
        Canvas canvas = new Canvas(output);

        // 创建一个 Paint 对象
        Paint paint = new Paint();
        paint.setAntiAlias(true); // 抗锯齿
        paint.setFilterBitmap(true); // 使用过滤器
        paint.setDither(true); // 使用抖动
        paint.setColor(Color.BLACK); // 设置画笔颜色为黑色

        // 创建一个矩形,作为圆角矩形的边界
        RectF rectF = new RectF(0, 0, width, height);

        // 绘制圆角矩形
        canvas.drawRoundRect(rectF, radius, radius, paint);

        // 设置 Xfermode 使图像绘制在圆角矩形区域内
        paint.setXfermode(new android.graphics.PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));

        // 绘制原始图片
        canvas.drawBitmap(bitmap, 0, 0, paint);

        return output;
    }
}

代码分析:

  1. 加载原图

    复制代码
    java 复制代码
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
  2. 创建一个新的 Bitmap 用于绘制

    复制代码
    java 复制代码
    Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  3. 创建 Canvas 和 Paint 对象

    复制代码
    java 复制代码
    Canvas canvas = new Canvas(output);
    Paint paint = new Paint();
    paint.setAntiAlias(true); // 启用抗锯齿
    paint.setColor(Color.BLACK); // 设置画笔颜色

    Canvas 用于在 output 图像上绘制内容,Paint 设置绘制的风格。

  4. 绘制圆角矩形

    复制代码
    java 复制代码
    RectF rectF = new RectF(0, 0, width, height);
    canvas.drawRoundRect(rectF, radius, radius, paint);

    使用 drawRoundRect 方法绘制一个圆角矩形,radius 控制圆角的半径。

  5. 设置 Xfermode

    复制代码
    java 复制代码
    paint.setXfermode(new android.graphics.PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN));

    设置 Xfermode,只让图像在圆角矩形内显示。SRC_IN 模式会保留原始图像和绘制区域的交集部分。

  6. 绘制原图像

    复制代码
    java 复制代码
    canvas.drawBitmap(bitmap, 0, 0, paint);

    将原图绘制到新的图像区域。


圆角半径控制:

  • radius 参数控制圆角的半径。较小的 radius 适合轻微的圆角效果,而较大的 radius 会让图像角落更加圆润。

总结:

  • 使用 CanvasPaint 来绘制圆角图片的主要思路是:首先绘制一个圆角矩形,然后将原图绘制到矩形区域中,通过 Xfermode 保证只显示矩形区域的部分,从而达到圆角效果。
  • 这种方法适用于简单的圆角效果,但如果你需要更复杂的图片处理(例如圆形裁剪、圆角加阴影等),可以进一步扩展使用。

复习要点:

  1. Canvas:绘制图形的工具。
  2. Paint:控制图形绘制样式(例如颜色、抗锯齿等)。
  3. Xfermode:控制图形绘制的混合模式。
  4. PorterDuff.Mode.SRC_IN:绘制交集部分的模式,常用于裁剪图像。
  5. 圆角半径控制:根据需求调整圆角效果的大小。

通过这篇笔记,可以更好地理解如何通过 Android 的绘图工具来实现常见的图像效果,如圆角图片裁剪。

相关推荐
mmsx1 小时前
android sqlite 数据库简单封装示例(java)
android·java·数据库
众拾达人4 小时前
Android自动化测试实战 Java篇 主流工具 框架 脚本
android·java·开发语言
吃着火锅x唱着歌5 小时前
PHP7内核剖析 学习笔记 第四章 内存管理(1)
android·笔记·学习
_Shirley6 小时前
鸿蒙设置app更新跳转华为市场
android·华为·kotlin·harmonyos·鸿蒙
hedalei8 小时前
RK3576 Android14编译OTA包提示java.lang.UnsupportedClassVersionError问题
android·android14·rk3576
锋风Fengfeng8 小时前
安卓多渠道apk配置不同签名
android
枫_feng8 小时前
AOSP开发环境配置
android·安卓
叶羽西9 小时前
Android Studio打开一个外部的Android app程序
android·ide·android studio
qq_1715388510 小时前
利用Spring Cloud Gateway Predicate优化微服务路由策略
android·javascript·微服务
Vincent(朱志强)11 小时前
设计模式详解(十二):单例模式——Singleton
android·单例模式·设计模式