代码之家 › 专栏 › 技术社区 › Alk

绘制自定义形状

drawrect uibezierpath swift ios

0

Alk · 技术社区 · 7 年前

我正试着画一个像票一样的形状,就像下面的图片。我只对大纲感兴趣,对里面的细节一点也不感兴趣。我知道这可以通过创建自定义 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()
}

1 回复 | 直到 7 年前

1

10

ielyamani 7 年前

使用 addCurve controlPoint s、您可以/应该对此代码段进行一些调整:

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

结果如下: