美文网首页iOS开发你需要知道的iOS
iOS - 镂空、裁剪效果实现

iOS - 镂空、裁剪效果实现

作者: ienos | 来源:发表于2021-06-26 08:22 被阅读0次

    裁剪部分区域

    利用 mask view 实现,遮罩层实现

    裁剪
    • UIView 实现
            // img_w: 原始图片宽度
            // img_h: 原始图片高度
            let cutView = UIView.init(frame: CGRect.init(x: 0,
                                                         y: 0,
                                                         width: img_w * 0.5,
                                                         height: img_h * 0.5))
            // 这里需要有一个颜色,不能为透明
            cutView.backgroundColor = .red
            imageView.mask = cutView
    
    • CALayer 实现
            // img_w: 原始图片宽度
            // img_h: 原始图片高度
            let cutView = CALayer.init()
            cutView.frame = CGRect.init(x: 0,
                                                         y: 0,
                                                         width: img_w * 0.5,
                                                         height: img_h * 0.5)
            cutView.backgroundColor = UIColor.red.cgColor
            imageView.layer.mask = cutView
    

    镂空部分区域

    使用 CAShapeLayer 实现

    镂空
    
            let shapeLayer = CAShapeLayer.init()
    
            // maskPath: 为黑色方形蒙版路径
            // hollowOutPath: 为黑色蒙版中间镂空的圆形路径
            let shapeLayer = CAShapeLayer.init()
            let maskPath = UIBezierPath.init(rect: CGRect.init(x: 20, y: 20, width: img_w - 40, height: img_h - 40))
            let hollowOutPath = UIBezierPath.init(arcCenter: CGPoint.init(x: img_w * 0.5, y: img_h * 0.5),
                                               radius: img_w * 0.5 * 0.5 * 0.5,
                                               startAngle: 0,
                                               endAngle: 2 * CGFloat(Double.pi),
                                               clockwise: true)
            maskPath.append(hollowOutPath)
    
            maskPath.usesEvenOddFillRule = true
            shapeLayer.fillRule = .evenOdd
            // 蒙版的颜色
            shapeLayer.fillColor = UIColor.black.withAlphaComponent(0.6).cgColor
            shapeLayer.path = maskPath.cgPath
    
            let maskView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: img_w, height: img_h))
            maskView.layer.addSublayer(shapeLayer)
    
            imageView.addSubview(maskView)
    
    

    相关文章

      网友评论

        本文标题:iOS - 镂空、裁剪效果实现

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