zoukankan      html  css  js  c++  java
  • 高效添加圆角效果

    高效添加圆角效果

    逻辑思路: 切换到工作线程利用CoreGraphic API生成一个offscreen UIImage,再切换到main thread赋值给UIImageView。这里还涉及到UIImageView复用,圆角头像cache缓存(不能每次都去绘制)

    设置圆角,最简单的情况下既没有 off-screen render,也没有降低帧数

    view.layer.cornerRadius = 5
    

    但是 cornerRadius 这个属性只会影响背景颜色和border,对于内部还有子视图控件就不会出现这样的效果了所以这时候需要:

    label.layer.cornerRadius = 5
    label.layer.masksToBounds = true	
    

    这时候就会出现离屏渲染了,当圆角视图较多时,就会使fps大幅度下降

    为 UIView 添加圆角

    利用 Core Graphics 自己画出了一个圆角矩形 UIImage。除了一些必要的代码外,最核心的就是 CGContextAddArcToPoint 函数。它中间的四个参数表示曲线的起点和终点坐标,最后一个参数表示半径。调用了四次函数后,就可以画出圆角矩形。最后再从当前的绘图上下文中获取图片并返回。

    func kt_drawRectWithRoundedCorner(radius radius: CGFloat,
                                  borderWidth: CGFloat,
                                  backgroundColor: UIColor,
                                  borderColor: UIColor) -> UIImage {    
    UIGraphicsBeginImageContextWithOptions(sizeToFit, false, UIScreen.mainScreen().scale)
    let context = UIGraphicsGetCurrentContext()
    
    CGContextMoveToPoint(context, 开始位置);  // 开始坐标右边开始
    CGContextAddArcToPoint(context, x1, y1, x2, y2, radius);  // 这种类型的代码重复四次
    
    CGContextDrawPath(UIGraphicsGetCurrentContext(), .FillStroke)
    let output = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return output
    }
    

    有了这个图片后,我们创建一个 UIImageView 并插入到视图层级的底部:

     extension UIView {
    func kt_addCorner(radius radius: CGFloat,
                      borderWidth: CGFloat,
                      backgroundColor: UIColor,
                      borderColor: UIColor) {
        let imageView = UIImageView(image: kt_drawRectWithRoundedCorner(radius: radius,
                                    borderWidth: borderWidth,
                                    backgroundColor: backgroundColor,
                                    borderColor: borderColor))
        self.insertSubview(imageView, atIndex: 0)
    }
    }	
    

    提醒

    无论使用上面哪种方法,你都需要小心使用背景颜色。因为此时我们没有设置 masksToBounds,因此超出圆角的部分依然会被显示。因此,你不应该再使用背景颜色,可以在绘制圆角矩形时设置填充颜色来达到类似效果。

    其他方法

    • 美工切图无法适用有背景图的场景
    • shouldRasterize也有cache实效问题

    原文链接:iOS 高效添加圆角效果实战讲解


  • 相关阅读:
    java中使用MD5加密的算法
    [转]自定义注释@interface的用法
    [转]Spring IOC详解
    [转]sed命令详解
    SimpleDateFormat线程不安全问题处理
    Unable to locate the Javac Compiler 解决办法
    MySQL ERROR 1045错误解决办法
    Python装饰器学习(九步入门)
    python 可变参数函数定义* args和**kwargs的用法
    如何更好的利用Node.js的性能极限
  • 原文地址:https://www.cnblogs.com/sunyanyan/p/5292308.html
Copyright © 2011-2022 走看看