自定义圆形图片

原创 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自定义圆形头像图片

  • 2016年12月23日 14:27
  • 22.39MB
  • 下载

android实现自定义圆形图片

  • 2015年10月27日 22:41
  • 1.32MB
  • 下载

Android自定义圆形图片,设置边框

Android自定义圆形图片,可设置最多两个的外边框。包括从网络获取图片显示。 解决图片锯齿问题。 解决图片变形问题...

[Android]自定义圆形图片

  • 2016年01月25日 16:15
  • 2.07MB
  • 下载

自定义view(图片显示为圆形)

  • 2016年11月08日 11:36
  • 2KB
  • 下载

Android 自定义圆形图片和文本

Android自定义圆形图片和文本 http://blog.csdn.net/zapperbot/article/details/46872923?ref=myread(转) ...

安卓自定义ImageView实现圆形图片

  • 2016年08月23日 18:43
  • 1.71MB
  • 下载

android圆形图片控件自定义

  • 2016年05月10日 17:24
  • 511KB
  • 下载

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

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

自定义Drawable实现圆形图片

  • 2015年10月02日 12:19
  • 5.96MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义圆形图片
举报原因:
原因补充:

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