在圆形位图上添加一个圆形边框圈

11

我试图在位图周围创建一个圆形边框!

这就是我想要实现的效果!

使用下面的代码,我能够使我的位图变成圆形:

    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
            .getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff4242DB;
    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 = bitmap.getWidth()/2;

    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));
        //canvas.drawCircle(0, 0, bitmap.getWidth(), paint);
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}

我尝试使用canvas画圆(被注释的那行代码),但是没有效果。有谁知道如何在它周围添加一个圆形边框吗?

编辑

当我使用以下代码:

canvas.drawCircle(0, 0, bitmap.getWidth(), paint);
效果是,三个角被圆滑处理,但左上角保持不变(90度)。 但我看不到任何线条或圆形!

你有收到任何错误吗?如果没有,问题是什么? - Sam
@Sam 不好意思,我会更新问题! - Sebastian
你是如何在后面制作小阴影的? - xanexpt
1个回答

38

更新

现在有一个名为RoundedBitmapDrawable的类以及对应的工厂在Support库中,我建议使用它,除非需要更多的灵活性。


原始回答

你必须在位图之后绘制圆形。这就是让我成功的关键。

int w = bitmap.getWidth();                                          
int h = bitmap.getHeight();                                         

int radius = Math.min(h / 2, w / 2);                                
Bitmap output = Bitmap.createBitmap(w + 8, h + 8, Config.ARGB_8888);

Paint p = new Paint();                                              
p.setAntiAlias(true);                                               

Canvas c = new Canvas(output);                                      
c.drawARGB(0, 0, 0, 0);                                             
p.setStyle(Style.FILL);                                             

c.drawCircle((w / 2) + 4, (h / 2) + 4, radius, p);                  

p.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));                 

c.drawBitmap(bitmap, 4, 4, p);                                      
p.setXfermode(null);                                                
p.setStyle(Style.STROKE);                                           
p.setColor(Color.WHITE);                                            
p.setStrokeWidth(3);                                                
c.drawCircle((w / 2) + 4, (h / 2) + 4, radius, p);                  

return output;   

当然,这并不包括您示例中的花哨阴影。您可能想尝试一下额外像素的变化。


1
我怎样可以在这里获取更大的图像? - Mohammad Rajob
嗨@lovis,我不太明白在不同的绘图语句中添加到宽度和高度的常量8和4的用途是什么,你能否解释一下?还有一件事,当你添加这些值(8和4)时,它们是以像素为单位而不是与屏幕密度dp相关的。 - Ayman Mahgoub
@AymanMahgoub 嘿,这些值是随机选择的。但它们将确定边框的大小。左右各4像素的边框使得总共为8像素,上下同理。使用像素因为在示例中更容易。 - Lovis
谢谢@lovis,我明白了) - Ayman Mahgoub

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接