[英]Draw UIView with bezier path
How to draw a view like image below 如何绘制如下图所示的视图
I want to UIView like annotation view in picture, 我想要UIView像图片中的注解视图,
I know get image from designer and assign it in UIImageView and i don't want do that way and pop over presentation also no need. 我知道从设计器中获取图像并将其分配到UIImageView中 ,但我不想这样做,也不需要弹出显示。
I wanted to do this with UIView by UIBezierPath or some other other way.. 我想通过UIBezierPath或其他方法通过UIView进行此操作。
Help would be appreciated and Thanks in advance!! 帮助将不胜感激,并预先感谢!
You can try this: 您可以尝试以下方法:
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
}
}
Basically I subclassed a UIView, overidden the drawRect method and used UIBezierPath to create a similar shape. 基本上,我继承了UIView的子类,覆盖了drawRect方法,并使用UIBezierPath创建了相似的形状。 You may want to change the values I used to suite your requirement. 您可能需要更改我用来满足您的要求的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.