Android实现圆形圆角图片
本文主要使用兩種方法實現圖形圓角圖片
自定View加上使用Xfermode實現
/** * 根據原圖和變長繪制圓形圖片 * * @param source * @param min * @return */ private Bitmap createCircleImage(Bitmap source, int min) { final Paint paint = new Paint(); paint.setAntiAlias(true); Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888); /** * 產生一個同樣大小的畫布 */ Canvas canvas = new Canvas(target); /** * 首先繪制圓形 */ canvas.drawCircle(min / 2, min / 2, min / 2, paint); /** * 使用SRC_IN */ paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); /** * 繪制圖片 */ canvas.drawBitmap(source, 0, 0, paint); return target; }其實主要靠:
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));這行代碼,為什么呢,我給大家解釋下,SRC_IN這種模式,兩個繪制的效果疊加后取交集展現后圖,怎么說呢,咱們第一個繪制的是個圓形,第二個繪制的是個Bitmap,于是交集為圓形
參考鏈接
Android 完美實現圖片圓角和圓形(對實現進行分析) - Hongyang - 博客頻道 - CSDN.NET
使用BitmapShader實現
效果圖
淺談BitmapShader
BitmapShader是Shader的子類,可以通過Paint.setShader(Shader shader)進行設置、
這里我們只關注BitmapShader,構造方法:
參數1:bitmap
參數2,參數3:TileMode;
TileMode的取值有三種:
- CLAMP 拉伸
- REPEAT 重復
- MIRROR 鏡像
如果大家給電腦屏幕設置屏保的時候,如果圖片太小,可以選擇重復、拉伸、鏡像;
重復:就是橫向、縱向不斷重復這個bitmap
鏡像:橫向不斷翻轉重復,縱向不斷翻轉重復;
拉伸:這個和電腦屏保的模式應該有些不同,這個拉伸的是圖片最后的那一個像素;橫向的最后一個橫行像素,不斷的重復,縱項的那一列像素,不斷的重復;
現在大概明白了,BitmapShader通過設置給mPaint,然后用這個mPaint繪圖時,就會根據你設置的TileMode,對繪制區域進行著色。
這里需要注意一點:就是BitmapShader是從你的畫布的左上角開始繪制的,不在view的右下角繪制個正方形,它不會在你正方形的左上角開始。
好了,到此,我相信大家對BitmapShader有了一定的了解了;當然了,如果你希望對Shader充分的了解
參考
自定義控件其實很簡單1/3 - AigeStudio - 博客頻道 - CSDN.NET
對于我們的圓角,以及圓形,我們設置的模式都是CLAMP ,但是你會不會會有一個疑問:
view的寬或者高大于我們的bitmap寬或者高豈不是會拉伸?
嗯,我們會為BitmapShader設置一個matrix,去適當的放大或者縮小圖片,不會讓“ view的寬或者高大于我們的bitmap寬或者高 ”此條件成立的。
到此我們的原理基本介紹完畢了,拿到drawable轉化為bitmap,然后直接初始化BitmapShader,畫筆設置Shader,最后在onDraw里面進行畫圓就行了。
BitmapShader實戰
自定義屬性
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="borderRadius" format="dimension" /> <attr name="type"> <enum name="circle" value="0" /> <enum name="round" value="1" /> </attr> <declare-styleable name="RoundImageView"> <attr name="borderRadius" /> <attr name="type" /> </declare-styleable> </resources>獲取自定義屬性
public class RoundImageView extends ImageView { /** * 圖片的類型,圓形or圓角 */ private int type; private static final int TYPE_CIRCLE = 0; private static final int TYPE_ROUND = 1; /** * 圓角大小的默認值 */ private static final int BODER_RADIUS_DEFAULT = 10; /** * 圓角的大小 */ private int mBorderRadius; /** * 繪圖的Paint */ private Paint mBitmapPaint; /** * 圓角的半徑 */ private int mRadius; /** * 3x3 矩陣,主要用于縮小放大 */ private Matrix mMatrix; /** * 渲染圖像,使用圖像為繪制圖形著色 */ private BitmapShader mBitmapShader; /** * view的寬度 */ private int mWidth; private RectF mRoundRect; public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); mMatrix = new Matrix(); mBitmapPaint = new Paint(); mBitmapPaint.setAntiAlias(true); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView); mBorderRadius = a.getDimensionPixelSize( R.styleable.RoundImageView_borderRadius, (int) TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_DIP, BODER_RADIUS_DEFAULT, getResources() .getDisplayMetrics()));// 默認為10dp type = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默認為Circle a.recycle(); }onMeasure
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { Log.e("TAG", "onMeasure"); super.onMeasure(widthMeasureSpec, heightMeasureSpec); /** * 如果類型是圓形,則強制改變view的寬高一致,以小值為準 */ if (type == TYPE_CIRCLE) { mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight()); mRadius = mWidth / 2; setMeasuredDimension(mWidth, mWidth); } }設置BitmapShader
/** * 初始化BitmapShader */ private void setUpShader() { Drawable drawable = getDrawable(); if (drawable == null) { return; } Bitmap bmp = drawableToBitamp(drawable); // 將bmp作為著色器,就是在指定區域內繪制bmp mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP); float scale = 1.0f; if (type == TYPE_CIRCLE) { // 拿到bitmap寬或高的小值 int bSize = Math.min(bmp.getWidth(), bmp.getHeight()); scale = mWidth * 1.0f / bSize; } else if (type == TYPE_ROUND) { // 如果圖片的寬或者高與view的寬高不匹配,計算出需要縮放的比例;縮放后的圖片的寬高,一定要大于我們view的寬高;所以我們這里取大值; scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight() * 1.0f / bmp.getHeight()); } // shader的變換矩陣,我們這里主要用于放大或者縮小 mMatrix.setScale(scale, scale); // 設置變換矩陣 mBitmapShader.setLocalMatrix(mMatrix); // 設置shader mBitmapPaint.setShader(mBitmapShader); }在setUpShader中,首先對drawable轉化為我們的bitmap;
然后初始化
接下來,根據類型以及bitmap和view的寬高,計算scale;
關于scale的計算:
圓形時:取bitmap的寬或者高的小值作為基準,如果采用大值,縮放后肯定不能填滿我們的圓形區域。然后,view的mWidth/bSize ; 得到的就是scale。
圓角時:因為設計到寬/高比例,我們分別
getWidth() * 1.0f / bmp.getWidth() 和 getHeight() * 1.0f / bmp.getHeight() ;最終取大值,因為我們要讓最終縮放完成的圖片一定要大于我們的view的區域,有點類似centerCrop;
比如:view的寬高為10*20;圖片的寬高為5*100 ; 最終我們應該按照寬的比例放大,而不是按照高的比例縮小;因為我們需要讓縮放后的圖片,自定大于我們的view寬高,并保證原圖比例。
有了scale,就可以設置給我們的matrix;
然后使用mBitmapShader.setLocalMatrix(mMatrix);
最后將bitmapShader設置給paint。
關于drawable轉bitmap的代碼:
最后我們會在onDraw里面調用setUpShader(),然后進行繪制。
繪制
@Override protected void onDraw(Canvas canvas) { if (getDrawable() == null) { return; } setUpShader(); if (type == TYPE_ROUND) { canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius, mBitmapPaint); } else { canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint); // drawSomeThing(canvas); } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // 圓角圖片的范圍 if (type == TYPE_ROUND) mRoundRect = new RectF(0, 0, getWidth(), getHeight()); }狀態的存儲與恢復
當然了,如果內存不足,而恰好我們的Activity置于后臺,不幸被重啟,或者用戶旋轉屏幕造成Activity重啟,我們的View應該也能盡可能的去保存自己的屬性。
狀態保存什么用處呢?比如,現在一個的圓角大小是10dp,用戶點擊后變成50dp;當用戶旋轉以后,或者長時間置于后臺以后,返回我們的Activity應該還是50dp;
我們簡單的存儲一下,當前的type以及mBorderRadius
參考鏈接
Android BitmapShader 實戰 實現圓形、圓角圖片 - Hongyang - 博客頻道 - CSDN.NET
源代碼
源代碼
最終效果如下
總結
以上是生活随笔為你收集整理的Android实现圆形圆角图片的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: dlib+vs2013+opencv实现
- 下一篇: tensorflow知识点