CODEWITHSUNDEEP
iosuiviewcalayeruibezierpath
Roi Mulia
Roi Mulia

Reputation: 5896

Calculate UIBezierPath Curved Control Point

I'm struggling to understand how to achieve the following component:

enter image description here

enter image description here

Theory:

I've managed to create 4 draggable UIView'. When one of the UIView change position I'm creating UIBezierPath from connecting each UIView center, to a box shape and displaying it using CAShapeLayer. I can't understand how to calculate the "addQuadCurve" control point to achieve the curved lines in the illustration.

Current Code:

func updateLines() {
 let path = UIBezierPath()
 path.move(to: v.center)
 path.addLine(to: v2.center)
 path.addLine(to: v4.center)
 path.addLine(to: v3.center)
 path.close()
 line.path = path.cgPath
 line.strokeColor = UIColor.black.cgColor
 line.fillColor = UIColor.red.cgColor
}

Any help or advice for the right direction will be highly appreciated. Best regards, Roi

Upvotes: 0

Views: 714

Answers (1)

Duncan C
Duncan C

Reputation: 131491

It looks to me like a connected set of cubic Bezier curves where the beginning and end are the same point. If you watch the animation, it looks like as you drag different points, the point that's the beginning/end of the curve gets changed.

Watch carefully and you'll see that 3 of the 4 corners are smooth curves, and one has a "kink" in it. The kinked corner seems to be a point other than the one that's being moved. That's probably the begin/end point.

Upvotes: 1

Related Questions