ios 如何在UIImageView的底部应用曲线？

db2dz4w8 于 2023-11-19 发布在 iOS

关注(0)|答案(2)|浏览(109)

我想面具，并在图像视图底部添加一些曲线。我已经尝试下面的代码。

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 Like上面的屏幕截图。
我发现一些使用完整的东西在Android中，但不是在iOS.
友情链接：Crescento View

ios

来源：https://stackoverflow.com/questions/48317569/how-to-apply-curve-at-bottom-of-uiimageview

2条答案

按热度按时间

piok6c0g1#

正如我在我的评论中所说，你需要制作你自己的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
}

型

结果

赞(0）回复(0）举报 2023-11-19

kognpnkq2#

这将帮助您解决问题 *

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
      }
    }

字符串

结果

的数据

赞(0）回复(0）举报 2023-11-19

我来回答

ios 如何在UIImageView的底部应用曲线？

2条答案

更新

相关问题

热门标签

最新问答