我要设计一堆用曲线连接的圆

时间:2019-03-30 08:13:42

标签: ios swift swift4 uibezierpath curve

Want to achieve something like this我已经使用UIView创建了圆圈,但是在创建quadCurve时找不到每条线的控制点

func drawLineFromPoint(point1:CGPoint, point2:CGPoint) {
    let path = UIBezierPath()
    path.move(to: point1)
   // path.addLine(to: point2)
   path.flatness = 0.9
    path.addQuadCurve(to: point2, controlPoint: CGPoint(x: (point1.x+point2.x), y: (point1.y)))


let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.blue.cgColor
shapeLayer.lineWidth = 5
shapeLayer.fillColor = UIColor.clear.cgColor

self.centerView.layer.addSublayer(shapeLayer)

1 个答案:

答案 0 :(得分:0)

您无需在小圆圈之间绘制每条线。您可以先画一个大圆圈,然后在那个大圆圈上画一个小圆圈

例如:

override func draw(_ rect: CGRect) {
    // change these as you wish
    let colors = [UIColor.red, .blue, .green, .red, .blue, .green, .red, .blue, .green, .red, .blue, .green]
    let bigCircleRect = self.bounds.insetBy(dx: 16, dy: 16) // This is how big the big circle is compared to the view
    let bigCircle = UIBezierPath(ovalIn: bigCircleRect)
    bigCircle.lineWidth = 5
    UIColor.black.setStroke() // color of the big circle
    bigCircle.stroke()

    for (index, angle) in stride(from: -CGFloat.pi, to: .pi - .pi / 6, by: .pi / 6).enumerated() {
        let centerOfCircle = CGPoint(x: (bigCircleRect.width / 2) * cos(angle) + bounds.width / 2,
                                     y: (bigCircleRect.width / 2) * sin(angle) + bounds.width / 2)
        let smallCircleRect = CGRect(origin: centerOfCircle, size: .zero).insetBy(dx: -16, dy: -16) // size of small circle
        let smallCircle = UIBezierPath(ovalIn: smallCircleRect)
        colors[index].setFill()
        smallCircle.fill()

    }
}

输出:

enter image description here