[英]How to apply Curve at bottom of UIImageView?
I want to mask and add some curve at bottom of image view. 我想掩盖并在图像视图的底部添加一些曲线。 i have try below code . 我试过下面的代码。
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()!
}
}
But not getting success. 但没有成功。 Let me put UI here that i want to show in screen. 让我把UI放在这里,我想在屏幕上显示。
Let me know how to show UIImageView Like above screen shots in swift. 让我知道如何显示UIImageView像上面的快照屏幕截图。
I have found some use full thing in android but not in iOS. 我发现在android中有一些使用完整的东西但在iOS中没有。
Link : Crescento View 链接: Crescento View
As I said in my comment you need to make your own UIBezierPath
adding a quad curve in the bottom part of your path, the curvedPercent
will be how pronounced your curve will be, you can adjust it as you need it 正如我在评论中所说,你需要让你自己的UIBezierPath
在路径的底部添加一条四边形曲线, curvedPercent
将是你的曲线有多明显,你可以根据需要调整它
Custom UIImageView class 自定义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
}
}
}
Result in Storyboard as is Designable 在Storyboard中的结果是可设计的
For any kind of View, added curvedPercent
parameter 对于任何类型的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
}
How can I use it? 我怎么用呢?
self.applyCurvedPath(givenView: self.customView,curvedPercent: 0.5)
Result for curvedPercent = 0.5
curvedPercent = 0.5
结果
Result for curvedPercent = 0.1
curvedPercent = 0.1
结果curvedPercent = 0.1
Result for curvedPercent = 0.9
curvedPercent = 0.9
结果curvedPercent = 0.9
For inverted curve replace original pathCurvedForView
method by this one 对于倒置曲线,用这个替换原始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
}
Result 结果
This will help you to solve your problem 这将帮助您解决问题
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
}
}
Result 结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.