写在前面

所有功能演示

我们肯定做过这样的需求,给一个图片切圆角,
当然我们大多采用简单粗暴的方法
myIcon.layer.cornerRadius = 16.5
myIcon.layer.masksToBounds = true
如果是静态的页面也无关紧要,要是可以滑动的页面,
有很多需要裁剪的图片,那么就要考虑性能了。接下来的方法就是其中一种不错的方法,
此代码已经上传到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
欢迎查看[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
当然这只是这个库的功能的一小部分
想看更多功能,可以去github上下载,如果对您有帮助,希望您不吝给个star.
功能代码如下:

具体代码

1,采用UIBezierPath绘制路径的方法
let image = UIImage(named: imageName)
//开启上下文
UIGraphicsBeginImageContext((image?.size)!)
//设置一个圆形的裁剪区域
let path = UIBezierPath(ovalIn: CGRect(x: 0,
y: 0,
width: (image?.size.width)!,
height: (image?.size.height)!)) //把路径设置为裁剪区域(超出裁剪区域以外的内容会被自动裁剪掉)
path.addClip()
//把图片绘制到上下文当中
image?.draw(at: CGPoint.zero)
//从上下文当中生成一张图片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//关闭上下文
UIGraphicsEndImageContext()
newImage 就是我们需要的图片

可能你会怀疑性能,好,可以,我们放在子线程里进行,代码如下

DispatchQueue.global().async{
//将上述代码发放进去即可
let image = UIImage(named: imageName)
//开启上下文
UIGraphicsBeginImageContext((image?.size)!)
//设置一个圆形的裁剪区域
let path = UIBezierPath(ovalIn: CGRect(x: 0,
y: 0,
width: (image?.size.width)!,
height: (image?.size.height)!)) //把路径设置为裁剪区域(超出裁剪区域以外的内容会被自动裁剪掉)
path.addClip()
//把图片绘制到上下文当中
image?.draw(at: CGPoint.zero)
//从上下文当中生成一张图片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//关闭上下文
UIGraphicsEndImageContext()
DispatchQueue.main.async(execute: {
//拿到 newImage 到主线程更新UI
completed(newImage)
})
}

似乎已经完美的解决了这个问题,可是截取圆角固定的圆角该怎么办呢,继续往下看,代码如下

  /**
** 用异步绘图方式将图片进行任意圆角裁剪
- imageName --传头头像名称
- cornerRadius --传头头像名称
*/
public func tailoringImage(_ imageName: String,withRadius radius: CGFloat) -> UIImage? {
let image = UIImage(named: imageName)
if image == nil {
return UIImage()
}
//开启上下文
UIGraphicsBeginImageContext((image?.size)!)
//设置一个圆形的裁剪区域
let path = UIBezierPath(roundedRect: CGRect(x: 0,
y: 0,
width: (image?.size.width)!,
height: (image?.size.height)!), cornerRadius: radius) //把路径设置为裁剪区域(超出裁剪区域以外的内容会被自动裁剪掉)
path.addClip()
//把图片绘制到上下文当中
image?.draw(at: CGPoint.zero)
//从上下文当中生成一张图片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//关闭上下文
UIGraphicsEndImageContext()
return newImage
}

当然也可以在子线程中进行

/**
** 用异步绘图方式将图片进行任意圆角裁剪
- imageName --传头头像名称
- cornerRadius --要设置圆角的大小
- parameter completed: 异步完成回调(主线程回调)
*/
public func async_tailoringImage(_ imageName: String,withRadius radius: CGFloat,completed:@escaping (UIImage?) -> ()) -> Void {
DispatchQueue.global().async{
let newImage = self.tailoringImage(imageName, withRadius: radius)
DispatchQueue.main.async(execute: {
completed(newImage)
})
}
}
//当然你还不满意,因为产品一句:加上个边框吧,总有办法实现,不信,请看代码:

切圆角,加边框

/**
** 绘图方式将图片裁剪成圆角并添加边框
- imageName --传头头像名称
- borderWidth --边框大小
- borderColor --边框颜色
*/
public func tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ) -> UIImage? {
//1.先开启一个图片上下文 ,尺寸大小在原始图片基础上宽高都加上两倍边框宽度.
let imageSize = CGSize(width: image.size.width + width * 2 , height: image.size.height + width * 2)
UIGraphicsBeginImageContext(imageSize)
//2.填充一个圆形路径.这个圆形路径大小,和上下文尺寸大小一样.
//把大圆画到上下文当中.
let path = UIBezierPath(ovalIn: CGRect(x: 0,
y: 0,
width: imageSize.width,
height: imageSize.height))
//颜色设置
color.set()
//填充
path.fill()
//3.添加一个小圆,小圆,x,y从边框宽度位置开始添加,宽高和原始图片一样大小.把小圆设为裁剪区域.
let clipPath = UIBezierPath(ovalIn: CGRect(x: width, y: width, width: image.size.width, height: image.size.height))
//把小圆设为裁剪区域.
clipPath.addClip()
//4.把图片给绘制上去.
image.draw(at: CGPoint(x: width, y: width))
//5.从上下文当中生成一张图片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//6.关闭上下文
UIGraphicsEndImageContext()
return newImage
}
/**
** 异步绘图方式将图片裁剪成圆角并添加边框
- imageName --传头头像名称
- borderWidth --边框大小
- borderColor --边框颜色
- parameter completed: 异步完成回调(主线程回调)
*/
public func async_tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ,completed:@escaping (UIImage?) -> ()) -> Void {
DispatchQueue.global().async{
let newImage = self.tailoringImageLayer(image, borderWidth: width, borderColor: color)
DispatchQueue.main.async(execute: {
completed(newImage)
})
}
}

上图片

结束语

总算大功告成,此代码已经上传到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
[link](https://github.com/dudongge/DDGScreenShot)
当然这只是这个库的功能的一小部分
想看更多功能,可以去github上下载,如果对您有帮助,希望您不吝给个star.

欢迎查看DDGScreenShot

其余功能如下

  1. (一)DDGScreenShot — 复杂屏幕截屏(如view ScrollView webView wkwebView)
  2. (二)DDGScreenShot--iOS 图片处理--多图片拼接
  3. (三)DDGScreenShot--iOS 图片裁剪,切圆角,加边框,你还用cornerRadius,还有更高级的用法
  4. (四)DDGScreenShot—图片擦除功能
  5. (五)DDGScreenShot—截取图片的任意部分
  6. (六)DDGScreenShot —图片加各种滤镜高逼格操作
  7. (七)DDGScreenShot —图片加高斯模糊,老电影效果

DDGScreenShot--iOS 图片裁剪,切圆角,加边框,你还用cornerRadius,还有更高级的用法的更多相关文章

  1. iOS 图片裁剪方法

    iOS 图片裁剪方法 通过 CGImage 或 CIImage 裁剪 UIImage有cgImage和ciImage属性,分别可以获得CGImage和CIImage对象.CGImage和CIImage ...

  2. iOS 图片裁剪 + 旋转

    iOS 图片裁剪 + 旋转 之前分别介绍了图片裁剪和图片旋转方法 <iOS 图片裁剪方法> 地址:http://www.cnblogs.com/silence-cnblogs/p/6490 ...

  3. iOS开发Quzrtz2D 十:圆形图片的绘制以及加边框圆形图片的绘制

    一:圆形图片的绘制 @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *imageV; @en ...

  4. ios 图片的两种加载方式

    控件加载图片,plist,懒加载,序列帧动画,添加动画效果. IOS中有2种加载图片的方式. 方式一:有缓存(图片所占用的内存会一直停留在程序中) + (UIImage *)imageNamed:(N ...

  5. iOS 指定位置切圆角不生效问题

    如果是在VC中操作,需要在viewDidLayoutSubviews方法里 - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; ...

  6. IOS 图片阴影,圆角等处理

    一直以来,为IOS添加图片的特殊效果都是通过跟美工的配合,比如,要加阴影,就从美工那边获得一张阴影效果图,在界面上画两个UIImageView,将阴影放在下面,图像放上上面,错开一定角度.有比如想做圆 ...

  7. iOS 图片裁剪与修改

    最近做的项目中需要上传头像,发表内容的时候也要涉及到图片上传,我直接用的原图上传,但是由于公司网络差,原图太大,老是加载好久好久,所以需要把原图裁剪或者修改分辨率之后再上传,找了好久,做了很多尝试才解 ...

  8. ios中设置UIButton圆角,添加边框

    //例如: UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(50, ...

  9. iOS 图片9切

    UIImageView *svRect; UIImage *backgroundImage = [UIImage imageNamed:@"bg.png"]; background ...

随机推荐

  1. Cocos2D中屏幕分辨率解释

    Cocos2D的坐标(0,0)点在屏幕的左下角,然后x和y的坐标值像右上角逐渐增加. 因为项目一般是横屏(landscape)模式,这表示右上角坐标在3.5寸屏上为(480,320), 在4寸屏上为( ...

  2. 【一天一道LeetCode】#101. Symmetric Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  3. android开发技巧——仿新版QQ锁屏下弹窗

    新版的qq,可以在锁屏下弹窗显示qq消息,正好目前在做的项目也需要这一功能.经过各种试验和资料查找,终于实现,过程不难,但是却有一些地方需要注意. 下面是实现过程. 1.使用Activity,而不是V ...

  4. Android使用SimpleAdapter

    SimpleAdapter的使用步骤如下: 声明ListView,并进行初始化操作 准备数据集,一般用list来实现,当然也可以使用数组 为listview适配simpleadapter 如下代码: ...

  5. Java之美[从菜鸟到高手演变]之设计模式三

    本章是关于设计模式的最后一讲,会讲到第三种设计模式--行为型模式,共11种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模 ...

  6. 再回首UML之上篇

    UML,统一建模语言,是一种用来对真实世界物体进行建模的标准标记,这个建模的过程是开发面向对象设计方法的第一步,UML不是一种方法学,不需要任何正式的工作产品. UML提供多种类型的模型描述图,当在某 ...

  7. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

  8. MFC中使用SDL播放音频没有声音的解决方法

    本文所说的音频是指的纯音频,不包含视频的那种. 在控制台中使用SDL播放音频,一般情况下不会有问题. 但是在MFC中使用SDL播放音频的时候,会出现没有声音的情况.经过长时间探索,没有找到特别好的解决 ...

  9. J2EE进阶(一)随堂笔记

    进公司搞研发,基本上用的都是J2EE框架.若想在公司混个不错的地位,首先技术上必须过关.由于需求所致,自己学习了J2EE一段时间,主要是Struts2,MyBatis(Hibernate的前身),远远 ...

  10. LeetCode之“树”:Binary Tree Level Order Traversal && Binary Tree Level Order Traversal II

    Binary Tree Level Order Traversal 题目链接 题目要求: Given a binary tree, return the level order traversal o ...