CODEWITHSUNDEEP
swiftswift2core-graphicsuibezierpathswift3
James
James

Reputation: 1177

Scaleable UIBezier in Swift 3

I'm trying to design a scaleable UIBezier.

This is my Swift Code:

@IBDesignable
class AnimatedRingView: UIView {


     override func draw(_ rect: CGRect) {
        //// Color Declarations
        let strokeColor = UIColor(red: 1.000, green: 0.706, blue: 0.004, alpha: 1.000)

        //// bezier Drawing
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 48.93, y: 266.07))
        bezierPath.addCurve(to: CGPoint(x: 48.93, y: 53.93), controlPoint1: CGPoint(x: -9.64, y: 207.49), controlPoint2: CGPoint(x: -9.64, y: 112.51))
        bezierPath.addCurve(to: CGPoint(x: 261.07, y: 53.93), controlPoint1: CGPoint(x: 107.51, y: -4.64), controlPoint2: CGPoint(x: 202.49, y: -4.64))
        bezierPath.addCurve(to: CGPoint(x: 261.07, y: 266.07), controlPoint1: CGPoint(x: 319.64, y: 112.51), controlPoint2: CGPoint(x: 319.64, y: 207.49))
        bezierPath.addLine(to: CGPoint(x: 261.07, y: 266.07))
        bezierPath.lineCapStyle = .round;

        bezierPath.lineJoinStyle = .round;

        strokeColor.setStroke()
        bezierPath.lineWidth = 10
        bezierPath.stroke()

     }

}

This is the result:

enter image description here

My problem: To save time, I created the UIBezierPath by PaintCode:

enter image description here

And as you can see above, we have a width and height for the UIBezierPath, however, the code is displayed points of UIBezierPath ...

How can I create a size variable to assign a value via code (or inspector) that automatically identify the points of UIBezierPath?

Is this possible? Need help!

Upvotes: 2

Views: 741

Answers (2)

Tricertops
Tricertops

Reputation: 8512

Bezier objects do not support attaching variables to their dimensions, but you can use Oval object with custom start/end angles.

Attaching variable to Oval

— PaintCode Support

Upvotes: 1

user3230875
user3230875

Reputation: 689

Given you creating a Circular Arc, using Bezier Curves for that purpose seems like overkill.

With UIBezierPath, you can use this function:

func addArcWithCenter(_ center: CGPoint, radius radius: CGFloat, startAngle startAngle: CGFloat, endAngle endAngle: CGFloat, clockwise clockwise: Bool)

and set a radius, along with the requisite start and end angles.

If you really must use cubic Béziers for the purpose, you should use the magic number kappa which equals 0.5522847498, and that is the control points for a circle built out of cubic Béziers.

I have placed a small demo of what I'm describing on my web site at:

http://www.trilithon.com/download/AnimatedRingView.zip

Hope That Helps.

Upvotes: 2

Related Questions