UIImage编辑-生成圆角图

2024-02-08 05:20
文章标签 生成 编辑 圆角 uiimage

本文主要是介绍UIImage编辑-生成圆角图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

iOS 图片的底层编辑framework还是很强大的,CoreGraphics。

实际中的应用案例:圆形的用户头像

一般头像是用UIImageView来显示

一种很古老的圆角方法为

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];imageView.image = [UIImage imageNamed:@"123"];imageView.layer.cornerRadius = imageView.frame.size.width/2.0;imageView.layer.masksToBounds = YES;

其实很多人指出来了,这种方法会降低系统性能,触发离屏渲染。

其实,可以直接对image进行操作,将image切出圆角,然后传给imageView。

这里就涉及到对图片的操作。

首先创建一个图片画布,UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale);
size为你最终需要的图片大小,第二个参数是表示是否透明。第三个参数比较特殊,缩放因子,这个需要注意,因为他的设置可能会影响到后面的图片质量。

其实还有一种默认的画布创建方法,UIGraphicsBeginImageContext(),等同于 UIGraphicsBeginImageContextWithOptions(size, NO, 1.0)。
如果在这个画布上对图片进行缩放操作,会导致缩小的图片变的更加模糊。问题就出在scale上。因为scale是1.0,而retina屏幕的像素肯定不是一倍像素,所以我们需要手动处理scale,用 UIGraphicsBeginImageContextWithOptions(size, NO, 0.0)这个方法去作图。0.0的意思就是自动调整缩放因子以适配显示屏,无论是Retina屏,还是普通屏,都可以清晰呈现。

创建好画布后,需要在画布上画出圆形的轨迹,用于剪切将要处理的图片。用Bezier曲线在画布上创建一个最大的内切圆轨迹。

    UIBezierPath *cornerPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0,0,size.width,size.height) byRoundingCorners:rectCornerType cornerRadii:cornerRadii];

或者

CGRect rect = CGRectMake(0, 0, size.width, size.height);UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];

然后需要根据path来clip

    [path addClip];

UIBezierPath中的addClip功能:

This method modifies the visible drawing area of the current graphics context. After calling it, subsequent drawing operations result in rendered content only if they occur within the fill area of the specified path.

简单的说,就是一个path调用addClip之后,它所在的context的可见区域就变成了它的“fill area”,接下来的绘制,如果在这个区域外都会被无视。

最后在画布上把待处理的image画上去

[self drawInRect:CGRectMake(0, 0,size.width, size.height)];

相当于把我们之前制作好的圆形path“模具”在image上切除圆形图片。

最后从画布上取出处理后的image

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

关闭画布

    UIGraphicsEndImageContext();

当然,这样处理图片的前提是,他是正方形。

如果是非正方形,比如矩形之类的。我们裁取矩形内最大的正方形的内切圆。这话比较拗口,就是先取矩形内最大的正方形,然后取这个正方形中最大的内切圆。

这个时候就需要做些位置上的调整。

首先,因为我们需要的是圆形头像,所以画布还是正方形的。这个时候如果矩形的图片画在画布上,会有部分伸出画布的区域。伸出的部分我们不需要,不用管。

draw image的时候就需要注意了,在哪个位置画。例如图片的长度大于宽度的时候,为了保证切到图片的正中央,原来的图片draw的坐标为(0,0),这时候需要将图片往左移动(-n,0),n为画布的长度减去图片长度然后除以2。

打个比方,圆形的Bezier曲线path是一个圆形的铁框,然后要剪切的图片为一块豆腐,豆腐长度比铁框半径大,所以需要把豆腐往作移动,然后往下一按,再取出铁框里的圆形豆腐,就是我们需要的结果。→_→

剪切示例图

这篇关于UIImage编辑-生成圆角图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/690017

相关文章

nginx生成自签名SSL证书配置HTTPS的实现

《nginx生成自签名SSL证书配置HTTPS的实现》本文主要介绍在Nginx中生成自签名SSL证书并配置HTTPS,包括安装Nginx、创建证书、配置证书以及测试访问,具有一定的参考价值,感兴趣的可... 目录一、安装nginx二、创建证书三、配置证书并验证四、测试一、安装nginxnginx必须有"-

Java实战之利用POI生成Excel图表

《Java实战之利用POI生成Excel图表》ApachePOI是Java生态中处理Office文档的核心工具,这篇文章主要为大家详细介绍了如何在Excel中创建折线图,柱状图,饼图等常见图表,需要的... 目录一、环境配置与依赖管理二、数据源准备与工作表构建三、图表生成核心步骤1. 折线图(Line Ch

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

Java使用POI-TL和JFreeChart动态生成Word报告

《Java使用POI-TL和JFreeChart动态生成Word报告》本文介绍了使用POI-TL和JFreeChart生成包含动态数据和图表的Word报告的方法,并分享了实际开发中的踩坑经验,通过代码... 目录前言一、需求背景二、方案分析三、 POI-TL + JFreeChart 实现3.1 Maven

MybatisGenerator文件生成不出对应文件的问题

《MybatisGenerator文件生成不出对应文件的问题》本文介绍了使用MybatisGenerator生成文件时遇到的问题及解决方法,主要步骤包括检查目标表是否存在、是否能连接到数据库、配置生成... 目录MyBATisGenerator 文件生成不出对应文件先在项目结构里引入“targetProje

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log

Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南

《Python使用Pandas库将Excel数据叠加生成新DataFrame的操作指南》在日常数据处理工作中,我们经常需要将不同Excel文档中的数据整合到一个新的DataFrame中,以便进行进一步... 目录一、准备工作二、读取Excel文件三、数据叠加四、处理重复数据(可选)五、保存新DataFram

SpringBoot生成和操作PDF的代码详解

《SpringBoot生成和操作PDF的代码详解》本文主要介绍了在SpringBoot项目下,通过代码和操作步骤,详细的介绍了如何操作PDF,希望可以帮助到准备通过JAVA操作PDF的你,项目框架用的... 目录本文简介PDF文件简介代码实现PDF操作基于PDF模板生成,并下载完全基于代码生成,并保存合并P

详解Java中如何使用JFreeChart生成甘特图

《详解Java中如何使用JFreeChart生成甘特图》甘特图是一种流行的项目管理工具,用于显示项目的进度和任务分配,在Java开发中,JFreeChart是一个强大的开源图表库,能够生成各种类型的图... 目录引言一、JFreeChart简介二、准备工作三、创建甘特图1. 定义数据集2. 创建甘特图3.