class LineHolderView: UIView {\r\n \r\n private var bezierPathLine: UIBezierPath!\r\n private var bufferImage: UIImage?\r\n \r\n override init(frame: CGRect) {\r\n \r\n super.init(frame: frame)\r\n initializeView()\r\n }\r\n \r\n required init?(coder aDecoder: NSCoder) {\r\n \r\n super.init(coder: aDecoder)\r\n initializeView()\r\n }\r\n \r\n override func draw(_ rect: CGRect) {\r\n bufferImage?.draw(in: rect)\r\n drawLine()\r\n }\r\n \r\n private func drawLine() {\r\n UIColor.red.setStroke()\r\n bezierPathLine.stroke()\r\n }\r\n \r\n private func initializeView() {\r\n \r\n isMultipleTouchEnabled = false\r\n \r\n bezierPathLine = UIBezierPath()\r\n bezierPathLine.lineWidth = 4\r\n \r\n self.backgroundColor = UIColor.clear\r\n \r\n let panGesture = UIPanGestureRecognizer(target: self, action: #selector(viewDragged(_:)))\r\n addGestureRecognizer(panGesture)\r\n \r\n }\r\n \r\n func viewDragged(_ sender: UIPanGestureRecognizer) {\r\n \r\n let point = sender.location(in: self)\r\n \r\n if point.x < 0 || point.x > frame.width || point.y < 0 || point.y > frame.height {\r\n return\r\n }\r\n \r\n switch sender.state {\r\n \r\n case .began:\r\n bezierPathLine.move(to: point)\r\n break\r\n \r\n case .changed:\r\n bezierPathLine.addLine(to: point)\r\n setNeedsDisplay()\r\n break\r\n \r\n case .ended:\r\n saveBufferImage()\r\n bezierPathLine.removeAllPoints()\r\n break\r\n default:\r\n break\r\n }\r\n }\r\n \r\n private func saveBufferImage() {\r\n UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, UIScreen.main.scale)\r\n if bufferImage == nil {\r\n let fillPath = UIBezierPath(rect: self.bounds)\r\n UIColor.clear.setFill()\r\n fillPath.fill()\r\n }\r\n bufferImage?.draw(at: .zero)\r\n drawLine()\r\n bufferImage = UIGraphicsGetImageFromCurrentImageContext()\r\n UIGraphicsEndImageContext()\r\n }\r\n}<\/pre>\n <\/p>\n
What we did here, we created a subclass of `UIView` and in both initializers called a method `initializeView()`.<\/p>\n
In `initializeView()` method we disabled the multiple touch, create an object of `UIBezierPath` class and added and `UIPanGestureRecognizer` at the view. Here you can change the thickness of drawing at line 32.<\/p>\n
Now let’s see the implementation of method `viewDragged(_: )` which is the selector for `UIPanGestureRecognizer` and will be called when user drags on the view.<\/p>\n
So in this first we get the current location of user’s finger in view and if the location if outside of the container then we ignore the drawing. Now the `state` property of `UIPanGestureRecognizer` tells us whether the drag is started, changed or ended. So we have\u00a0Added a switch case on `state` property and did following of different states:<\/p>\n
- \n
- Began: When user began the dragging we move our bezier path to that point.<\/li>\n
- Changed: When drag changed we added an line to the current point.<\/li>\n
- Ended:\u00a0In this we used the method `saveBufferImage()` to convert the current drawing into an image and store it. It will save the cost of redrawing whole path next time.<\/li>\n<\/ul>\n
In `draw(_:)` method we first draw the stored buffer image and then \u00a0we set the stroke color for line color and stroke the bezier path. You can change the stroke color if you want to change the line color.<\/p>\n
That’s it, set this `LineHolderView` as a class to any view in storyboard and done, start drawing.<\/p>\n
Here is the result:<\/p>\n
![\"freehand-drawing-1\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/IMG_0247.jpg\")
<\/a><\/p>\nAs you can see in the above image the lines have sharp changes in it. So here we a concept named ‘Linear Polarization’ to smoother our drawing. In Linear polarization we draw an arc with four points and two of them works as control points and the arc drawn below the tangent of first and second point and tangent of third and fourth points.<\/p>\n
Here are some examples of arcs drawn with two control points:<\/p>\n
![\"bezier\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/bezier.png\")
<\/a><\/p>\n<\/p>\n
![\"interestingshapes\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/interestingshapes.png\")
<\/a><\/p>\nSo here we will use an array to store the 4 points, and when we get four points then we will draw an arc between them with two control points using the `UIBezierPath` method `addCurve<\/span>(to<\/span> endPoint<\/span>: CGPoint<\/span>, controlPoint1<\/span>: CGPoint<\/span>, controlPoint2<\/span>: CGPoint<\/span>)`.<\/p>\n
Here is the complete code after changes:<\/p>\n
class LineHolderView: UIView {\r\n \r\n private var bezierPathLine: UIBezierPath!\r\n private var bufferImage: UIImage?\r\n\r\n private var bezierCurvePoints: [CGPoint] = [] \/\/ Create an array to store points.\r\n \r\n override init(frame: CGRect) {\r\n \r\n super.init(frame: frame)\r\n initializeView()\r\n }\r\n \r\n required init?(coder aDecoder: NSCoder) {\r\n \r\n super.init(coder: aDecoder)\r\n initializeView()\r\n }\r\n \r\n override func draw(_ rect: CGRect) {\r\n bufferImage?.draw(in: rect)\r\n drawLine()\r\n }\r\n \r\n private func drawLine() {\r\n \r\n UIColor.red.setStroke()\r\n bezierPathLine.stroke()\r\n }\r\n \r\n private func initializeView() {\r\n \r\n isMultipleTouchEnabled = false\r\n \r\n bezierPathLine = UIBezierPath()\r\n bezierPathLine.lineWidth = 4\r\n \r\n self.backgroundColor = UIColor.clear\r\n \r\n let panGesture = UIPanGestureRecognizer(target: self, action: #selector(viewDragged(_:)))\r\n addGestureRecognizer(panGesture)\r\n \r\n }\r\n \r\n func viewDragged(_ sender: UIPanGestureRecognizer) {\r\n \r\n let point = sender.location(in: self)\r\n \r\n if point.x < 0 || point.x > frame.width || point.y < 0 || point.y > frame.height {\r\n return\r\n }\r\n \r\n switch sender.state {\r\n \r\n case .began:\r\n bezierCurvePoints.append(point) \/\/ Add first point in array.\r\n break\r\n \r\n case .changed:\r\n \r\n bezierCurvePoints.append(point)\r\n \r\n \/\/ If we get 4 points.\r\n if bezierCurvePoints.count == 4 {\r\n\r\n \/\/ Draw an arc from point 0 to 3 with point 1 and 2 as control points.\r\n bezierPathLine.move(to: bezierCurvePoints[0])\r\n bezierPathLine.addCurve(to: bezierCurvePoints[3], controlPoint1: bezierCurvePoints[1], controlPoint2: bezierCurvePoints[2])\r\n \r\n let point = bezierCurvePoints[3]\r\n \r\n bezierCurvePoints.removeAll()\r\n \r\n \/\/ Store end point of arc as a start point for next arc.\r\n bezierCurvePoints.append(point)\r\n setNeedsDisplay()\r\n }\r\n \r\n break\r\n \r\n case .ended:\r\n\r\n saveBufferImage()\r\n \r\n \/\/ Remove all points.\r\n bezierCurvePoints.removeAll()\r\n bezierPathLine.removeAllPoints()\r\n break\r\n default:\r\n break\r\n }\r\n }\r\n \r\n private func saveBufferImage() {\r\n UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, UIScreen.main.scale)\r\n if bufferImage == nil {\r\n let fillPath = UIBezierPath(rect: self.bounds)\r\n UIColor.clear.setFill()\r\n fillPath.fill()\r\n }\r\n bufferImage?.draw(at: .zero)\r\n drawLine()\r\n bufferImage = UIGraphicsGetImageFromCurrentImageContext()\r\n UIGraphicsEndImageContext()\r\n }\r\n}<\/pre>\n<\/p>\n
Compile and Run it. You will get some output like this:<\/p>\n
<\/p>\n
![\"freehand-drawing-2\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/IMG_0248.jpg\")
<\/a><\/p>\nAs you can see the drawing is improved but it have some problem when there is a mismatch in the tangents of last and starting point of the curve as shown in following picture.<\/p>\n
![\"mismatched\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/mismatched.png\")
<\/a><\/p>\nSo now we have to match the tangents by calculating a new intersection point between two curves like following picture:<\/p>\n
![\"shiftingjunctionpoint\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/shiftingjunctionpoint.png\")
<\/a><\/p>\nSo we have to calculate a middle point of 3rd point of first curve and 1st point of second curve. So we will need an extra point to calculate the midpoint. Now the points array will have 5 points.<\/p>\n
Change the class with following code and run.<\/p>\n
class LineHolderView: UIView {\r\n \r\n private var bezierPathLine: UIBezierPath!\r\n private var bufferImage: UIImage?\r\n\r\n private var bezierCurvePoints: [CGPoint] = []\r\n \r\n override init(frame: CGRect) {\r\n \r\n super.init(frame: frame)\r\n initializeView()\r\n }\r\n \r\n required init?(coder aDecoder: NSCoder) {\r\n \r\n super.init(coder: aDecoder)\r\n initializeView()\r\n }\r\n \r\n override func draw(_ rect: CGRect) {\r\n bufferImage?.draw(in: rect)\r\n drawLine()\r\n }\r\n \r\n private func drawLine() {\r\n \r\n UIColor.red.setStroke()\r\n bezierPathLine.stroke()\r\n }\r\n \r\n private func initializeView() {\r\n \r\n isMultipleTouchEnabled = false\r\n \r\n bezierPathLine = UIBezierPath()\r\n bezierPathLine.lineWidth = 4\r\n \r\n self.backgroundColor = UIColor.clear\r\n \r\n let panGesture = UIPanGestureRecognizer(target: self, action: #selector(viewDragged(_:)))\r\n addGestureRecognizer(panGesture)\r\n \r\n }\r\n \r\n func viewDragged(_ sender: UIPanGestureRecognizer) {\r\n \r\n let point = sender.location(in: self)\r\n \r\n if point.x < 0 || point.x > frame.width || point.y < 0 || point.y > frame.height {\r\n return\r\n }\r\n \r\n switch sender.state {\r\n \r\n case .began:\r\n bezierCurvePoints.append(point)\r\n break\r\n \r\n case .changed:\r\n \r\n bezierCurvePoints.append(point)\r\n\r\n if bezierCurvePoints.count == 5 {\r\n \r\n\r\n \/\/ Calculate center point of 3rd and 5th point\r\n let x1 = bezierCurvePoints[2].x\r\n let y1 = bezierCurvePoints[2].y\r\n \r\n let x2 = bezierCurvePoints[4].x\r\n let y2 = bezierCurvePoints[4].y\r\n \r\n \/\/ Replace 4th point with the calculated center point\r\n bezierCurvePoints[3] = CGPoint(x: (x1 + x2) \/ 2, y: (y1 + y2) \/ 2)\r\n \r\n \/\/ Draw arc between 1st and 4th point\r\n bezierPathLine.move(to: bezierCurvePoints[0])\r\n bezierPathLine.addCurve(to: bezierCurvePoints[3], controlPoint1: bezierCurvePoints[1], controlPoint2: bezierCurvePoints[2])\r\n \r\n let point1 = bezierCurvePoints[3]\r\n let point2 = bezierCurvePoints[4]\r\n \r\n bezierCurvePoints.removeAll()\r\n \r\n \/\/ Last two points will be starting two points for next arc.\r\n bezierCurvePoints.append(point1)\r\n bezierCurvePoints.append(point2)\r\n \r\n setNeedsDisplay()\r\n }\r\n \r\n break\r\n \r\n case .ended:\r\n \r\n saveBufferImage()\r\n \r\n bezierCurvePoints.removeAll()\r\n bezierPathLine.removeAllPoints()\r\n break\r\n default:\r\n break\r\n }\r\n }\r\n \r\n private func saveBufferImage() {\r\n UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, UIScreen.main.scale)\r\n if bufferImage == nil {\r\n let fillPath = UIBezierPath(rect: self.bounds)\r\n UIColor.clear.setFill()\r\n fillPath.fill()\r\n }\r\n bufferImage?.draw(at: .zero)\r\n drawLine()\r\n bufferImage = UIGraphicsGetImageFromCurrentImageContext()\r\n UIGraphicsEndImageContext()\r\n }\r\n}<\/pre>\n<\/p>\n
Compile and Run it. You will get some output like this:<\/p>\n
![\"freehand-drawing-3\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/04\/IMG_0249.jpg\")
<\/a><\/p>\nNow we have a smooth drawing.<\/p>\n
Create Arrow<\/h3>\n
Now, lets create an arrow head at the end of the line segment. for this we will use last two points to calculate three points to create an arrow.<\/p>\n
To calculate these points we will use following steps.<\/p>\n
- \n
- First we will convert this line segment(made by last two points) into unit vector and translate this unit vector to origin.\n
- \n
- calculate normal\n
- \n
- \n
normal = \u221a(dx\u00b2 + dy\u00b2)<\/pre>\n
![\"Freehand](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/05\/Freehand-Drawing-1.png\")
<\/a><\/li>\n<\/ul>\n<\/li>\n- calculate unit vector\n
- \n
- \n
udx = dx\/normal\r\nudy = dy\/normal<\/pre>\n
![\"Freehand](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2017\/05\/Freehand-Drawing-2.png\")
<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n- Now rotate this point `(udx, udy)` by 150\u00b0 clockwise and anti-clockwise.\n
- \n
- \n
\/\/ Rotate 150 degree clockwise to get first point\r\nax = (udx * cos(150)) - (udy * sin(150))\r\nay = (udx * sin(150)) + (udy * cos(150))\r\n \r\n\/\/ Rotate 150 degree anticlockwise to get second point\r\nbx = (udx * cos(150)) + (udy * sin(150))\r\nby = (-1 * udx * sin(150)) + (udy * cos(150))<\/pre>\n
- Now rotate this point `(udx, udy)` by 150\u00b0 clockwise and anti-clockwise.\n
- calculate unit vector\n
- \n
- calculate normal\n
- First we will convert this line segment(made by last two points) into unit vector and translate this unit vector to origin.\n