美文网首页
设置圆角

设置圆角

作者: _狸约约 | 来源:发表于2018-08-13 12:21 被阅读0次

    最常用的设置圆角的方法:

    view.layer.cornerRadius = 5
    view.layer.masksToBounds = true
    

    但是masksToBounds这个属性会造成离屏渲染,这个属性才是帧数下降的罪魁祸首。

    如果想简便的话可以设置

    view.layer.shouldRasterize=true
    

    这个属性可以为圆角设置缓存,但是设置缓存也是需要时间的,如果有大量的大小不一的圆形视图出现,这样做依然会出现掉帧。

    下面提供两种思路解决当页面上需要设置的视图较多时的解决方案:
    一、通过绘制方法,将view的背景图片重新去掉圆角绘制一遍
    1.UIView。注:(该方法只返回UIView类型,其他类型会出问题)

    extension UIView {
        func circleView(cornerRadius: CGFloat) -> UIView? {
            // 开始图形上下文
            UIGraphicsBeginImageContextWithOptions(self.frame.size, false, 0)
            if let context = UIGraphicsGetCurrentContext() {
                let rect = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)
                var path: UIBezierPath
                if let color = self.backgroundColor {
                    CGContextSetLineWidth(context, 1)
                    CGContextSetFillColorWithColor(context, color.CGColor)
                    CGContextSetStrokeColorWithColor(context, color.CGColor)
                }
                
                if self.frame.size.width == self.frame.size.height {
                    if cornerRadius == self.frame.size.width/2 {
                        path = UIBezierPath(arcCenter: self.center, radius: cornerRadius, startAngle: 0, endAngle: 2.0*CGFloat(M_PI), clockwise: true)
                    }else {
                        path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
                    }
                }else {
                    path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
                }
                self.drawRect(rect)
                CGContextAddPath(context, path.CGPath)
                CGContextDrawPath(context, .FillStroke)
                CGContextClip(context)
                // 从上下文上获取剪裁后的照片
                guard let uncompressedImage = UIGraphicsGetImageFromCurrentImageContext() else {
                    UIGraphicsEndImageContext()
                    return nil
                }
                // 关闭上下文
                UIGraphicsEndImageContext()
                let view = UIView()
                view.backgroundColor = UIColor.clearColor()
                view.frame = self.frame
                view.addSubview(UIImageView(image: uncompressedImage))
                return view
            }else {
                return nil
            }
        }
    }
    

    2、UIImage(常用方法)

    extension UIImage {
        func circleImage(cornerRadius: CGFloat, size: CGSize) -> UIImage? {
            let rect = CGRectMake(0, 0, size.width, size.height)
            UIGraphicsBeginImageContextWithOptions(size, false, 0)
            if let context = UIGraphicsGetCurrentContext() {
                var path: UIBezierPath
                if size.height == size.width {
                    if cornerRadius == size.width/2 {
                        path = UIBezierPath(arcCenter: CGPointMake(size.width/2, size.height/2), radius: cornerRadius, startAngle: 0, endAngle: 2.0*CGFloat(M_PI), clockwise: true)
                    }else {
                        path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
                    }
                }else {
                    path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
                }
                CGContextAddPath(context, path.CGPath)
                CGContextClip(context)
                self.drawInRect(rect)
                // 从上下文上获取剪裁后的照片
                guard let uncompressedImage = UIGraphicsGetImageFromCurrentImageContext() else {
                    UIGraphicsEndImageContext()
                    return nil
                }
                // 关闭上下文
                UIGraphicsEndImageContext()
                return uncompressedImage
            }else {
                return nil
            }
        }
    }
    

    二、通过设置layer,可以设置切割哪个角,且设置边框

    let path = UIBezierPath.init(roundedRect: self.myLabel.bounds, byRoundingCorners: [.topRight , .bottomRight] , cornerRadii: self.myLabel.bounds.size);
    let layer = CAShapeLayer.init();
    layer.path = path.cgPath;
    layer.lineWidth = 5;
    layer.lineCap = kCALineCapSquare;
    layer.strokeColor = UIColor.red.cgColor;
    //  注意直接填充layer的颜色,不需要设置控件view的backgroundColor
    layer.fillColor = UIColor.yellow.cgColor;
    myLabel.layer.addSublayer(layer);
    

    相关文章

      网友评论

          本文标题:设置圆角

          本文链接:https://www.haomeiwen.com/subject/ipbybftx.html