如何在UIImageView底部应用曲线？

我想掩盖并在图像视图的底部添加一些曲线。 我试过下面的代码。

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

Answer 1

这将帮助您解决问题

 extension UIImageView{ var roundedImage: UIImageView { let maskLayer = CAShapeLayer(layer: self.layer) let bezierPath = UIBezierPath() bezierPath.move(to: CGPoint(x:0, y:0)) bezierPath.addLine(to: CGPoint(x:self.bounds.size.width, y:0)) bezierPath.addLine(to: CGPoint(x:self.bounds.size.width, y:self.bounds.size.height)) bezierPath.addQuadCurve(to: CGPoint(x:0, y:self.bounds.size.height), controlPoint: CGPoint(x:self.bounds.size.width/2, y:self.bounds.size.height-self.bounds.size.height*0.3)) bezierPath.addLine(to: CGPoint(x:0, y:0)) bezierPath.close() maskLayer.path = bezierPath.cgPath maskLayer.frame = self.bounds maskLayer.masksToBounds = true self.layer.mask = maskLayer return self } } 

结果

Answer 2

正如我在评论中所说，你需要让你自己的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结果curvedPercent = 0.9

UPDATE

对于倒置曲线，用这个替换原始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 } 

结果