一个简单的圆形图片实现

序言

很多时候我们都需要使用到圆形的图像控件，比如头像之类的。如果是开发者自己设计界面的时候使用，取巧的方法就是让美工给你做一个圆形ICON，但很多时候是需要显示用户上传的图像，这时候做一个通用的圆形图像控件是有必要的，那如何实现呢？

正文

Android图像控件一般是使用ImageView，那么我们这个自定义CircleView的圆形图像控件就继承于该控件。

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.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;/*** Helen 2015-05-13 */
public class CircleView extends ImageView{private Bitmap mSrcBitmap;//ImageView设置的图像资源文件private Bitmap mOut;private Paint mPaint;//画笔public CircleView(Context context) {super(context);init();}public CircleView(Context context, AttributeSet attrs) {super(context, attrs);init();}public CircleView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}private void init(){//setLayerType(LAYER_TYPE_SOFTWARE,null);//禁用硬件加速mSrcBitmap=((BitmapDrawable)getDrawable()).getBitmap();mOut=Bitmap.createBitmap(mSrcBitmap.getWidth(),mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);Canvas canvas=new Canvas(mOut);//Dstcanvas.drawCircle(mOut.getWidth() / 2, mOut.getHeight() / 2,mOut.getWidth() / 2, mPaint);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//Srccanvas.drawBitmap(mSrcBitmap,0,0,mPaint);mPaint.setXfermode(null);}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawBitmap(mOut,0,0,null);}}

实现的方法是使用Paint的Xfermode属性。需要了解的请戳这里
布局文件如下activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><ImageView
        android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/test"android:layout_above="@+id/view"android:layout_centerHorizontal="true"android:layout_marginBottom="64dp" /><com.hbase.view.CircleView
        android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@mipmap/test"android:id="@+id/view" />
</RelativeLayout>

效果图：

上面是原图，下面是圆形图像控件。
但是你会发现，是这张图片切得刚好大小，我们换张大点的试试。

效果并不是我们所想要的。
那么如何改进呢？我们是否可以根据控件的大小来显示图像并将图像进行缩放呢？
改进后：

package com.hbase.view;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.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;/*** Helen 2015-05-13*/
public class CircleView extends ImageView{private Bitmap mSrcBitmap;//ImageView设置的图像资源文件private Bitmap mOut;private Paint mPaint;//画笔public CircleView(Context context) {super(context);//init();}public CircleView(Context context, AttributeSet attrs) {super(context, attrs);//init();}public CircleView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);//init();}private void init(){//setLayerType(LAYER_TYPE_SOFTWARE,null);//禁用硬件加速Drawable d=getDrawable();if(d==null) return;mSrcBitmap=((BitmapDrawable)d).getBitmap();//mOut=Bitmap.createBitmap(mSrcBitmap.getWidth(),mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);mSrcBitmap=Bitmap.createScaledBitmap(mSrcBitmap,getWidth(),getHeight(),true);//设置缩放mOut=Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);Canvas canvas=new Canvas(mOut);//Dstcanvas.drawCircle(getWidth() / 2, getHeight() / 2,getWidth() / 2, mPaint);//canvas.drawCircle(mOut.getWidth() / 2, mOut.getHeight() / 2,mOut.getWidth() / 2, mPaint);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//Srccanvas.drawBitmap(mSrcBitmap,0,0,mPaint);mPaint.setXfermode(null);}@Overrideprotected void onDraw(Canvas canvas) {//只有在onDraw中才能获取到控件的宽高init();canvas.drawBitmap(mOut,0,0,null);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int width=Math.min(getMeasuredHeight(),getMeasuredWidth());//因为是要圆形图像，所以将控件的宽高设置为一样setMeasuredDimension(width,width);}
}

效果图：

一个简单的圆形图片实现相关推荐

一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件
插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...
java创建一个图片_Java 创建一个简单的验证码图片
代码如下: package lixin.gan.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2 ...
写一个简单的MTK图片管理工具
前段时间曾经写了一篇介绍MTK的铃声管理的工具,可以把MP3,MID,WAV等声音转化为MTK可以使用的数组以供在编程中使用.后来针对有些朋友需要把数组再转为文件的需求,写了把数组重新写回文件的文章. ...
使用EasyX设计一个简单的有图片背景有音乐的界面
首先先去互联网下载一个开放版权的你喜欢的背景图片,和自己喜欢的音乐. 音乐: 图片: . 右击项目将图片和音乐放在代码存储的同文件夹下,方便使用源文件有点多,其实就是这两个文件查看图片的尺寸点击 ...
用python画一个简单卡通人物图片_Python绘制可爱的卡通人物 | 【turtle使用】
Turtle库简介什么是Turtle 首先,turtle库是一个点线面的简单图像库,能够完成一些比较简单的几何图像可视化.它就像一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始 ...
用python画一个简单卡通人物图片_用python画一只可爱的皮卡丘实例
效果图 #!/usr/bin/env python # -*- coding:utf-8 -*- from turtle import * ''' 绘制皮卡丘头部 ''' def face(x,y): ...
Blender 制作一个简单的圆形
⚪

一个简单的圆形图片实现

序言

正文

一个简单的圆形图片实现相关推荐

最新文章

热门文章