使用贝塞尔路径绘制 UIView答案

【问题标题】：Draw UIView with bezier path使用贝塞尔路径绘制 UIView
【发布时间】：2017-12-15 13:25:46
【问题描述】：

如何绘制如下图所示的视图

我想UIView喜欢图片中的注释视图，
我知道从设计师那里获取图像并在 UIImageView 中分配它，我不想这样做并且也不需要弹出演示文稿。

我想通过 UIView 做到这一点 UIBezierPath 或其他方式..

我们将不胜感激，并提前致谢！！

【问题讨论】：

4 个角使用 bazer 路径进行圆化，但不使用 bazer 路径绘制向下箭头
所以你使用图像作为向下箭头
这可能吗
不可能如你所愿。
你试过用贝塞尔路径画吗？向我们展示您的尝试，以便我们提供帮助。

标签： ios objective-c swift3

【解决方案1】：

你可以试试这个：

class PopUpView: UIView {

    override func draw(_ rect: CGRect) {

        let width: CGFloat = rect.width
        let height: CGFloat = rect.height

        let radius: CGFloat = 8
        let arrowRadius: CGFloat = 4

        let arrowWidth: CGFloat = 24
        let arrowHeight: CGFloat = 18

        let startingPoint = CGPoint(x: radius, y: 0)
        let upperRightCenter = CGPoint(x: width - radius, y: radius)
        let bottomRightCenter = CGPoint(x: width - radius, y: height - radius - arrowHeight)
        let bottomLeftCenter = CGPoint(x: radius, y: height - radius - arrowHeight)
        let upperLeftCenter = CGPoint(x: radius, y: radius)

        let path: UIBezierPath = UIBezierPath()

        path.move(to: startingPoint)

        path.addArc(withCenter: upperRightCenter, radius: radius, startAngle: 270.degreesToRadians, endAngle: 0, clockwise: true)

        path.addArc(withCenter: bottomRightCenter, radius: radius, startAngle: 0, endAngle: 90.degreesToRadians, clockwise: true)

        path.addArc(withCenter: CGPoint(x: (width + arrowWidth)/2 + arrowRadius, y: height + arrowRadius - arrowHeight), radius: arrowRadius, startAngle: 270.degreesToRadians, endAngle: 225.degreesToRadians, clockwise: false)

        path.addArc(withCenter: CGPoint(x: width/2, y: height - arrowRadius), radius: arrowRadius, startAngle: 45.degreesToRadians, endAngle: 135.degreesToRadians, clockwise: true)

        path.addArc(withCenter: CGPoint(x: (width - arrowWidth)/2 - arrowRadius, y: height + arrowRadius - arrowHeight), radius: arrowRadius, startAngle: 315.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: false)

        path.addArc(withCenter: bottomLeftCenter, radius: radius, startAngle: 90.degreesToRadians, endAngle: 180.degreesToRadians, clockwise: true)

        path.addArc(withCenter: upperLeftCenter, radius: radius, startAngle: 180.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true)

        path.close()

        UIColor.gray.setFill()
        UIColor.clear.setStroke()

        path.fill()
        path.stroke()
    }

}

extension Int {
    var degreesToRadians: CGFloat {
        return CGFloat(M_PI) * CGFloat(self) / 180.0
    }
}

基本上我继承了一个 UIView，重写了 drawRect 方法并使用 UIBezierPath 创建了一个类似的形状。您可能想要更改我用来满足您要求的值。

【讨论】：

感谢您的回复，我会尽力让您知道
drawRect 方法根本没有调用，你能告诉我们代码的用法或者我应该如何在控制器中调用类吗？
@karthikeyan 您只需要使用 PopUpView 类对您的 UIView 进行子类化。它在我的应用程序中运行。
此外，如果在将视图添加到 superView 之后仍然没有调用 drawRect，您可以添加 view.setNeedsDisplay()，这会强制调用 drawRect 方法
如果相关代码实际发布在答案中，这个答案会好得多。不要让人们点击链接查看代码。