IOS draws paths with Bezier curves

Draw a path using Bezier curves

Most of the time, the border of the control we use in development is a rectangle, or a little fillet, which makes the corners of the rectangle look more rounded. But what if we want an irregular shape? Some people say, called UI sister do, not only convenient, but also can take the opportunity to approach them (_:D). It's time to do it. But if it is a change of irregular shape, so if you make a motion diagram or cut a lot of pictures, and then called UI sister do, it seems to be able to solve, but the actual effect bar, hehe. More importantly, since then the UI sister will not be willing to talk to you, even after the opportunity to contact you no longer. Well, we don't really need to worry about this in iOS. Using Uibezierpath can make it easy to get some complex graphics out of the venue.

Uibezierpath is used by iOS that belongs to Uikit and can be used to draw paths. When it comes to drawing, we quickly think of the famous core graphics, students directly using the core graphics drawing is not a problem, the core graphics has more ways to draw, it is a powerful set of APIs, But the function of the many anomalies will definitely let unfamiliar you dizzy brain swelling, iOS very human to the Core graphics encapsulation. And that is Uibezierpath. This article explains how to draw a simple path on a uiview using Uibezierpath combined with Cashapelayer.

For the path drawing two ways, one is fill (fill), one is the description (stroke). Directly on the code bar, after all, is not a profound knowledge.

Import UIKitclassViewcontroller:uiviewcontroller {Overridefunc viewdidload () {super.viewdidload () Self.userbezier ()}Overridefunc didreceivememorywarning () {super.didreceivememorywarning ()} func Userbezier () {//Draw an arc if it's a circle.Let Criclepath:uibezierpath = Uibezierpath.init (ArcCenter:CGPoint.init (x: $Y: -), Radius: -, StartAngle:0, Endangle:5.12, Clockwise:true) Criclepath.stroke ()//Draw a rectangleLet Rectpath:uibezierpath = Uibezierpath.init (Rect:CGRect.init (x: -Y: the, Width: -, Height: -)) Criclepath.append (Rectpath)//The principle of drawing an ellipse is an inner rectangle, and if the length and width of the rectangle are equal then the circle is drawn.Let Ovalpath:uibezierpath = Uibezierpath.init (OvalIn:CGRect.init (x: $Y: $, Width: -, Height: -)) Criclepath.append (Ovalpath)//Drawing line polygons allows multiple lines to be stitched together into complex shapes such as drawing a triangleLet Trianglepath:uibezierpath =Uibezierpath.init () trianglepath.move (To:CGPoint.init (x: -Y: -))//Draw starting pointTrianglepath.addline (To:CGPoint.init (x: -Y: -))//draw a line from the starting point to the specified pointTrianglepath.addline (To:CGPoint.init (x: -Y: -))//Trianglepath.close ()//Closed PathTrianglepath.linewidth =3.0criclepath.append (Trianglepath)//Add a second order curve the second curve is a total of three points, start/end/vertex (control point)Let Cruvepath:uibezierpath =Uibezierpath.init () cruvepath.move (To:CGPoint.init (x: -Y:420)) Cruvepath.addquadcurve (To:CGPoint.init (x: -Y:420), ControlPoint:CGPoint.init (x: -Y:530)) Criclepath.append (Cruvepath)//Add a third-order curve starting point end two control points can be added to a long sankai curve after infinitely adding a second curveLet Path:uibezierpath =Uibezierpath.init () path.move (To:CGPoint.init (x: -Y:550)) Path.addcurve (To:CGPoint.init (x:287Y:550), ControlPoint1:CGPoint.init (x: MaxY:720), ControlPoint2:CGPoint.init (x:215Y:410)) Path.addquadcurve (To:CGPoint.init (x: -Y:550), ControlPoint:CGPoint.init (x:324Y:610) ) criclepath.append (path)//Create a Cashapelayer to display these pathsLet Shpl:cashapelayer =cashapelayer.init () Shpl.path=Criclepath.cgpath shpl.linewidth=3.0Shpl.fillcolor= UIColor.clear.cgColor//Fill PathShpl.strokecolor= UIColor.red.cgColor//The drawing path is depicted according to the line width.Self.view.layer.addSublayer (shPl) Self.view.layer.backgroundColor=UIColor.white.cgColor}}

Depending on how you draw, run the following two images:

IOS draws paths with Bezier curves