Android自定义View_绘制菱形图片
一、 前言
在实际项目中,用户头像,音乐专辑都有可能用到圆形,菱形等无规则图像,需要自己自定义View实现相应的功能。
二、思路
需求:制作圆角菱形的图片
思路:
1、绘制出圆角矩形的遮罩层;
2、将矩形旋转45°;
3、使用画笔的PorterDuffXfermode的SRC_IN属性;
4、将图片绘制遮罩层上。
三、知识点PorterDuffXfermode
PorterDuffXfermode在网上有许多讲解它的文章,这里只讲解最常用的两种模式SRC_IN和DST_IN。
SRC_IN:【本文所用的模式】显示底层图像和上方图像的相交区域,且显示的是上方图像。如图所示,先绘制出黄色的底层图像,再绘制出蓝色的图像,设置的模式为SRC_IN,则显示的是两张图像相交的扇形区域,且为上层蓝色图像。
DST_IN:显示底层图像和上方图像的相交区域,且显示的是底层图像。如图所示,先绘制出黄色的底层图像,再绘制出蓝色的图像,设置的模式为DST_IN,则显示的是两张图像相交的扇形区域,且为底层黄色图像。
四、实现
1、根据图片的大小绘制出圆角矩形的遮罩层;
// 创建图片mImageBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.picture);
// 获取图片的宽高mWidth = mImageBitmap.getWidth();mHeight = mImageBitmap.getHeight();mMaskBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);Canvas maskCanvas = new Canvas(mMaskBitmap);mPaint = new Paint();mPaint.setColor(Color.YELLOW);mPaint.setAntiAlias(true);
// 画布先平移后旋转maskCanvas.translate(mWidth / 2, 0);maskCanvas.rotate(45);int rectSize = (int) (mWidth / 2 / Math.sin(Math.toRadians(45)));
// 绘制圆角矩形maskCanvas.drawRoundRect(0, 0, rectSize, rectSize, 50, 50, mPaint);
2、设置两张图像的显示模式为SRC_IN;
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
3、这里需要注意的是因为使用的是同一个画布Canvas,在绘制圆角矩形时已经将画布旋转45°并且平移,这里就需要将画布旋转平移回到初始状态,不然图片就会跟着旋转,就会如下图所示。
// 画布先旋转后平移,防止图片也跟着旋转maskCanvas.rotate(-45);maskCanvas.translate(-mWidth / 2, 0);
4、绘制上层图片
maskCanvas.drawBitmap(mImageBitmap, 0, 0, mPaint);
5、最后在onDraw方法中绘制出最后的图片;
@Overrideprotected void onDraw(Canvas canvas) {canvas.drawBitmap(getBitmap(), 0, 0, null);}
五、总结
设计无规则图形,方法大同小异,可使用PorterDuffXfermode的不同模式实现不同的效果。需要注意的是由于底层和上层的图像都是同一个Canvas绘制,绘制底层时已经改变了方向,后面绘制上层时需要回复到初始状态。另外也可以另写方法创建新的Canvas绘制上层图像,就不必恢复。
源码
public class CustomDiamondImage extends View {private Paint mPaint;private int mWidth;private int mHeight;private Bitmap mMaskBitmap;private Bitmap mImageBitmap;public CustomDiamondImage(Context context) {super(context);}public CustomDiamondImage(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawBitmap(getBitmap(), 0, 0, null);}private Bitmap getBitmap() {// 创建图片mImageBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.picture);
// 获取图片的宽高mWidth = mImageBitmap.getWidth();mHeight = mImageBitmap.getHeight();mMaskBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);Canvas maskCanvas = new Canvas(mMaskBitmap);mPaint = new Paint();mPaint.setColor(Color.YELLOW);mPaint.setAntiAlias(true);
// 画布先平移后旋转maskCanvas.translate(mWidth / 2, 0);maskCanvas.rotate(45);int rectSize = (int) (mWidth / 2 / Math.sin(Math.toRadians(45)));
// 绘制圆角矩形maskCanvas.drawRoundRect(0, 0, rectSize, rectSize, 50, 50, mPaint);
// 设置混合显示模式为SRC_INmPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
// 画布先旋转后平移,防止图片也跟着旋转maskCanvas.rotate(-45);maskCanvas.translate(-mWidth / 2, 0);maskCanvas.drawBitmap(mImageBitmap, 0, 0, mPaint);return mMaskBitmap;}
}
欢迎扫码关注公众号:小猿说
Android自定义View_绘制菱形图片相关推荐
- Android自定义相机拍照、图片裁剪的实现
原文:Android自定义相机拍照.图片裁剪的实现 最近项目里面又要加一个拍照搜题的功能,也就是用户对着不会做的题目拍一张照片,将照片的文字使用ocr识别出来,再调用题库搜索接口搜索出来展示给用户,类 ...
- Android自定义View绘制闹钟
Android自定义View绘制闹钟 本文简单实现了一个闹钟,扩展View,Canvas绘制 效果如下: 代码如下: package com.gaofeng.mobile.clock_demo;imp ...
- Android 自定义View 圆形圆角图片
[Android 自定义View 圆形圆角图片] 基于Xfermode 实现 1.概述 在很久以前也写过一个利用Xfermode 实现圆形.圆角图片的(Android 完美实现图片圆角和圆形(对实现进 ...
- Android 自定义拍照,解决图片旋转,拍照参数设置兼容问题
Android 自定义拍照,解决图片旋转,拍照参数设置兼容问题 参考文章: (1)Android 自定义拍照,解决图片旋转,拍照参数设置兼容问题 (2)https://www.cnblogs.com/ ...
- android自定义弧度按钮,Android 自定义View 绘制六边形设置按钮
今天逛酷安的时候,发现酷安的设置按钮(截图的右上角),是一个六边形 + 中心圆的图标,所以又是一个自定义View练习对象了.画圆很简单,知道半径即可,而重点就在画出六边形. 酷安截图.png 最终效果 ...
- Android自定义动态布局 — 多图片上传
Android自定义动态布局 - 多图片上传 本文介绍Android中动态布局添加图片,多图片上传. 项目中效果图: 技术点: 1.动态添加格局中的线条和添加图片的+号 2.多张图片异步上传 首 ...
- android 六棱形分析图,Android自定义View_菱形图片
自定义菱形图片.png 前言 在实际项目中,用户头像,音乐专辑都有可能用到圆形,菱形等无规则图像,需要自己自定义View实现相应的功能. 思路 需求:制作圆角菱形的图片 思路: 1.绘制出圆角矩形的遮 ...
- Android --- 自定义ImageView 实现圆形图片
自定义ImageView实现圆形图片,主要是在onDraw()方法中实现绘制圆形图片,在onMeasure()中测量圆形的半径并设置View的宽高.效果如下图 代码如下 public class Ci ...
- Android自定义View绘制流程
Android视图层次结构简介 在介绍View绘制流程之前,咱们先简单介绍一下Android视图层次结构以及DecorView,因为View的绘制流程的入口和DecorView有着密切的联系. 我们平 ...
- android 自定义View绘制电池电量(电池内带数字显示)
最新公司需要一个电池内带数字的显示电池电量需求,百度了一下.参考下面这篇文章写的Android自定义View之电池电量显示. 增加了里面电池电量数字显示,还有就是一个屏幕适配.不管屏幕分辨率基本都能适 ...
最新文章
- pythonweb服务器部署iis_Python开发入门与实战15-IIS部署
- 字体大小的设置_老年人用智能手机,怎样更改字体大小?3种方法,手把手教您学会...
- 浅谈Lucene中的DocValues
- 学习笔记99—word 如何增加底纹
- 区块链,使用 Go-Ethereum 搭建以太坊私有链
- 数据集 | 计算机视觉开源数据集(计算机视觉图像、定位、识别)
- OpenStack开发学习笔记01
- Hibernate4实战 之 第一部分 Hibernate入门
- 力扣1103.分糖果
- ospf避免环路_【HCIERamp;S面试】之OSPF四种特殊区域
- 将视图状态存入数据库(3)
- Hyperledger Fabric教程(14)--动态添加组织的步骤
- 实战制作U盘工具去除XP系统管理员密码
- php json输出后 u6563,肉肉's Blog
- 7个黑科技搜索网站,啥都能搜到!
- onkeyup+onafterpaste
- 正在保存备份的驱动器与启动计算机,如何创建和使用Dell Recovery Restore USB驱动器...
- MySQL必知必会,我的MySql复习宝典
- hadoop2.x学习01
- 王者苹果服务器转安卓系统,王者荣耀苹果用户可以转?王者荣耀苹果用户转安卓的方法教程...
热门文章
- 搬寝室 ----- 动态规划
- 未来十年最紧缺的职业
- (转置矩阵)将一个3x3、4x4矩阵转置后输出
- 树莓派4B:智能植物管家
- [机缘参悟-62]:《兵者,诡道也》-3-三十六计解读-敌战计
- [CVPR2021]pi-GAN: Periodic Implicit Generative Adversarial Networks for 3D-Aware Image Synthesis
- java 计算间隔天数,java 计算间隔的天数
- 如何在百度地图上标注宾馆饭店(矢量点标注)并导出为图片
- 添加用户并赋予 root管理员权限
- css内容超过宽度显示省略号没效果,文字超过两行折叠省略