XZ_iOS之异步裁切绘制圆角图形

最新推荐文章于 2024-07-10 13:59:55 发布

原创最新推荐文章于 2024-07-10 13:59:55 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#异步裁切绘制圆角图形 #性能优化 #贝塞尔曲线 #cornerRadius #block回调

iOS 专栏收录该内容

165 篇文章

订阅专栏

本文介绍iOS中使用异步裁切绘制圆角图的方法，避免因频繁重绘导致的性能问题。并提供Objective-C和Swift两种语言的具体实现。

之所以要异步裁切绘制圆角图形，是因为系统的 ‘layer.cornerRadius’方法十分的耗性能

tableView的性能优化

不要动态的修改’cornerRadius’之类图层渲染相关的属性，因为CornerRadius 耗性能，而tableView是从缓冲池中获取的可重用的cell，然后设置模型，如果在tableView的cell中设置圆角图层属性，在界面上会不断的重绘，例如，给cell中的图片设置圆角要使用贝塞尔曲线进行裁切绘制；

使用颜色不能带alpha透明度，使用透明度颜色会严重影响性能！

iOS中画图跟油画一样，前面的图会把后面的部分遮挡住，这是不透明的颜色，如果我们设置透明颜色，透明度一改，会把后面的图片透出来，比如，我们先画一个灰色的矩形，然后再在灰色的上面盖一层黄色的圈，我们改了黄色图片的透明度，会把后面的灰色背景透出来，透出来之后，在整个屏幕绘制的过程中，要先把灰色的部分画出来，然后要计算它跟这个圆的叠加的面积有多大，然后再根据黄色的颜色的透明度来计算灰色的颜色叠加了黄色的颜色，带多少透明度的产生的一个值，性能会降低。

在开发过程中，我们可以使用模拟器的混合模式来判断程序执行的性能：

点击模拟器 - Debug - Color Blended Layers 打开混合模式，在这个模式下，模拟器上如果出现红色覆盖，除了UILabel之外，我们可以不管，其他的能够处理掉的都要想办法进行处理；

因为UILabel的内部封装的东西，性能非常的不好，但是不用它又不行。UILabel的性能是非常糟糕的。模拟器中的混合模式，出现红色覆盖，说明是做过透明处理的！

如下图所以，我们使用下列代码设置圆角的话，会降低性能，所以，我们使用异步裁切来绘制圆角图形

imageV.layer.masksToBounds = YES;

imageV.layer.cornerRadius = imageV.bounds.size.width * 0.5;

代码实现

UIImage+XZExtension.h

#import<UIKit/UIKit.h>

@interface UIImage (XZExtension)

/**

*根据当前图像，和指定的尺寸，生成圆角图像并且返回

* @return圆角图像

- (void)xz_cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor completed:(void (^)(UIImage *image))completed;

@end

UIImage+XZExtension.m

#import"UIImage+XZExtension.h"

@implementation UIImage (XZExtension)

/**

*根据当前图像，和指定的尺寸，生成圆角图像并且返回

* @return圆角图像

- (void)xz_cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor completed:(void (^)(UIImage *image))completed {

dispatch_async(dispatch_get_global_queue(0,0), ^{

//看程序执行耗时

NSTimeInterval start =CACurrentMediaTime();

// 1.利用绘图，建立上下文

UIGraphicsBeginImageContextWithOptions(size,YES,0);

CGRect rect =CGRectMake(0,0, size.width, size.height);

// 2.设置被裁切的部分的填充颜色

[fillColorsetFill];

UIRectFill(rect);

// 3.利用贝塞尔路径实现裁切效果

UIBezierPath *path = [UIBezierPathbezierPathWithOvalInRect:rect];

[pathaddClip];

// 4.绘制图像

[selfdrawInRect:rect];

// 5.取得结果

UIImage *result =UIGraphicsGetImageFromCurrentImageContext();

// 6.关闭上下文

UIGraphicsEndImageContext();

NSLog(@"耗时：%f",CACurrentMediaTime() - start);

// 7.使用回调，返回结果

dispatch_async(dispatch_get_main_queue(), ^{

if (completed) {

completed(result);

}

});

}

重点总结：

/**

// 1.设置被裁切的部分的填充颜色

[fillColor setFill];

UIRectFill(rect);

如果不设置的话，被裁切的部分是黑色的；

// 2.使用CACurrentMediaTime()方法查看程序的耗时,打印结果 ==== 耗时：0.013411

百分之一秒，程序执行东西的时候应该按纳秒来计算，CPU执行程序应该按纳秒来计算，干一个活就占了百分之一秒，一秒能干好多好多程序呢，所以还是挺浪费时间的，

在主线程中挺浪费时间的，所以，把耗时的操作放在子线程中。

// 3.如何回调？block。iOS开发中，block最多的用途就是在异步执行完成之后，通过参数回调通知调用方法结果！

Swift 代码实现

/// 将给定的图像进行拉伸，并且返回'新'的图像
    ///
    /// - Parameters:
    ///   - size:      指定大小
    ///   - fillColor: 填充颜色
    /// - Returns:     UIImage
    func xz_cornerImage(size: CGSize?, fillColor: UIColor = .white, lineColor: UIColor = .lightGray) -> UIImage? {
        // 看程序执行耗时
        let start: TimeInterval = CACurrentMediaTime()
        
        var size = size
        
        if size == nil || size?.width == 0 {
            size = CGSize(width: 34, height: 34)
        }
            
        let rect = CGRect(origin: CGPoint(), size: size!)
            
        // 1.利用绘图，建立上下文 - 内存中开辟一个地址，跟屏幕无关!
        /**
        参数：
            1> size: 绘图的尺寸
            2> 不透明：false / true
            3> scale：屏幕分辨率，生成的图片默认使用 1.0 的分辨率，图像质量不好;可以指定 0 ，会选择当前设备的屏幕分辨率
        */
        UIGraphicsBeginImageContextWithOptions(rect.size, true, 0)
            
        // 2.设置被裁切的部分的填充颜色
        fillColor.setFill()
        UIRectFill(rect)
        
        // 3.利用 贝塞尔路径 实现 裁切 效果
        // 1>实例化一个圆形的路径
        let path = UIBezierPath.init(ovalIn: rect)
        // 2>进行路径裁切 - 后续的绘图，都会出现在圆形路径内部，外部的全部干掉
        path.addClip()
        
        // 4.绘图 drawInRect 就是在指定区域内拉伸屏幕
        draw(in: rect)
    
        // 5.绘制内切的圆形
        let ovalPath = UIBezierPath.init(ovalIn: rect)
        ovalPath.lineWidth = 2
        lineColor.setStroke()
        ovalPath.stroke()
//        UIColor.darkGray.setStroke()
//        path.lineWidth = 2
//        path.stroke()
        
        // 6.取得结果
        let result = UIGraphicsGetImageFromCurrentImageContext()
        
        // 7.关闭上下文
        UIGraphicsEndImageContext()
        
        // 8.返回结果
        return result
        // FIXME: 查看是否耗时
        print("耗时 - \(CACurrentMediaTime() - start)")
        
        }