学习笔记

效果展示:

全部代码:

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

学习笔记：使用 Canvas 和 Paint 实现圆角图片

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

基本概念

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

---

步骤说明：实现圆角图片

1. 创建新的 Bitmap

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

2. 绘制圆角矩形

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

3. 使用 Xfermode 实现图像裁剪

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

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

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

---

代码实现：

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

---

学习笔记：如何实现圆形图片裁剪

概述

本篇学习笔记将讲解如何使用 Android 中的 Canvas 和 Paint 实现圆形图片裁剪的功能。具体实现通过绘制圆形区域并结合 PorterDuff.Mode.SRC_IN 混合模式，将图片裁剪成圆形，并显示在 ImageView 中。

核心概念

• Canvas：用于绘制图形的画布。所有的绘制操作（如绘制圆形、矩形、图片等）都需要借助 Canvas 对象来进行。
• Paint：设置绘图样式（如颜色、字体、抗锯齿等）的对象。在绘制时，Paint 控制着图形的样式和外观。
• PorterDuffXfermode：图像合成模式，控制绘制多个图形时的合成方式。SRC_IN 模式让图像仅在两个区域重叠的地方显示（即保留图像的交集部分）。
• Bitmap：在 Android 中，图片以 Bitmap 对象的形式存储和处理。通过 Bitmap 对象可以对图片进行裁剪、缩放等处理。

实现步骤

1. 加载原始图片

   • 使用 BitmapFactory.decodeResource() 从资源中加载图片。这里我们使用了一张图片资源 userphoto。

   Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.userphoto);
   

2. 创建 Canvas 和 Paint 对象

   • Canvas 用于在新的 Bitmap 上绘制图形。我们创建一个新的 Bitmap，大小为图片的最小边长，以确保圆形能够完整地显示。
   • Paint 用于设置绘图样式，setAntiAlias(true) 开启抗锯齿，setFilterBitmap(true) 启用图像过滤，使图像更加平滑。

   Canvas canvas = new Canvas(output);
   Paint paint = new Paint();
   paint.setAntiAlias(true);
   paint.setFilterBitmap(true);
   paint.setDither(true);
   paint.setColor(Color.BLACK);
   

3. 绘制圆形

   • 我们绘制一个圆形，圆心位置为 (width / 2, width / 2)，半径为 width / 2，确保圆形正好填满整个 Bitmap。

   canvas.drawCircle(width / 2f, width / 2f, width / 2f, paint);
   

4. 设置 Xfermode（图像合成模式）

   • 设置 PorterDuffXfermode 为 SRC_IN，意味着我们只保留源图像（原始图片）和目标图像（当前圆形区域）交集的部分，其他部分会被透明填充。
   • SRC_IN 模式非常适合用于图片裁剪，因为它只显示重叠的部分。

   paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
   

5. 绘制原始图片到圆形区域

   • 使用 canvas.drawBitmap() 方法将原始图片绘制到指定区域。在这里我们计算了一个矩形区域 Rect，将图片绘制到这个区域内。

   canvas.drawBitmap(bitmap, null, rect, paint);
   

6. 返回处理后的圆形图片

   • 完成绘制后，返回最终的圆形图片 output，可以在 UI 上展示。

   return output;
   

代码实现

public class YuanActivity extends AppCompatActivity {

    private ActivityYuanBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityYuanBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

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

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

        // 获取圆形裁剪后的图片
        Bitmap circularBitmap = getCircularBitmap(bitmap);

        // 显示圆形图片
        binding.yuanxinphotoYuan.setImageBitmap(circularBitmap);
    }

    // 将图片裁剪为圆形
    private Bitmap getCircularBitmap(Bitmap bitmap) {
        // 获取原始图片的最小边长
        int width = Math.min(bitmap.getWidth(), bitmap.getHeight());

        // 创建一个新的 Bitmap，用于保存圆形效果的图像
        Bitmap output = Bitmap.createBitmap(width, width, 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); // 设置绘制圆形的颜色为黑色

        // 绘制圆形
        canvas.drawCircle(width / 2f, width / 2f, width / 2f, paint);

        // 设置 Xfermode 只保留源图像与圆形区域交集部分
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        // 计算图片放置区域
        Rect rect = new Rect(0, 0, width, width);
        
        // 绘制原始图片，只有圆形区域内的部分会显示
        canvas.drawBitmap(bitmap, null, rect, paint);

        return output; // 返回圆形图片
    }
}

关键概念详细解释

1. Bitmap：

   • Bitmap 是 Android 中表示图片的对象。它可以通过文件、资源或其他方式生成。在本示例中，我们从资源中加载了一张图片 R.drawable.userphoto，并将其转换为 Bitmap。

2. Canvas 和 Paint：

   • Canvas 是一个画布，用于绘制图形。所有的绘制操作（如绘制圆形、矩形、图片等）都是通过 Canvas 完成的。
   • Paint 用于设置绘图时的样式，比如颜色、抗锯齿、过滤器等。

3. PorterDuff.Mode.SRC_IN：

   • PorterDuff 是图像合成的模式。SRC_IN 模式意味着只保留源图像（原图）与目标图像（圆形区域）交集的部分，其余部分会变成透明。这个模式非常适合做图片裁剪，特别是圆形裁剪。

4. drawCircle：

   • Canvas.drawCircle() 用于绘制一个圆形。在裁剪圆形图片时，我们在 Canvas 上绘制一个圆形，作为裁剪的边界。

5. Xfermode：

   • Xfermode 用于定义图形绘制时如何合成。通过设置 SRC_IN 模式，我们确保只有圆形区域内的图片内容被显示，其他区域会被透明填充，从而实现圆形裁剪效果。

---

总结

通过结合 Canvas、Paint 和 PorterDuffXfermode，我们可以灵活地对图片进行裁剪，并实现如圆形、圆角矩形等效果。此方法非常适用于在 Android 中处理图像，并能够快速实现视觉效果。