Fighting

分寸 , 克制

android 手把手教你绘制圆形头像

自从腾讯QQ中的圆形头像,火了起来后,现在我们在一些应用中都能看到圆形头像的身影,在个人主页或者个人资料面板中使用圆形头像,会使整个布局变得更加优雅

现在我们来进行第一步,创建一个继承ImageView的抽象类MakeRoundImage。让他重写onDraw方法,并且声明一个画笔


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by blue on 2016/8/19.
 */

public class MakeRoundImage extends ImageView {
     private Paint paint;

    public MakeRoundImage(Context context) {
         this(context,null);
    }

    public MakeRoundImage(Context context, AttributeSet attrs) {
         this(context, attrs,0);
    }

    public MakeRoundImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
    }


    @Override
    protected void onDraw(Canvas canvas) {

    }
}

然后就可以在onDraw 通过 getDrawable得到ImageView的drawable的属性,然后将它转换为bitmap,通过getRoundBitmap方法得到一个圆角的矩形的Bitmap,下面是getRoundRectBitmap方法

 /*
    @author :blue-zj
    获取到圆角矩形图片
     */
    private Bitmap getRoundRectBitmap(Bitmap bitmap) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int r = width > height ? height: width; //去圆角正方形的边长,取最短边做边长
        Bitmap backGround = Bitmap.createBitmap(width,
                height, Bitmap.Config.ARGB_8888); //创建一个与原图大小一样的32位ARGB位图
        Canvas canvas = new Canvas(backGround);   //new一个Canvas,在backgroundBmp上画图
        Paint paint = new Paint();
        paint.setAntiAlias(true); //设置画笔边缘光滑,去掉锯齿
        RectF rect = new RectF(0, 0, r, r); //设置宽高相等,(正方形)
        //通过制定的rect画一个圆角矩形,当圆角X轴方向的半径等于Y轴方向的半径时,
        //且都等于r/2时,画出来的圆角矩形就是圆形
        canvas.drawRoundRect(rect, r >> 1, r >> 1, paint);
        //设置当两个图形相交时的模式,SRC_IN为取SRC图形相交的部分,多余的将被去掉
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //canvas将bitmap画在backgroundBmp上
        canvas.drawBitmap(bitmap, null, rect, paint);
        //返回已经绘画好的backgroundBmp
        return backGround;
    }

首先我们通过传进去的Bitmap,得到了原图的大小,创建了一个与原图一样大小的正方形圆角bitmap,然后我们在这个正方形圆角中将传进来的bitmap,与创建的位图通过画笔的

paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_IN));  //设置当两个图形相交时的模式,SRC_IN为取SRC图形相交的部分,多余的将被去掉

来讲bitmap进行裁剪成一个圆角矩形的bitmap,然后再返回,

最后在onDraw方法中调用getRoundRectBitmap获取到我们的圆角矩形图片,然后再在将原有的ImageView的canvas上进行裁剪

  @Override  
    protected void onDraw(Canvas canvas) {  

        Drawable drawable = getDrawable();//得到ImageView的drawable属性
        if (null != drawable) {  
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  //获取到ImageView的bitmap
            Bitmap b = toRoundBitmap(bitmap);//获取圆角图片
            /*
            Rect src: 是对图片进行裁截,若是空null则显示整个图片
             RectF dst:是图片在Canvas画布中显示的区域,
            大于src则把src的裁截区放大,
            小于src则把src的裁截区缩小。
             */
            final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());  
            final Rect rectDest = new Rect(0,0,getWidth(),getHeight()   );
            paint.reset();  //重置画笔
            canvas.drawBitmap(b, rectSrc, rectDest, paint);//在原有的画布中裁剪出圆形图片
        } else {  
            super.onDraw(canvas);  
        }  
    }   

这个图片裁剪的类已经写完了,最后就是在布局中调用了

<com.example.blue.makeroundimage.MakeRoundImage
    android:src="@drawable/my_head"
    android:layout_height="80dp"
    android:layout_width="80dp"

    tools:layout_editor_absoluteY="208dp"
    tools:layout_editor_absoluteX="157dp" />

下面是运行结果 :
这里写图片描述

最近越来越浮躁了,要时刻反省自己,只要能够为了当时纯粹的梦想和感动坚持努力下去,不管其它人怎么样,我也要保持自己的本色走下去。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33048603/article/details/52250917
文章标签: android imageview
个人分类: android
所属专栏: android 学习
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

android 手把手教你绘制圆形头像

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭