自定义圆形图片

原创 2016年06月01日 13:26:00

这里写图片描述

使用到的知识: Paint画笔 Canvas 画布
* 1.自定义圆环
* 2.绘制圆形图片,是通过 图层之间相互影响实现的。
* 3.图像的等比例裁切计算原则
* 4.图片压缩方法(暂时没有使用)

不造轮子,只分析原理

package version1;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
import com.nuoyuan.t.R;

/**
 * Created by weichyang on 2016/6/1. 在view 包下为什么不可以使用
 * 1.自定义圆环的
 * 2.绘制圆形图片,是通过 图层之间相互影响实现的。
 * 3.图像的等比例裁切计算原则
 * 4.图片压缩方法
 */
public class CircleImageView extends ImageView {

    private Paint mPaint;
    private int mViewWidth;
    private int mViewHeight;
    private RectF rectF = new RectF(); //四个定点
    private int mRadius = 300;

    public CircleImageView(Context context) {
        super(context);
        initPaint();
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    /**
     * 初始化的画笔
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(2);
        mPaint.setAntiAlias(true);
        mPaint.setColor(getResources().getColor(android.support.design.R.color.material_blue_grey_800));

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawArc(rectF, 0, 360, true, mPaint);
        //画圆形头像
        Bitmap bm = drableToBitmap();
        // 裁剪一个图片的过程
        Bitmap bitmap = getCroppedRoundBitmap(bm, mViewWidth / 2);

        canvas.drawBitmap(bitmap, rectF.left, rectF.top, mPaint);
    }

    Bitmap drableToBitmap() {
        Drawable d = getResources().getDrawable(R.drawable.meizi); //xxx根据自己的情况获取drawable
        BitmapDrawable bd = (BitmapDrawable) d;
        return bd.getBitmap();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mViewWidth = getMeasuredWidth();
        mViewHeight = getMeasuredHeight();

//        rectF.set(
//                mViewWidth / 2 - mRadius,
//                mViewHeight / 2 - mRadius,
//                mViewWidth / 2 + mRadius,
//                mViewHeight / 2 + mRadius);
        rectF.set(
                0, 0,
                mViewWidth,
                mViewHeight);


    }

    public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
        Bitmap scaledSrcBmp;

        //制定圆形头像的直角
        int diameter = radius * 2;

        // 为了防止宽高不相等,造成圆形图片变形,因此截取长方形中处于中间位置最大的正方形图片
        int bmpWidth = bmp.getWidth();
        int bmpHeight = bmp.getHeight();

        int squareWidth = 0, squareHeight = 0;

        int x = 0, y = 0;

        Bitmap squareBitmap;
        /**
         * 计算等比例正方向
         */
        squareBitmap = getSquareHeight(bmp, bmpWidth, bmpHeight);

        if (squareBitmap.getWidth() != diameter
                || squareBitmap.getHeight() != diameter) {
            scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,
                    diameter, true);

        } else {
            scaledSrcBmp = squareBitmap;
        }

        /**
         * 建立一个空白图片
         */
        Bitmap output = Bitmap.createBitmap(mViewWidth * 2,
                mViewWidth * 2, Bitmap.Config.ARGB_8888);

        // TODO: 2016/6/1  canvas 进行关联  第二个canvas
        Canvas canvas = new Canvas(output);

        Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),
                scaledSrcBmp.getHeight());

        Paint paint = new Paint();
        //抗锯齿 滤波 抗锯齿
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        paint.setColor(getResources().getColor(R.color.black));

//        canvas.drawARGB(0, 0, 0, 0);

        // TODO: 2016/6/1  圆形图层 1
        canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
                scaledSrcBmp.getHeight() / 2, scaledSrcBmp.getWidth() / 2,
                paint);

        // TODO: 2016/6/1  矩形图层 1
//        canvas.drawRect(rect,paint);
//
        // todo 图层之间的关系 http://blog.csdn.net/wm111/article/details/7299294  图层关系。
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        //todo 上层图层2
        canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);

        // bitmap回收(recycle导致在布局文件XML看不到效果)
        // bmp.recycle();
        // squareBitmap.recycle();
        // scaledSrcBmp.recycle();
        bmp = null;
        squareBitmap = null;
        scaledSrcBmp = null;
        return output;
    }

    /**
     * 得到中间位置 等比例 以较小边优先
     *
     * @param bmp
     * @param bmpWidth
     * @param bmpHeight
     * @return
     */
    private Bitmap getSquareHeight(Bitmap bmp, int bmpWidth, int bmpHeight) {
        int squareHeight;
        int squareWidth;
        int x;
        int y;
        Bitmap squareBitmap;

        // todo  高大于宽
        if (bmpHeight > bmpWidth) {
            squareWidth = squareHeight = bmpWidth;
            x = 0;
            y = (bmpHeight - bmpWidth) / 2; //计算top开始位置
            // 截取正方形图片
            squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
                    squareHeight);
            //todo 宽大于高
        } else if (bmpHeight < bmpWidth) {
            squareWidth = squareHeight = bmpHeight;
            x = (bmpWidth - bmpHeight) / 2;
            y = 0;
            squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
                    squareHeight);
        } else {
            squareBitmap = bmp;
        }
        return squareBitmap;
    }


}
版权声明:本文为博主原创文章,转载请注明出处。

Android自定义圆形图片

Android自定义圆形图片,可设置最多两个的外边框。包括从网络获取图片显示。 解决图片锯齿问题。 解决图片变形问题。 源代码下载...
  • alan_biao
  • alan_biao
  • 2013年12月17日 17:13
  • 70284

Android开源项目——自定义圆形图片组件CircularImageView

项目github地址: 控件功能:可以将任意图片裁剪成圆形,控件的大小可以自定义,可以指定图片中心点和半径,也可以添加圆形边框并设置边框的颜色。 使用方法:和使用其他自定义控件没什么区别,这里只需要...
  • u010852801
  • u010852801
  • 2015年04月13日 15:03
  • 2831

自定义View(1)--圆形图片、圆角图片的实现

之前说过会将项目中运用的东西抽离出来做一个总结,今天我主要想总结一下圆角和圆形头像问题。由于我们的应用涉及到很多用户头像,如果所有的图像都是方方正正的话,那显得不是很美观,所以设计湿强行要我将头像圆角...
  • u011512180
  • u011512180
  • 2015年06月26日 16:21
  • 889

自定义Drawable实现圆形图像

CustomDrawable.javapackage com.zhoujian.drawable.view;import android.graphics.Bitmap; import android...
  • u014005316
  • u014005316
  • 2016年12月09日 14:04
  • 463

自定义圆形图片控件

做项目有个地方要用圆形图片做头像,而美工只给了我一个方形图片。。 本来打算自己PS的,就先放着了。后来网上搜到可以通过代码来实现圆形头像,而且上次面试还被问到了怎么实现圆形图片。。。 于是这次动手用自...
  • lqc1992
  • lqc1992
  • 2016年05月06日 15:26
  • 716

Android中使用自定义的view实现圆形图片的效果

今天给大家讲的是怎么在xml文件找中通过引用自定义的view实现ImageView的圆形图片效果。首先在你的项目中新建一个类,我给它命名为:CircleImageView;然后在res目录下的valu...
  • csdnzouqi
  • csdnzouqi
  • 2016年07月24日 16:26
  • 3991

Android自定义圆形图片按钮

自定义圆形图片类: package com.android.login_demo02.plug; import android.content.Context; import android.grap...
  • u014157740
  • u014157740
  • 2015年07月13日 22:50
  • 1314

Android圆形图片不求人,自定义View实现(BitmapShader使用)

在很多APP当中,圆形的图片是必不可少的元素,美观大方。本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情。 一、先上效果图 二、实现思路 ...
  • a369414641
  • a369414641
  • 2016年11月17日 13:12
  • 1656

自定义圆形图片CircleImageView

效果图具体代码实现自定义的ImageView:CircleImageView.javapackage com.plusub.rentlandapp.view;import android.conten...
  • u012975705
  • u012975705
  • 2015年11月02日 11:35
  • 1738

Android开发旋转圆形图片自定义View

撸了一个自定义View,记录一下思路和代码以备以后使用. 思路: 1,首先要画一个圆形图片和一个圆形背景图(通过自定义View); 2,自定义View基本步骤初始化属性,测量宽高和中心点,然后绘...
  • wangjiangjun0815
  • wangjiangjun0815
  • 2017年11月07日 19:01
  • 187
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义圆形图片
举报原因:
原因补充:

(最多只允许输入30个字)