Facebook Fresco 图像处理：圆角与圆形图片的实现详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00142/article/details/148375437

Facebook Fresco 图像处理：圆角与圆形图片的实现详解

fresco An Android library for managing images and the memory they use. 项目地址: https://gitcode.com/gh_mirrors/fr/fresco

概述

在现代移动应用开发中，非矩形图像展示已成为UI设计的重要元素。Facebook Fresco作为一款强大的图片加载库，提供了高效的圆角和圆形图片处理能力，且无需复制位图带来的内存开销。本文将深入解析Fresco中实现圆角和圆形图片的技术细节。

圆角与圆形的基本概念

Fresco支持两种主要的圆角形状：

圆形图片：通过设置roundAsCircle为true实现
圆角矩形：通过设置roundedCornerRadius指定圆角半径

特别值得注意的是，Fresco允许为矩形的四个角分别设置不同的圆角半径，但这一功能需要通过Java代码而非XML配置实现。

实现方法对比

Fresco提供了两种不同的圆角实现机制，各有特点和适用场景：

1. BITMAP_ONLY模式（默认）

工作原理：使用位图着色器(BitmapShader)绘制带圆角的位图

特点：

默认的圆角处理方式
不支持动画效果
仅支持centerCrop(默认)、focusCrop和fit_xy三种缩放类型
使用其他缩放类型时不会抛出异常，但可能导致图像显示异常

2. OVERLAY_COLOR模式

工作原理：通过叠加指定颜色的方式模拟圆角效果

特点：

需要Drawee的背景为静态且颜色一致
在XML中使用roundWithOverlayColor属性或在代码中使用setOverlayColor方法启用
不受BITMAP_ONLY模式的限制

实现方式详解

XML配置方式

在布局XML中，可以直接为SimpleDraweeView设置圆角相关属性：

<com.facebook.drawee.view.SimpleDraweeView
  ...
  fresco:roundedCornerRadius="5dp"
  fresco:roundBottomStart="false"
  fresco:roundBottomEnd="false"
  fresco:roundWithOverlayColor="@color/blue"
  fresco:roundingBorderWidth="1dp"
  fresco:roundingBorderColor="@color/red"
>

Java代码实现

构建时设置

在构建视图层级时，可以通过RoundingParams配置圆角参数：

RoundingParams roundingParams = RoundingParams.fromCornersRadius(7f);
mSimpleDraweeView.setHierarchy(new GenericDraweeHierarchyBuilder(getResources())
        .setRoundingParams(roundingParams)
        .build());

动态修改

也可以在视图层级构建完成后动态修改圆角参数：

int color = getResources().getColor(R.color.red);
RoundingParams roundingParams = RoundingParams.fromCornersRadius(5f);
roundingParams.setBorder(color, 1.0f);
roundingParams.setRoundAsCircle(true);
mSimpleDraweeView.getHierarchy().setRoundingParams(roundingParams);

技术限制与解决方案

BITMAP_ONLY模式的限制

支持的Drawable类型有限：仅支持BitmapDrawable和ColorDrawable，不支持NinePatchDrawable、ShapeDrawable等
不支持动画：动画图像无法应用圆角效果
边缘重复问题：当图像不能完全覆盖视图时，边缘会出现重复现象

解决方案：