绘制自定义形状 Swift

Question

我正在尝试绘制一个类似于票的形状 - 如下图所示。我只是对大纲和内部细节 none 很感兴趣。我知道这可以通过创建自定义 UIView 并覆盖 drawRect 方法来完成。我知道如何绘制像矩形这样的简单形状，如下面的代码所示，但是我不确定在这种情况下如何根据需要绘制曲线。

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()
}

Answer 1

将 addCurve 与 controlPoint 一起使用。您 can/should 对此代码段进行了一些调整：

// 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()

结果如下：

绘制自定义形状 Swift

Draw Custom Shape Swift

drawrect

ios

uibezierpath

swift