图片圆角处理

最新推荐文章于 2024-05-02 17:17:31 发布
最新推荐文章于 2024-05-02 17:17:31 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： Android 文章标签： 图片圆角处理

关于“Android圆角图片”，网上可以搜索到大把代码示例。而这些示例千篇一律过于单一，且对内存性能没有进行较好分析本文将总结网上流行的几种圆角图片方案，进行性能与内存的分析，并得出最佳方案。（PS：本人初出江湖，高手勿喷）。

基础脑补：

位图：256位对比32位，存储信息量大但是占用内存也大， 图像质量较高。

ARGB：A=Alpha, R=Red, G=Green,B=Blue

ARGB_8888：8888意味着它们都用8个位来显示，32位的位图。

ARGB_4444：逻辑同上，16位的位图。

RGB_565：逻辑同上，16位的位图。

ALPHA_8：用8个位来表示透明度，8位的位图。


圆角方案一： PortrDuffXfermode 拷贝Bitmap

代码：

[java] view plain copy print ?
  1. public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
  2. Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
  3. .getHeight(), Config.ARGB_8888);
  4. Canvas canvas = new Canvas(output);
  6. final int color = 0xff424242;
  7. final Paint paint = new Paint();
  8. final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  9. final RectF rectF = new RectF(rect);
  10. final float roundPx = pixels; //圆角
  12. paint.setAntiAlias(true);
  13. canvas.drawARGB(0, 0, 0, 0);
  14. paint.setColor(color);
  15. canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
  17. paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); //Mode.SRC_IN 用前面画的“圆角矩形”对bitmap进行裁剪。
  18. canvas.drawBitmap(bitmap, rect, rect, paint);
  20. return output;
  21. } 
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect); 
        final float roundPx = pixels;               //圆角

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  //Mode.SRC_IN 用前面画的“圆角矩形”对bitmap进行裁剪。
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }

大概思路：从内存中创建一张同样大小的位图output，并使用canvas技术对图片进行裁剪并绘制的output中。

疑点集合：为啥采用0xff424242？

优点：使用简单。

缺点：方法栈内存消耗大，在方法消耗多1倍原有的bitmap内存且性能低下，在图片较大时有OOM的可能。 不适应ImageView，无法与ImageView的scaleType很好的工作，尤其是图片较小的情况下，圆角效果将破坏整个图像的呈现。

圆角方案二： PortrDuffXfermode ImageView

覆盖ImageView的onDraw方法。
[java] view plain copy print ?
  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3. Drawable maiDrawable = getDrawable();
  4. float mCornerRadius = 6 * getContext().getResources().getDisplayMetrics().density; //圆角半径
  5. if (maiDrawable instanceof BitmapDrawable && mCornerRadius > 0) {
  6. Paint paint = ((BitmapDrawable) maiDrawable).getPaint();
  7. final int color = 0xff000000;
  9. final RectF rectF = new RectF(0, 0, getWidth(), getHeight());
  10. int saveCount = canvas.saveLayer(rectF, null, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
  11. | Canvas.CLIP_TO_LAYER_SAVE_FLAG);
  14. paint.setAntiAlias(true);
  15. canvas.drawARGB(0, 0, 0, 0);
  16. paint.setColor(color);
  17. canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);
  19. Xfermode oldMode = paint.getXfermode();
  20. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  21. super.onDraw(canvas);
  22. paint.setXfermode(oldMode);
  23. canvas.restoreToCount(saveCount);
  24. } else {
  25. super.onDraw(canvas);
  26. }
  27. } 
    @Override
    protected void onDraw(Canvas canvas) {
        Drawable maiDrawable = getDrawable();
        float mCornerRadius = 6 * getContext().getResources().getDisplayMetrics().density;  //圆角半径
        if (maiDrawable instanceof BitmapDrawable && mCornerRadius > 0) {
            Paint paint = ((BitmapDrawable) maiDrawable).getPaint();
            final int color = 0xff000000;

            final RectF rectF = new RectF(0, 0, getWidth(), getHeight());
            int saveCount = canvas.saveLayer(rectF, null, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
                    | Canvas.CLIP_TO_LAYER_SAVE_FLAG);


            paint.setAntiAlias(true);
            canvas.drawARGB(0, 0, 0, 0);
            paint.setColor(color);
            canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);

            Xfermode oldMode = paint.getXfermode();
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            super.onDraw(canvas);
            paint.setXfermode(oldMode);
            canvas.restoreToCount(saveCount);
        } else {
            super.onDraw(canvas);
        }
    }

大概思路：ImageView会将src图片最终转化位一个drawable，通过getDrawable()获取该drawable，并获取其画笔。通过saveLayer。我们可以创建一个新图层，并在上面绘制。 对画笔使用PorterDuffXfermode。从而将圆角效果绘制出来。

优点：与前者相比，能很好的兼容ImageView的scaleType。

缺点：运行速度较为缓慢，由于onDraw运行在ui线程，PorterDuffXfermode是采用SRC_IN的方式进行图像裁剪，这种裁剪方式的速度具体视图像大小质量而视，使用不当容易Anr。

(ps: 个人猜测，PorterDuffXfermode采用逐个字节处理的方式执行，想想如果图像越大，字节数量越多，那花费时间势必超过5秒。)

圆角方案三：使用Path进行圆角边缘化

继承ImageView增加以下方法。

[java] view plain copy print ?
  1. @TargetApi(11)
  2. private void init() {
  3. setLayerType(View.LAYER_TYPE_SOFTWARE, null);
  4. this.mMaskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
  5. }
  7. private void generateMaskPath(int width, int height) {
  8. this.mMaskPath = new Path();
  9. this.mMaskPath.addRoundRect(new RectF(0.0F, 0.0F, width, height), this.mCornerRadius, this.mCornerRadius, Path.Direction.CW);
  10. this.mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);
  11. }
  13. @Override
  14. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  15. super.onSizeChanged(w, h, oldw, oldh);
  16. if ((w != oldw) || (h != oldh))
  17. generateMaskPath(w, h);
  19. }
  21. protected void onDraw(Canvas canvas) {
  22. // 保存当前layer的透明橡树到离屏缓冲区。并新创建一个透明度爲255的新layer
  23. int saveCount = canvas.saveLayerAlpha(0.0F, 0.0F, canvas.getWidth(), canvas.getHeight(),
  24. 255, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
  25. super.onDraw(canvas);
  26. if (this.mMaskPath != null) {
  27. canvas.drawPath(this.mMaskPath, this.mMaskPaint);
  28. }
  29. canvas.restoreToCount(saveCount);
  30. } 
 @TargetApi(11)
    private void init() {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        this.mMaskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    }
    
    private void generateMaskPath(int width, int height) {
        this.mMaskPath = new Path();
        this.mMaskPath.addRoundRect(new RectF(0.0F, 0.0F, width, height), this.mCornerRadius, this.mCornerRadius, Path.Direction.CW);
        this.mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if ((w != oldw) || (h != oldh))
            generateMaskPath(w, h);

    }

    protected void onDraw(Canvas canvas) {
        // 保存当前layer的透明橡树到离屏缓冲区。并新创建一个透明度爲255的新layer
        int saveCount = canvas.saveLayerAlpha(0.0F, 0.0F, canvas.getWidth(), canvas.getHeight(),
                255, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        super.onDraw(canvas);
        if (this.mMaskPath != null) {
            canvas.drawPath(this.mMaskPath, this.mMaskPaint);
        }
        canvas.restoreToCount(saveCount);    
    }

大概思路：创建以“圆角矩形”为结构的Path，并利用Path.FillType.INVERSE_WINDING反选“圆角矩形区域”。从而达到圆角边缘化的效果。

优点：与前者相比，由于不需要对ImageView的图片进行字节操作，所以速度快许多，而且在动画表现上十分平滑。

缺点：暂无。

gouyuhua2008
关注
专栏目录
Android圆角图片最佳方案
Zenip的专栏
04-11 1万+
关于“Android圆角图片”，网上可以搜索到大把代码示例。而这些示例千篇一律过于单一，且对内存性能没有进行较好分析本文将总结网上流行的几种圆角图片方案，进行性能与内存的分析，并得出最佳方案。（PS：本人初出江湖，高手勿喷）。 基础脑补： 位图：256位对比32位，存储信息量大但是占用内存也大， 图像质量较高。 ARGB：A=Alpha, R=Red, G=Green,B=Blue ARG
android图片圆角处理
12-04
在Android开发中，图片圆角处理是一个常见的需求，特别是在设计用户界面时，为了追求美观和专业，圆形或者带有圆角的图像元素往往被广泛应用。本文将深入探讨如何在Android平台上实现图片的圆角处理。 首先，我们...
图片处理成圆角
zhjp4295216的专栏
03-18 698
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),        bitmap.getHeight(), Config.ARGB_8888);    Canvas canvas = new Canvas
Android圆角图片汇总
weixin_34242819的博客
01-10 75
今天来对图片的圆角处理做一个简单小结，很多app里面都有圆角效果，根据不同的场景可以采用不同的方案，目前来说有三种方案是比较常用的 方案一 .9.png 应用场景：1.目标图片已知；2.针对布局背景; 实现： .9.png是最简单的方法，只需要用draw9patch准备好相应的.9图，设置为控件的背景即可. 参考：http://developer.android.com/tools/he...
Android 圆角图片
weixin_33724059的博客
05-27 72
2019独角兽企业重金招聘Python工程师标准>>> ...
Android 圆角图片 圆形图片
u014651178的博客
12-14 329
实现圆角图片 方法1：自定义view继承自Drawable public class RoundDrawable extends Drawable { private Paint paint; private Bitmap bitmap; private RectF rectF; public RoundDrawable(Bitmap bitmap) { ...
图片圆角处理.NET
11-06
标题"图片圆角处理.NET"指出，我们将在.NET环境下探讨如何实现图片圆角功能。 描述中提到的"后台代码实现图片圆角阴影"可能是指通过编程方式在图片的圆角部分添加阴影效果，以提升视觉体验。虽然具体阴影实现没有在...
Android图片圆角处理
01-24
在Android开发中，图片圆角处理是一个常见的需求，特别是在UI设计中，许多界面元素如按钮、头像等可能需要展示为圆形或者带有圆角的效果。本文将深入探讨如何使用Canvas来实现这一功能。 首先，我们需要了解Canvas...
Android 完美实现图片圆角和圆形
04-29
但如果图片不是正方形，为了保持图像的原始宽高比，可以先使用`Bitmap.createBitmap()`方法裁剪出一个正方形区域，然后再进行圆角处理。 5. **性能优化**: 对于大量或者频繁使用的圆角图片，可以考虑使用...
图片圆角处理类
09-11
android中将指定的图片做圆角化处理，用做图标特炫
android 指定角的圆角图片处理
07-13
android 指定角的圆角图片处理，方形图片角为圆形，实例为手机界面图标
android 圆角图片 处理
a460090134的专栏
12-09 409
在Activity中调用 [java] view plaincopyprint? /* 将头像转为圆形 */     Resources res = getResources();     Bitmap bmp = BitmapFactory.decodeResource(res, R.drawable.head);     head.setImageBitmap(Ima
Android圆角图片
了凡
09-30 569
Android圆角图片 相比较于iOS实现圆角图片，Android的方式还是复杂些???????????? 参考How to make an ImageView with rounded corners? 1.绘制圆角矩形，在绘制bitmap，通过设置setXfermode为SRC_IN来实现 setXfermode相关解释可参考HenCoder Android 开发进阶: 自定义 View 1-2 Paint 详...
Android 完美实现图片圆角和圆形（对实现进行分析）
最新发布
2401_84149530的博客
05-02 957
private static final int TYPE_CIRCLE = 0;private static final int TYPE_ROUND = 1;/***/private Bitmap mSrc;/***/private int mRadius;/***/private int mWidth;/***/private int mHeight;public CustomImageView(Context context, AttributeSet attrs){this(context, at
Android实现圆形圆角图片
Ricardo的博客
05-23 1824
本文主要使用两种方法实现图形圆角图片 自定View加上使用Xfermode实现 Shader实现 自定View加上使用Xfermode实现/** * 根据原图和变长绘制圆形图片 * * @param source * @param min * @return */ private Bitmap createC
android 实现图片圆角
AppleEngineer
10-08 442
实现圆角的方法，此方法可以将一个位图改变为一个圆角位图： [java] view plaincopy /**   * 获取圆角位图的方法   * @param bitmap 需要转化成圆角的位图   * @param pixels 圆角的度数，数值越大，圆角越大   * @return 处理后的圆角位图   */   public stati
android 图片圆角处理
Swer
07-24 1344
1代码如下  /**      * 把图片变成圆角      *       * @param bitmap 需要修改的图片      * @param pixels 圆角的弧度      * @return 圆角图片      */     public static Bitmap toRoundCorner(Bitmap bitmap, int pixels)     {
android 对图片做圆角处理
mxy2002924的专栏
08-20 266
/* private Bitmap outputRound(Bitmap bitmap){ if(bitmap == null) return null; int w = bitmap.getWidth(); int h = bitmap.getHeight(); Bitmap localBitmap = Bitmap.createBitmap...
C#使用MagickImage将图片圆角处理案例
06-07
以下是C#使用MagickImage将图片圆角处理的示例代码： ```csharp using ImageMagick; class Program { static void Main(string[] args) { using (MagickImage image = new MagickImage("input.jpg")) { // ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值