在开发中经常会有一些需求,比如显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其他的一些形状。但是往往我们手上的图片或者从服务器获取到的图片都是方形的。这时候就需要我们自己进行处理,将图片处理成所需要的形状。正如茴香豆的的“茴”写法大于一种,经过我的研究,画出特殊图片的方法也不是一种,我发现了三种,且听我一一道来。

使用Xfermode 两图相交方式

通过查找资料发现android中可以设置画笔的Xfermode即相交模式,从而设置两张图相交之后的显示方式,具体模式见下图,源码可以去android apidemo。(SRC 为我们要画到目标图上的图即原图,DST为目标图)

由上图可以看到,如果我们需要画一个圆形的图,可以在画布上面先画一个跟目标大小一样的圆,然后xfermode选择SRC_IN,再讲我们的头像或者其他图画上去就可以了。同样也可以先画我们的图,再画圆,不过xfermode要选择DST_IN。两种都可以实现我们需要的效果。示例代码如下:

Paint p = new Paint();
p.setAntiAlias(true); //去锯齿
p.setColor(Color.BLACK);
p.setStyle(Paint.Style.STROKE);
Canvas canvas = new Canvas(bitmap);  //bitmap就是我们原来的图,比如头像
p.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  //因为我们先画了图所以DST_IN
int radius = bitmap.getWidth; //假设图片是正方形的
canvas.drawCircle(radius, radius, radius, p); //r=radius, 圆心(r,r)

以上就是简单的示例,根据以上的16种模式你其实还可以做出更多效果。另外,只要你给一张相交图,那张图形状什么样,我们的图就可以显示成什么样。

通过裁剪画布区域实现指定形状的图形

Android中Canvas提供了ClipPath, ClipRect, ClipRegion 等方法来裁剪,通过Path, Rect ,Region 的不同组合,Android几乎可以支持任意形状的裁剪区域。因此,我们几乎可以获取任意形状的区域,然后在这个区域上画图,就可以获得,我们要的图片了,直接看示例。

int radius = src.getWidth() / 2; //src为我们要画上去的图,跟上一个示例中的bitmap一样。
Bitmap dest = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(dest);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
Path path = new Path();
path.addCircle(radius, radius, radius, Path.Direction.CW);
c.clipPath(path);   //裁剪区域
c.drawBitmap(src, 0, 0, paint);  //把图画上去

使用BitmapShader

直接先看示例

int radius = src.getWidth() / 2;
BitmapShader bitmapShader = new BitmapShader(src, Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
Bitmap dest = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(dest);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(bitmapShader);
c.drawCircle(radius,radius, radius, paint);

Shader就是画笔的渲染器,本质上这中方法其实是画圆,但是渲染采用了我们的图片,然后就可以获得指定的形状了。但是我觉得,这个不适合画很复杂的图形,但是在内存消耗上,应该比第一种小很多。同时呢,设置Shader.TileMode.MIRROR,还可以实现镜面效果,也是极好的。

上面就是实现的三种方法,三种方法都可以画很多的形状,当然遇到非常非常非常非常复杂的情况,我是建议使用第一种,这时候可以让美工给一张末班形状图,省自己去代码绘制了。大家根据自己的需求选择。

在github上面CustomShapeImageView就是用了我们所说的第一种方法绘制。RoundedImageView 和CircleImageView则使用bitmapshader完成,当然可能还有一些其他的控件,也许还有其他的一些实现方法,如果你知道,可以回复告诉我^_^。


原文链接:http://www.jianshu.com/p/c6c272d6dabc

画圆形图片的几种方式相关推荐

  1. Andorid显示圆形图片的4种方式

    这篇博客主要讲解了Android实现圆形图片的4种方式. Android中并没有一个原生的控件,可以显示圆形或圆角图片,因此需要我们自己去定义这样一个控件. 实现圆形/圆角图片的核心思想,就是按照一定 ...

  2. ImGui添加背景图片的两种方式

    给ImGui添加背景图片的两种方式 最近在使用ImGui做客户端程序,想给窗口添加背景图片,但是作者的文档里面好像并没有讲如何添加背景图片,研究了下找到了两种方式. 第一种 创建一个和窗口一样大的Im ...

  3. java servlet 返回图片_SpringMVC返回图片的几种方式

    SpringMVC返回图片的几种方式 后端提供服务,通常返回的json串,但是某些场景下可能需要直接返回二进制流,如一个图片编辑接口,希望直接将图片流返回给前端,此时可以怎么处理? I. 返回二进制图 ...

  4. [react] 在React中如何引入图片?哪种方式更好?

    [react] 在React中如何引入图片?哪种方式更好? 第一种导入: import Img from "./images/1.png" 第二种直接获取图片: <img s ...

  5. Java基础知识强化之IO流笔记44:IO流练习之 复制图片的 4 种方式案例

    1. 复制图片的 4 种方式案例: 分析: 复制数据,如果我们知道用记事本打开并能够读懂,就用字符流,否则用字节流. 通过该原理,我们知道我们应该采用字节流. 而字节流有4种方式,所以做这个题目我们有 ...

  6. 设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

    设置背景图片的两种方式,并解决手机端背景图片高度自适应问题 参考文章: (1)设置背景图片的两种方式,并解决手机端背景图片高度自适应问题 (2)https://www.cnblogs.com/Dark ...

  7. Android_AsyncTaskDemo之QQ记步数(画圆形图片知识)

    今天学习了AsyncTask Android 的异步机制.我简单的实现我的一个小小案例--qq记步数.然后穿插一个画圆形图片的知识点. 由于所学知识有限,目前我计数,还有排名等等我就简单的利用随机数实 ...

  8. Android加载GIF图片的两种方式

    飞哥语录:得到一件东西最好的方式是让自己配得上它. 方式一:使用第三开源框架直接在布局文件中加载gif 1.在工程的build.gradle中添加如下 buildscript {repositorie ...

  9. c语言加载本地图片,Unity加载本地图片的2种方式

    1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...

  10. CSS截图图片的几种方式

    CSS截图图片的几种方式 原图: DIV 使用background-position:Xpx Ypx (图片左上角坐标) 配合width和height <div class="div_ ...

最新文章

  1. ORB_SLAM2源码:ORBmatcher.cc
  2. VALSE 青年学者 | 心中的象牙塔:怎样才能拿到理想的教职offer?
  3. Android 动画汇总-自定义动画
  4. requireJS文件夹
  5. 计算机英语os是什么意思,os是什么意思(为什么手机系统有的叫OS)
  6. 云小课|大数据时代的隐私利器-GaussDB(DWS)数据脱敏
  7. windows下文件路径太深,无法删除解决办法
  8. 超标量处理器设计 姚永斌 第10章 指令提交 摘录
  9. 三角函数与反三角函数图像
  10. qt web混合编程_Qt+VS混合编程教程
  11. vue、webpack、bable
  12. [Python从零到壹] 五十八.图像增强及运算篇之图像锐化Sobel、Laplacian算子实现边缘检测
  13. 结婚戒指为什么要带在无名指上
  14. Android studio中todo的用法
  15. 模仿探探(百合网,珍爱网)卡片左右滑动效果,滑动流畅,卡片view无限重生
  16. MySQL50题-第6-10题
  17. Vue-cli 2.0使用淘宝镜像搭建总结
  18. 三星note20u计算机功能,三星Note20Ultra隐藏功能有哪些-有哪些使用技巧
  19. ChatGPT ,能替代程序员吗?
  20. avue设置表格显示图片

热门文章

  1. 医师计算机考试,医师资格考试机考-计算机作答的操作指导
  2. “沉迷单车的追风少年”的2021年年末总结
  3. Bitbucket安装配置
  4. table.render 中 cols 属性 【【问题】】
  5. opencv中 画六边形
  6. 检测网络是否正常(ping,Telnet,tracert以及tnsping)
  7. 三菱Q系列PLC数据采集随笔
  8. Latex中的参考文献写法
  9. 【工具】百度云破解版不用会员高速下载 分享
  10. 微信文章投诉模板html,微信小程序模板消息填坑