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 高效添加圆角效果实战讲解


  • 相关阅读:
    Eclipse 软件 Java 解决:出现的editor does not contain a main type错误框 问题
    Oracle SQL高级编程——分析函数(窗口函数)全面讲解
    瑞联科技:Pwp3框架 调用存储过程返还数据集合 到前端界面展示
    spring jdbctemplate调用存储过程,返回list对象
    利用jquery操作Radio方法小结
    Oracle临时表
    JdbcUtil
    整理oracle 树形查询
    Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
    Java对象之间的深度复制拷贝
  • 原文地址:https://www.cnblogs.com/sunyanyan/p/5292308.html
Copyright © 2011-2022 走看看