热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Android自定义View实现圆形切图效果

这篇文章主要为大家详细介绍了Android自定义View实现圆形切图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用自定义View实现圆形ImageView的效果,具体内容如下

目前圆形边框还需要调整,这里有点问题

实现思路

使用一个Paint,将得到的Bitmap设置成paint的Shader,设置完成后,使用Matrix调整图片至居中,使用RectF约束边框,最后完成绘制

初始化Paint,设置Shader

private void init() {
 getBitmapFromDrawable();
 if (mBitmap == null) {
  return;
 }
 mShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

 // bitmap paint
 mFillPaint = new Paint();
 mFillPaint.setAntiAlias(true);
 mFillPaint.setStyle(Paint.Style.FILL);
 mFillPaint.setShader(mShader);

 // border paint
 mBoundPaint = new Paint();
 mBoundPaint.setAntiAlias(true);
 mBoundPaint.setStyle(Paint.Style.STROKE);
 mBoundPaint.setStrokeWidth(mBorderWidth);
 mBoundPaint.setColor(mBorderColor);

 // border rectF
 mBorderBound.set(calculateBitmapBound());

 // bitmap rectF
 mBitmapBound.set(calculateBitmapBound());
 mBitmapBound.inset(mBorderWidth - 10, mBorderWidth - 10);
 updateShaderMatrix();

 }

获取Drawable

private Bitmap getBitmapFromDrawable() {
 Drawable drawable = getDrawable();
 if (drawable instanceof BitmapDrawable) {
  mBitmap = ((BitmapDrawable) drawable).getBitmap();
  mBitmapWidth = mBitmap.getWidth();
  mBitmapHeight = mBitmap.getHeight();
  return mBitmap;
 }
 return null;
 }

计算边距

 /**
 * 计算Bitmap边距
 */
 private RectF calculateBitmapBound() {
 int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
 int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
 int sideLength = Math.min(availableWidth, availableHeight); // 可用的直径
 mRadius = sideLength / 2;

 int left = getPaddingLeft() + (availableWidth - sideLength) / 2;
 int top = getPaddingTop() + (availableHeight - sideLength) / 2;

 Log.d(TAG, "calculateBitmapBound: left >>> " + left + " top >>> " + top + " right >>> "
  + (left + sideLength) + " right >>> " + top + " bottom >>> " + (top + sideLength));
 return new RectF(left, top, left + sideLength, top + sideLength);
 }

调整Matrix,防止只显示图片边角

 /**
 * 调整图片缩放,目前只支持CenterCrop
 */
 private void updateShaderMatrix() {
 float scale;
 float dx = 0;
 float dy = 0;

 mShaderMatrix.set(null);

 // 调整缩放,使图片居中
 if (mBitmapWidth * mBitmapBound.height() > mBitmapBound.width() * mBitmapHeight) {
  scale = mBitmapBound.height() / (float) mBitmapHeight;
  dx = (mBitmapBound.width() - mBitmapWidth * scale) * 0.5f;
 } else {
  scale = mBitmapBound.width() / (float) mBitmapWidth;
  dy = (mBitmapBound.height() - mBitmapHeight * scale) * 0.5f;
 }

 Log.d(TAG, "updateShaderMatrix: scale >>> " + scale);
 mShaderMatrix.setScale(scale, scale);
 // TODO: 16-10-15 http://chroya.iteye.com/blog/713869
 // 回到中心点,便于下次缩放
 mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBitmapBound.left, (int) (dy + 0.5f) + mBitmapBound.top);

 mShader.setLocalMatrix(mShaderMatrix);
 }

onDraw

 @Override
 protected void onDraw(Canvas canvas) {
 if (mBitmap == null) {
  super.onDraw(canvas);
 }
 Log.d(TAG, "onDraw: centerX >>> " + mBitmapBound.centerX() + " centerY >>> " + mBitmapBound.centerY());
 canvas.drawCircle(mBitmapBound.centerX(), mBitmapBound.centerY(), mRadius, mFillPaint);
 // 绘制边框
 canvas.drawCircle(mBorderBound.centerX(), mBorderBound.centerY(), mRadius, mBoundPaint);
 }

完整代码

/**
 * Created by shixi_tianrui1 on 16-10-7.
 * 显示圆形图片的ImageView
 */

public class CircleImageView extends ImageView {

 private static final String TAG = "LOGGER";

 private BitmapShader mShader;
 private Paint mFillPaint; // 绘图
 private Paint mBoundPaint; // 绘制圆边

 private Bitmap mBitmap;
 private Drawable mDrawable;

 private int mBorderColor; // 边框颜色
 private float mBorderWidth; // 边框宽度

 private RectF mBorderBound = new RectF();
 private RectF mBitmapBound = new RectF();
 private Matrix mShaderMatrix = new Matrix();

 private int mRadius;
 private int mBitmapWidth;
 private int mBitmapHeight;

 private static final float DEFAULT_BORDER_WIDTH = 5;

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

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

 public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 TypedArray a = getResources().obtainAttributes(attrs, R.styleable.CircleImageView);
 mBorderColor = a.getColor(R.styleable.CircleImageView_borderColor, Color.BLUE);
 mBorderWidth = a.getDimension(R.styleable.CircleImageView_borderWidth, DEFAULT_BORDER_WIDTH);
 mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_borderWidth, 20);
 a.recycle();
 }

 private void init() {
 getBitmapFromDrawable();
 if (mBitmap == null) {
  return;
 }
 mShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

 // bitmap paint
 mFillPaint = new Paint();
 mFillPaint.setAntiAlias(true);
 mFillPaint.setStyle(Paint.Style.FILL);
 mFillPaint.setShader(mShader);

 // border paint
 mBoundPaint = new Paint();
 mBoundPaint.setAntiAlias(true);
 mBoundPaint.setStyle(Paint.Style.STROKE);
 mBoundPaint.setStrokeWidth(mBorderWidth);
 mBoundPaint.setColor(mBorderColor);

 // border rectF
 mBorderBound.set(calculateBitmapBound());

 // bitmap rectF
 mBitmapBound.set(calculateBitmapBound());
 mBitmapBound.inset(mBorderWidth - 10, mBorderWidth - 10);
 updateShaderMatrix();

 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 init();
 }

 /**
 * 计算Bitmap边距
 */
 private RectF calculateBitmapBound() {
 int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
 int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
 int sideLength = Math.min(availableWidth, availableHeight); // 可用的直径
 mRadius = sideLength / 2;

 int left = getPaddingLeft() + (availableWidth - sideLength) / 2;
 int top = getPaddingTop() + (availableHeight - sideLength) / 2;

 Log.d(TAG, "calculateBitmapBound: left >>> " + left + " top >>> " + top + " right >>> "
  + (left + sideLength) + " right >>> " + top + " bottom >>> " + (top + sideLength));
 return new RectF(left, top, left + sideLength, top + sideLength);
 }


 private Bitmap getBitmapFromDrawable() {
 Drawable drawable = getDrawable();
 if (drawable instanceof BitmapDrawable) {
  mBitmap = ((BitmapDrawable) drawable).getBitmap();
  mBitmapWidth = mBitmap.getWidth();
  mBitmapHeight = mBitmap.getHeight();
  return mBitmap;
 }
 return null;
 }

 @Override
 protected void onDraw(Canvas canvas) {
 if (mBitmap == null) {
  super.onDraw(canvas);
 }
 Log.d(TAG, "onDraw: centerX >>> " + mBitmapBound.centerX() + " centerY >>> " + mBitmapBound.centerY());
 canvas.drawCircle(mBitmapBound.centerX(), mBitmapBound.centerY(), mRadius, mFillPaint);
 // 绘制边框
 canvas.drawCircle(mBorderBound.centerX(), mBorderBound.centerY(), mRadius, mBoundPaint);
 }


 /**
 * 调整图片缩放,目前只支持CenterCrop
 */
 private void updateShaderMatrix() {
 float scale;
 float dx = 0;
 float dy = 0;

 mShaderMatrix.set(null);

 // 调整缩放,使图片居中
 if (mBitmapWidth * mBitmapBound.height() > mBitmapBound.width() * mBitmapHeight) {
  scale = mBitmapBound.height() / (float) mBitmapHeight;
  dx = (mBitmapBound.width() - mBitmapWidth * scale) * 0.5f;
 } else {
  scale = mBitmapBound.width() / (float) mBitmapWidth;
  dy = (mBitmapBound.height() - mBitmapHeight * scale) * 0.5f;
 }

 Log.d(TAG, "updateShaderMatrix: scale >>> " + scale);
 mShaderMatrix.setScale(scale, scale);
 // TODO: 16-10-15 http://chroya.iteye.com/blog/713869
 // 回到中心点,便于下次缩放
 mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBitmapBound.left, (int) (dy + 0.5f) + mBitmapBound.top);

 mShader.setLocalMatrix(mShaderMatrix);
 }
}

目前仍有点问题,解决后会及时更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文详细介绍了SQL日志收缩的方法,包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时,还介绍了截断日志的原理和注意事项,包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法,可以有效减小逻辑日志的大小,提高数据库的性能。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 关羽败走麦城时路过马超封地 马超为何没有出手救人
    对当年关羽败走麦城,恰好路过马超的封地,为啥马超不救他?很感兴趣的小伙伴们,趣历史小编带来详细的文章供大家参考。说到英雄好汉,便要提到一本名著了,没错,那就是《三国演义》。书中虽 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • PHP设置MySQL字符集的方法及使用mysqli_set_charset函数
    本文介绍了PHP设置MySQL字符集的方法,详细介绍了使用mysqli_set_charset函数来规定与数据库服务器进行数据传送时要使用的字符集。通过示例代码演示了如何设置默认客户端字符集。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 橱窗设计的表现手法及其应用
    本文介绍了橱窗设计的表现手法,包括直接展示、寓意与联想、夸张与幽默等。通过对商品的折、拉、叠、挂、堆等陈列技巧,橱窗设计能够充分展现商品的形态、质地、色彩、样式等特性。同时,寓意与联想可以通过象形形式或抽象几何道具来唤起消费者的联想与共鸣,创造出强烈的时代气息和视觉空间。合理的夸张和贴切的幽默能够明显夸大商品的美的因素,给人以新颖奇特的心理感受,引起人们的笑声和思考。通过这些表现手法,橱窗设计能够有效地传达商品的个性内涵,吸引消费者的注意力。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • faceu激萌变老特效的使用方法详解
    本文介绍了faceu激萌变老特效的使用方法,包括打开faceu激萌app、点击贴纸、选择热门贴纸中的变老特效,然后对准人脸进行拍摄,即可给照片添加变老特效。操作简单,适合新用户使用。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 大连微软技术社区举办《.net core始于足下》活动,获得微软赛百味和易迪斯的赞助
    九月十五日,大连微软技术社区举办了《.net core始于足下》活动,共有51人报名参加,实际到场人数为43人,还有一位专程从北京赶来的同学。活动得到了微软赛百味和易迪斯的赞助,场地也由易迪斯提供。活动中大家积极交流,取得了非常成功的效果。 ... [详细]
  • 给定一个二叉树,要求随机选择树上的一个节点。解法:遍历树的过程中,随机选择一个节点即可。具体做法参看:从输入 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
author-avatar
多米音乐_35946826
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有