Create ellipse shape ImageView with straight edges - swift

Question

Im trying to create a custom shaped ImageView that looks like this.
My initial though was to round corners using the following extensions like so:
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
extension UIBezierPath {
static func rectWithRoundCorners(
size: CGSize,
topLeft: CGFloat = 0,
bottomLeft: CGFloat = 0,
bottomRight: CGFloat = 0,
topRight: CGFloat = 0)
-> UIBezierPath
{
let path = UIBezierPath()
path.move(to: CGPoint(x: size.width - topRight, y: 0))
path.addLine(to: CGPoint(x: topLeft, y: 0))
path.addQuadCurve(to: CGPoint(x: 0, y: topLeft), controlPoint: .zero)
path.addLine(to: CGPoint(x: 0, y: size.height - bottomLeft))
path.addQuadCurve(to: CGPoint(x: bottomLeft, y: size.height), controlPoint: CGPoint(x: 0, y: size.height))
path.addLine(to: CGPoint(x: size.width - bottomRight, y: size.height))
path.addQuadCurve(
to: CGPoint(x: size.width, y: size.height - bottomRight),
controlPoint: CGPoint(x: size.width, y: size.height))
path.addLine(to: CGPoint(x: size.width, y: topRight))
path.addQuadCurve(to: CGPoint(x: size.width - topRight, y: 0), controlPoint: CGPoint(x: size.width, y: 0))
return path
}
}
extension UIView {
func roundCorners(topLeft: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0, topRight: CGFloat = 0) {
let path = UIBezierPath.rectWithRoundCorners(
size: bounds.size,
topLeft: topLeft,
bottomLeft: bottomLeft,
bottomRight: bottomRight,
topRight: topRight)
let shape = CAShapeLayer()
shape.path = path.cgPath
layer.mask = shape
}
}
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
let label = UILabel()
label.frame = CGRect(x: 150, y: 200, width: 114, height: 114)
label.backgroundColor = .red
label.text = "Hello World!"
label.textColor = .black
label.roundCorners(topLeft: 100, bottomLeft: 50, bottomRight: 0, topRight: 50)
view.addSubview(label)
self.view = view
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
but I get the following result:
Is there a better approach using rounded rect and UIBezierPath? I have no experience using UIBezierPath so not sure how it will do round corners and straight edges...

Answer 1

Well, your shape only has two straight edges, so there should be two addLine calls (or, as below, one addLine and one close).
There might be more mathematically rigorous solutions, but I use tools like Adobe Photoshop or Illustrator to approximate what Bézier curves I need.
The overall shape (bounded by 117×103 rectangle) can be reasonably well approximated with one big cubic Bézier (shown below), one addLine for the bottom edge, one quad Bézier (or arc) for the rounded, lower-right corner, and then just close the path.
To get those control points, I used a pen tool in Adobe Illustrator to create a cubic bezier of the appropriate shape, and I then exported the path as a SVG, and deciphered the file to come up with the appropriate coordinates for the various control points:
let rect = CGRect(origin: .zero, size: CGSize(width: 117, height: 103))
let radius: CGFloat = 10
let path = UIBezierPath()
path.move(to: CGPoint(x: rect.maxX, y: 27.62))
path.addCurve(to: CGPoint(x: 11.77, y: rect.maxY),
controlPoint1: CGPoint(x: 77, y: -46.21),
controlPoint2: CGPoint(x: -36.11, y: 44.91))
path.addLine(to: CGPoint(x: rect.maxX - radius, y: rect.maxY))
path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.maxY - radius),
controlPoint: CGPoint(x: rect.maxX, y: rect.maxY))
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.fillColor = UIColor.blue.cgColor
shapeLayer.path = path.cgPath
someView.layer.addSublayer(shapeLayer)
Tweak the coordinates as you see fit, but hopefully this illustrates (no pun intended) how to approximate the Bézier curves in a drawing and translate that to Swift code.
This is the resulting image: