Drawing Vectors using UIBezierPath in Swift
UIBezierPath is a class that allows us to make vector drawings with Swift. One of the most important reasons why we use vector drawings is that the quality of the drawings does not deteriorate even when enlarged.
Before moving on to the examples, let’s talk about a few geometric terms.
Point: Expressed as dimensionless in geometry; It is a term that has no width, length, and depth.
Line: A set of points that are in the same direction and go to infinity in both directions.
Line Segment: A set of points lying between two bounded ends of a line, each side-by-side in the same direction.
We can form shapes by combining more than two line segments.
Let’s draw our first shape together.
Step 1- First create a custom UIView class called BezierPath,
Step 2- We create an object from the UIBezierPath class
Step 3- We determine the starting point of our drawing with Square.move(to:CGPoint(x:100,y:150),CGPoint(x:100,y150)). Although in geometry the point (x: 0, y:0) is exactly the midpoint, on the phone screen the point (x: 0, y:0) represents the top left corner.
Step 4- Using the addline(), we specify the direction and length of the line segment’s motion step by step.
If you notice, we returned to the starting point in the last step, instead, we could use close()to indicate that our drawing is finished.
Step 5- Now let’s color the shape we have drawn. For this, we choose our color with the UIColor.orange.setFiil().
We paint the inside of our drawing with the Square.fill()
In the same way, we can color the frame of our drawing. For this, we need to use the function stroke().
we choose our color with the UIColor.gray.setStroke()
We paint the frame of our drawing with the Square.stroke()
In the last case, our class should look like this.
Step 6- We create an object from the BezierPath class that we have customized in the ViewController().
When we run our application, we can see our shape :)
The UIBezierPath class provides us with predefined shapes, let’s examine them now.
Rectangular: Creates and returns a new UIBezierPath object with a rectangular path. Let’s draw a rectangular shape with the following codes
We can give a corner radius to the rectangular shapes we have created.
Circle: Creates and returns a new Bézier path object with an inscribed oval path in the specified rectangle. The code example is as follows
After drawing all the shapes, we will see the following shapes on our screen.
We’ve always drawn shapes with straight lines, now let’s practice more difficult examples.
Curve: Appends a cubic Bézier curve to the path.
controlPoint1 and controlPoint2denotes checkpoints,
to: Specifies the point where the shape will end.
Screenshot of our shape should look like below
Let’s make a slightly more complex shape :)
and the result is as below :)
Thank you for reading and happy coding.
