如何在UIImageView底部应用曲线？ [英] How to apply Curve at bottom of UIImageView?

问题描述

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

 扩展名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）
返回UIGraphicsGetImageFromCurrentImageContext（）！ 
} 
} 
  

但没有获得成功。
让我把UI放在这里，我想在屏幕上显示。

让我知道如何在swift中显示UIImageView上面的屏幕截图。

我在Android中发现了一些完整的东西，但在iOS中没有。

链接：

对于任何类型的视图，添加 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& lt; = 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

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 * curvedP） ercent）），controlPoint：CGPoint（x：givenView.bounds.size.width / 2，y：givenView.bounds.size.height））
 arrowPath.addLine（to：CGPoint（x：0，y：0） ））
 arrowPath.close（）
 
返回arrowPath 
} 
  

结果

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.

Let me know how to show UIImageView Like above screen shots in swift.

I have found some use full thing in android but not in iOS.

Link : 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

Custom UIImageView class

@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

For any kind of View, added curvedPercent parameter

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

Result for curvedPercent = 0.1

Result for curvedPercent = 0.9

UPDATE

For inverted curve replace original pathCurvedForView method by this one

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

这篇关于如何在UIImageView底部应用曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！