脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → IOS实现圆形图片效果

IOS实现圆形图片效果的两种方法

 更新时间：2016年08月24日 09:17:46   作者：嘴角微寒  
这篇文章介绍在IOS中如何实现圆形图片，实现后的效果很赞，有需要的可以参考借鉴。

先来看看效果图 ↓


这个显示效果的做法有很多:

方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用imageView的cornerRadius来做圆, 具体代码如下:

backImageView.layer.cornerRadius = backImageView.frame.size.width / 2;
backImageView.layer.masksToBounds = YES;
frontImageView.layer.cornerRadius = frontImageView.frame.size.width / 2;
frontImageView.layer.masksToBounds = YES;

但是很显然, 今天的主角并不是上边的方法.上边的做法需要两张图片来完成带边框的圆形图片,而接下来要介绍的方法并不需要两张图片, 只需要一张图片就可以!

方法二: 使用图形上下文, 生成一张带有边框的圆形图片, 话不多说, 代码如下:

// borderWidth 表示边框的宽度
CGFloat imageW = image.size.width + 2 * borderWidth;
CGFloat imageH = imageW;
CGSize imageSize = CGSizeMake(imageW, imageH);
UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
// borderColor表示边框的颜色
[borderColor set];
CGFloat bigRadius = imageW * 0.5;
CGFloat centerX = bigRadius;
CGFloat centerY = bigRadius;
CGContextAddArc(context, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
CGContextFillPath(context);
CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(context, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
CGContextClip(context);
[image drawInRect:CGRectMake(borderWidth, borderWidth, image.frame.size.width, image.frame.size.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

接下来解释一下上边的代码

1、首先是原理: 画一个圆环, 宽度为borderWidth,然后将图片放入这个圆环中, 使其只显示圆环中的部分.

2、前三行代码: 得到带边框的图片的整体宽度和高度(因为要得到圆形图片, 所以需要宽和高相同), 同时得到一个CGSize对象留着后边用

3、代码:

UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

表示开启图形上下文, 我们来看一些头文件中的方法声明:

UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)

第一个参数需要填入一个CGSize对象, 也就是第三行的imageSize,表示绘制图形的范围

第二个参数的布尔值表示是否透明, 选择NO即可

If the opaque parameter is YES, the alpha channel is ignored and the bitmap is treated as fully opaque

第三个参数的scale是比例因子, 我们填入0.0, 表示是以屏幕的比例来计算

If you specify a value of 0.0, the scale factor is set to the scale factor of the device's main screen

4、代码:

CGContextRef context = UIGraphicsGetCurrentContext();

既然要使用上下文来绘制图片, 当然得获取当前的上下文对象了

5、代码:

[borderColor set];

先来看一下这个set的头文件注释

// Sets the fill and stroke colors in the current drawing context

给当前的上下文设置填充和描边的颜色, 说起填充色有没有想到画图软件中的填充 ?使用过PS的朋友应该很清楚.说白了这行代码的意思就是设置好颜色, 待会给圆环上色用...

6、代码:

CGFloat bigRadius = imageW * 0.5;
CGFloat centerX = bigRadius;
CGFloat centerY = bigRadius;
CGContextAddArc(context, centerX, centerY, bigRadius, 0, M_PI * 2, 0);

正常来讲画一个圆需要什么 ? 需要半径和圆心对不对

bigRadius 是带边框图片整体的绘制半径, 画圆需要半径, 这个就是!

centerX 和centerY 是圆心坐标的x和y

CGContextAddArc 这个方法表示给当前的上下文画一个圆弧, 我们来看下头文件的方法声明

void CGContextAddArc(CGContextRef cg_nullable c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)

参数比较多, 我分别列出来其表示的意义:

     @param c 上下文

     @param x 圆弧中心点的x

     @param y 圆弧中心点的y

     @param radius 圆弧的半径(bigRadius)

     @param startAngle 起始点的角度

     @param endAngle 结束点的角度 M_PI * 2表示一周

     @param clockwise 顺时针画圆弧填1 逆时针填0

7、代码:

CGContextFillPath(context);

填充当前上下文, 用什么填充 ? 当然是填充色! 到这里我们得到了一个半径为bigRadius, 颜色为填充色的圆形上下文

8、代码:

CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(context, centerX, centerY, smallRadius, 0, M_PI * 2, 0);

意义和 -代码6- 一样, 给当前的上下文(一个有颜色的圆)添加一个圆弧, 其中的smallRadius就是中间图片的半径

9、代码:

CGContextClip(context);

头文件是这么说的: Intersect the context's path with the current clip path and use the
resulting path as the clip path for subsequent rendering operations.

大意是将当前的上下文以当前的剪辑路径(代码8所画的圆弧)进行剪辑, 然后使用剪辑后的路径(代码8得到的圆弧)来进行后续的着色操作.

简单说就是使用 -代码7- 得到的圆形上下文中间的部分来进行后续的绘制...

10、代码:

[image drawInRect:CGRectMake(borderWidth, borderWidth, image.frame.size.width, image.frame.size.height)];

这个方法是将图片以给定的范围绘制到当前的图形上下文中, -代码9- 中已经得到了进行绘制操作的路径, 也就是说, 这张图只保留 -代码9- 中路径内的部分. 注意此时上下文已经变成了带边框的圆形图片了!

11、代码:

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

从当前上下文中得到图片并关闭图形上下文

到这里呢就算是结束了, 我们得到了一个带有边框的圆形图片, 从方法复杂性来说方法二比较复杂, 使用了图形上下文. 但是就得到圆形图片来说他们的意义不同.

方法一是用叠加的原理得到视觉上的带边框

方法二则完全生成了一张带边框的圆形图片

结束语

在日常开发中完成某项功能需要根据需求去决定如何实现, 同样的, 上边的两种方法也是, 如果想要一张自带边框的圆形图片使用方法二即可，以上就是本文的全部内容，希望对大家开发学习能有所帮助。

您可能感兴趣的文章:

相关文章

  • 详解iOS 多线程 锁 互斥 同步

    详解iOS 多线程 锁 互斥 同步

    在iOS中有几种方法来解决多线程访问同一个内存地址的互斥同步问题，本篇文章主要介绍了5中方法来解决问题，有兴趣的可以了解一下。
    2016-12-12
  • iOS UIPickerView的简单封装示例

    iOS UIPickerView的简单封装示例

    这篇文章主要给大家介绍了关于iOS UIPickerView的简单封装的相关资料，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • iOS10通知框架UserNotification理解与应用

    iOS10通知框架UserNotification理解与应用

    在iOS10系统中，通知被整合进了UserNotification框架，除了使通知的处理脱离了UIApplication，通知功能的相关开发更加结构化与模块化外，还新增开放了许多更加灵活的开发接口，现在，开发者可以为通知定义UI末班，添加媒体附件,需要的朋友可以参考下
    2016-09-09
  • iOS10 推送最新特性研究

    iOS10 推送最新特性研究

    这篇文章主要为大家详细研究了iOS10 推送的最新特性，推送内容更加丰富，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    这篇文章主要为大家详细介绍了iOS利用余弦函数实现卡片浏览工具，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 使用scrollTop(）解决IOS中输入法遮挡输入框问题

    使用scrollTop(）解决IOS中输入法遮挡输入框问题

    ios浏览器上输入法会弹出遮挡输入框问题，下面小编给大家分享scrollTop(）解决IOS中输入法遮挡输入框问题，一起看看吧
    2017-09-09
  • iOS如何将UIButton中的图片与文字上下对齐详解

    iOS如何将UIButton中的图片与文字上下对齐详解

    对于UIButton实现上显示图片,下显示文字这个需求估计各位iOS开发者们都不陌生，所以下面这篇文章主要给大家介绍了关于iOS如何将UIButton中图片与文字上下对齐的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-10-10
  • iOS实现侧拉栏抽屉效果

    iOS实现侧拉栏抽屉效果

    这篇文章主要为大家详细介绍了iOS实现侧拉栏抽屉效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 实例解析iOS开发中系统音效以及自定义音效的应用

    实例解析iOS开发中系统音效以及自定义音效的应用

    这篇文章主要介绍了iOS开发中系统音效以及自定义音效的应用,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-10-10
  • iOS 仿百度外卖-首页重力感应的实例

    iOS 仿百度外卖-首页重力感应的实例

    这篇文章主要介绍了iOS 仿百度外卖-首页重力感应的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01

最新评论