我想在图像视图的底部遮罩并添加一些曲线。我尝试过下面的代码。
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 放在这里。
让我知道如何在 swift 中显示 UIImageView 就像上面的屏幕截图一样。
我发现一些在 android 中使用完整的东西,但在 iOS 中却没有。
正如我在评论中所说,您需要制作自己的
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
}
}
}
故事板结果按原样可设计
对于任何类型的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
}
结果
这将帮助您解决您的问题
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
}
}
结果