ios - 如何在UIImageView底部应用Curve？

我想 mask 并在图像 View 的底部添加一些曲线。我尝试下面的代码。

extension UIImage{
    var roundedImage: UIImage {
        let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.size)
        UIGraphicsBeginImageContextWithOptions(self.size, false, 1)
        UIBezierPath(
            roundedRect: rect,
            cornerRadius: self.size.height
            ).addClip()
        self.draw(in: rect)
        return UIGraphicsGetImageFromCurrentImageContext()!
    }
  }

但是没有成功。
让我在此处显示要在屏幕上显示的UI。


让我知道如何像上面的屏幕快照一样快速显示UIImageView。

我在android中发现了一些功能，但在iOS中却没有。

连结:Crescento View

最佳答案

正如我在评论中说的，您需要制作自己的UIBezierPath，在路径的底部添加一条四边形曲线，curvedPercent将是曲线的发音，您可以根据需要进行调整
自定义UIImageView类

@IBDesignable
class CurvedUIImageView: UIImageView {

    private func pathCurvedForView(givenView: UIView, curvedPercent:CGFloat) ->UIBezierPath
    {
        let arrowPath = UIBezierPath()
        arrowPath.move(to: CGPoint(x:0, y:0))
        arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:0))
        arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:givenView.bounds.size.height))
        arrowPath.addQuadCurve(to: CGPoint(x:0, y:givenView.bounds.size.height), controlPoint: CGPoint(x:givenView.bounds.size.width/2, y:givenView.bounds.size.height-givenView.bounds.size.height*curvedPercent))
        arrowPath.addLine(to: CGPoint(x:0, y:0))
        arrowPath.close()

        return arrowPath
    }

    @IBInspectable var curvedPercent : CGFloat = 0{
        didSet{
            guard curvedPercent <= 1 && curvedPercent >= 0 else{
                return
            }

            let shapeLayer = CAShapeLayer(layer: self.layer)
            shapeLayer.path = self.pathCurvedForView(givenView: self,curvedPercent: curvedPercent).cgPath
            shapeLayer.frame = self.bounds
            shapeLayer.masksToBounds = true
            self.layer.mask = shapeLayer
        }
    }

}

在 Storyboard 中的结果是可设计的



对于任何一种 View ，都添加了curvedPercent参数

func pathCurvedForView(givenView: UIView, curvedPercent:CGFloat) ->UIBezierPath
    {
        let arrowPath = UIBezierPath()
        arrowPath.move(to: CGPoint(x:0, y:0))
        arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:0))
        arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:givenView.bounds.size.height))
        arrowPath.addQuadCurve(to: CGPoint(x:0, y:givenView.bounds.size.height), controlPoint: CGPoint(x:givenView.bounds.size.width/2, y:givenView.bounds.size.height-givenView.bounds.size.height*curvedPercent))
        arrowPath.addLine(to: CGPoint(x:0, y:0))
        arrowPath.close()

        return arrowPath
    }

func applyCurvedPath(givenView: UIView,curvedPercent:CGFloat) {
    guard curvedPercent <= 1 && curvedPercent >= 0 else{
        return
    }

    let shapeLayer = CAShapeLayer(layer: givenView.layer)
    shapeLayer.path = self.pathCurvedForView(givenView: givenView,curvedPercent: curvedPercent).cgPath
    shapeLayer.frame = givenView.bounds
    shapeLayer.masksToBounds = true
    givenView.layer.mask = shapeLayer
}

如何使用？

self.applyCurvedPath(givenView: self.customView,curvedPercent: 0.5)

的结果curvedPercent = 0.5

的结果curvedPercent = 0.1

的结果curvedPercent = 0.9

更新
对于倒转曲线，用此方法替换原始的pathCurvedForView方法

func pathCurvedForView(givenView: UIView, curvedPercent:CGFloat) ->UIBezierPath
{
    let arrowPath = UIBezierPath()
    arrowPath.move(to: CGPoint(x:0, y:0))
    arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:0))
    arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:givenView.bounds.size.height - (givenView.bounds.size.height*curvedPercent)))
    arrowPath.addQuadCurve(to: CGPoint(x:0, y:givenView.bounds.size.height - (givenView.bounds.size.height*curvedPercent)), controlPoint: CGPoint(x:givenView.bounds.size.width/2, y:givenView.bounds.size.height))
    arrowPath.addLine(to: CGPoint(x:0, y:0))
    arrowPath.close()

    return arrowPath
}

结果