uiimageview底部的曲线视图

Question

我需要在视图底部使用UIBezierPath绘制一个视图，就像这个图像一样。

我尝试使用此代码，但是在图像的一半处不是椭圆形绘制，而不是在图片的底部 这是我的输出和代码

override func draw(_ rect: CGRect) {
    super.draw(rect)

    let shapeLayer = CAShapeLayer(layer: imgCamera.layer)
    shapeLayer.path = self.pathCurvedForView(givenView: imgCamera).cgPath
    shapeLayer.frame = imgCamera.bounds
    shapeLayer.masksToBounds = true
    imgCamera.layer.mask = shapeLayer

}

private func pathCurvedForView(givenView: UIView) ->UIBezierPath
{
    let ovalRect = givenView.frame

    let ovalPath = UIBezierPath()

    ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: 0 * CGFloat.pi/180, endAngle: -180 * CGFloat.pi/180, clockwise: true)
    ovalPath.addLine(to: CGPoint(x: ovalRect.midX, y: ovalRect.midY))

    ovalPath.close()

    UIColor.gray.setFill()
    ovalPath.fill()

    return ovalPath
}

Answer 1

您可以直接将凸轮trim()添加为subView，并使用replace(name, '''', '') ---------------^^ escaped single quote --------------^--^ string delimiter for the single quote character UIButton来实现此效果，为UIImageView添加边框宽度和边框颜色并制作maskToBounds可触摸就足够了

示例代码

UIImageView

Answer 2

代码工作：

    imageView.layer.cornerRadius = imageView.frame.width/2
    imageView.layer.borderWidth = 5
    imageView.layer.borderColor = UIColor.white.cgColor
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = imageView.bounds
    gradientLayer.colors = [UIColor.clear.cgColor, UIColor.clear.cgColor, UIColor.clear.cgColor, lightBlack.cgColor , lightBlack.cgColor]
    gradientLayer.locations = [NSNumber(value: 0.0), NSNumber(value: 0.5), NSNumber(value: 0.75),NSNumber(value: 0.75), NSNumber(value: 1.0)]
    imageView.layer.addSublayer(gradientLayer)

输出

Answer 3

startAngle和endAngle应该是弧度值。在你的情况下，角度计算看起来很奇怪，你想要实现什么？对我来说，所需的输出看起来需要一个从5/8 PI到7/8 PI的弧，逆时针。在你的情况下，顺时针方向从0到〜-PI。

尝试

ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: CGFloat.pi * 5.0/8.0, endAngle: CGFloat.pi * 7.0/8.0, clockwise: false)
ovalPath.close()

顺便说一句，你不需要添加addLine，close()会照着你的方式添加<{p>}