Search code examples
iosswiftuibezierpathdrawrect

Draw Custom Shape Swift

I'm trying to draw a shape which would resemble a ticket - something like the image below. I'm just really interested in the outline and none of the inner details. I know this can be done by creating a custom UIView and overriding the drawRect method. I know how to draw simple shapes like a rectangle, as seen in the code below, however I'm not sure how to draw the curves as required in this case. enter image description here

override func drawRect(rect: CGRect) {
    let size = self.bounds.size
    let p1 = self.bounds.origin
    let p2 = CGPoint(x:p1.x + size.width, y:p1.y)
    let p3 = CGPoint(x:p2.x, y:p2.y + size.height)
    let p4 = CGPoint(x:p1.x, y:p1.y + size.height)
    let path = UIBezierPath()
    path.moveToPoint(p1)
    path.addLineToPoint(p2)
    path.addLineToPoint(p3)
    path.addLineToPoint(p4)
    path.closePath()
    UIColor.blackColor().set()
    path.fill()
}
Solution

  • Use addCurve with controlPoints. You can/should make some adjustments to this snippet:

    // Color Declaration
let color = UIColor(red: 0.964, green: 0.952, blue: 0.000, alpha: 1.000)

// Bezier Drawing
let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 144.5, y: 82.5))
bezierPath.addLine(to: CGPoint(x: 969.5, y: 82.5))
bezierPath.addCurve(to: CGPoint(x: 969.5, y: 138.5), controlPoint1: CGPoint(x: 969.5, y: 82.5), controlPoint2: CGPoint(x: 957.5, y: 118.25))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 163.5), controlPoint1: CGPoint(x: 981.5, y: 158.75), controlPoint2: CGPoint(x: 1017.5, y: 163.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 184.5), controlPoint1: CGPoint(x: 1017.5, y: 163.5), controlPoint2: CGPoint(x: 997.5, y: 173.5))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 207.5), controlPoint1: CGPoint(x: 997.5, y: 195.5), controlPoint2: CGPoint(x: 1017.5, y: 207.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 234.5), controlPoint1: CGPoint(x: 1017.5, y: 207.5), controlPoint2: CGPoint(x: 997.5, y: 222.25))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 256.5), controlPoint1: CGPoint(x: 997.5, y: 246.75), controlPoint2: CGPoint(x: 1017.5, y: 256.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 280.5), controlPoint1: CGPoint(x: 1017.5, y: 256.5), controlPoint2: CGPoint(x: 997.5, y: 267.5))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 308.5), controlPoint1: CGPoint(x: 997.5, y: 293.5), controlPoint2: CGPoint(x: 1017.5, y: 308.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 330.5), controlPoint1: CGPoint(x: 1017.5, y: 308.5), controlPoint2: CGPoint(x: 997.5, y: 318.75))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 355.5), controlPoint1: CGPoint(x: 997.5, y: 342.25), controlPoint2: CGPoint(x: 1017.5, y: 355.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 384.5), controlPoint1: CGPoint(x: 1017.5, y: 355.5), controlPoint2: CGPoint(x: 997.5, y: 372))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 405.5), controlPoint1: CGPoint(x: 997.5, y: 397), controlPoint2: CGPoint(x: 1017.5, y: 405.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 427.5), controlPoint1: CGPoint(x: 1017.5, y: 405.5), controlPoint2: CGPoint(x: 997.5, y: 415.5))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 453.5), controlPoint1: CGPoint(x: 997.5, y: 439.5), controlPoint2: CGPoint(x: 1017.5, y: 453.5))
bezierPath.addCurve(to: CGPoint(x: 997.5, y: 479.5), controlPoint1: CGPoint(x: 1017.5, y: 453.5), controlPoint2: CGPoint(x: 997.5, y: 466.75))
bezierPath.addCurve(to: CGPoint(x: 1017.5, y: 504.5), controlPoint1: CGPoint(x: 997.5, y: 492.25), controlPoint2: CGPoint(x: 1017.5, y: 504.5))
bezierPath.addCurve(to: CGPoint(x: 969.5, y: 504.5), controlPoint1: CGPoint(x: 1017.5, y: 504.5), controlPoint2: CGPoint(x: 981.5, y: 489.5))
bezierPath.addCurve(to: CGPoint(x: 969.5, y: 564.5), controlPoint1: CGPoint(x: 957.5, y: 519.5), controlPoint2: CGPoint(x: 969.5, y: 564.5))
bezierPath.addLine(to: CGPoint(x: 144.5, y: 564.5))
bezierPath.addCurve(to: CGPoint(x: 122.5, y: 504.5), controlPoint1: CGPoint(x: 144.5, y: 564.5), controlPoint2: CGPoint(x: 143, y: 519.5))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 504.5), controlPoint1: CGPoint(x: 102, y: 489.5), controlPoint2: CGPoint(x: 62.5, y: 504.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 479.5), controlPoint1: CGPoint(x: 62.5, y: 504.5), controlPoint2: CGPoint(x: 86.5, y: 492.25))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 453.5), controlPoint1: CGPoint(x: 86.5, y: 466.75), controlPoint2: CGPoint(x: 62.5, y: 453.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 427.5), controlPoint1: CGPoint(x: 62.5, y: 453.5), controlPoint2: CGPoint(x: 86.5, y: 439.5))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 405.5), controlPoint1: CGPoint(x: 86.5, y: 415.5), controlPoint2: CGPoint(x: 62.5, y: 405.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 384.5), controlPoint1: CGPoint(x: 62.5, y: 405.5), controlPoint2: CGPoint(x: 86.5, y: 397))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 355.5), controlPoint1: CGPoint(x: 86.5, y: 372), controlPoint2: CGPoint(x: 62.5, y: 355.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 330.5), controlPoint1: CGPoint(x: 62.5, y: 355.5), controlPoint2: CGPoint(x: 86.5, y: 342.25))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 308.5), controlPoint1: CGPoint(x: 86.5, y: 318.75), controlPoint2: CGPoint(x: 62.5, y: 308.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 280.5), controlPoint1: CGPoint(x: 62.5, y: 308.5), controlPoint2: CGPoint(x: 86.5, y: 293.5))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 256.5), controlPoint1: CGPoint(x: 86.5, y: 267.5), controlPoint2: CGPoint(x: 62.5, y: 256.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 234.5), controlPoint1: CGPoint(x: 62.5, y: 256.5), controlPoint2: CGPoint(x: 86.5, y: 246.75))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 207.5), controlPoint1: CGPoint(x: 86.5, y: 222.25), controlPoint2: CGPoint(x: 62.5, y: 207.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 184.5), controlPoint1: CGPoint(x: 62.5, y: 207.5), controlPoint2: CGPoint(x: 86.5, y: 195.5))
bezierPath.addCurve(to: CGPoint(x: 62.5, y: 163.5), controlPoint1: CGPoint(x: 86.5, y: 173.5), controlPoint2: CGPoint(x: 62.5, y: 163.5))
bezierPath.addCurve(to: CGPoint(x: 122.5, y: 138.5), controlPoint1: CGPoint(x: 62.5, y: 163.5), controlPoint2: CGPoint(x: 102, y: 158.75))
bezierPath.addCurve(to: CGPoint(x: 144.5, y: 82.5), controlPoint1: CGPoint(x: 143, y: 118.25), controlPoint2: CGPoint(x: 144.5, y: 82.5))
bezierPath.close()
color.setFill()
bezierPath.fill()
UIColor.black.setStroke()
bezierPath.lineWidth = 1
bezierPath.stroke()

    And here is the result:

    Ticket