Image Markup iOS
A simple iOS app for drawing on images using UIGraphicsImageRenderer
As Martin Rubin once said
Only a blank page needs no editing
While working with images in iOS, we might come across the need to mark an image or draw something on an image. After going through a lot of articles, documentations and different tutorials on the internet , I was able to design a simple markup app for iOS.
This is the first part of the complete app which focuses on how to draw on an image. The second part focuses on drawing shapes, specifically arrows and more drawing options.
So, Lets get started !
Part 1
First of all we will setup our canvasView to match our image dimensions so that the user will be able to draw over the image only.
Then we will add an image layer to our canvasView for editing.
As we will create our DrawingView as a UIView() so we will initialize our view with the following code.
Now from our UIViewController we will prepare our drawing view (This can vary according to your implementation ). Create a variable drawingBoard of type DrawingView. Then we will add the drawingBoard to our main view.
Now lets focus on the functions that will actually draw on the image.There are three main functions that comprises of the drawing logic
- touchesBegan:
In the above code block, lastPoint is the last known point of the line to draw.
We add this path to a CAShapeLayer and add this new layer as a sublayer of the canvasView and this way we get images (layers) for each individual drawing.
2. drawLine:
As we can see, drawLine uses a simple logic using a start and end point to draw a line between them. We use a Pen object to set the drawing parameters of the line. We can create an object Pen for setting the colour, lineWidth and other characteristics.
The most important thing is to check if the point is within the canvasView’s bounds so that the line is drawn on the image only and not out from it’s bounds.
3. touchesEnded:
We create a renderer equal to the bounds of the canvasView and the reason for that is, we need to keep renderer aspect ratio to that of the canvasView (which is equal to that of our original image) and render the added sublayers when the touch ends.
Voila! We are now able draw on our image. It looks something like this.
Oops !! I made a mistake while drawing on the image? How can i undo that?
Well that is what we are going to implement now, the option to undo your last marking on the image.
The above code block is the simple solution to remove our last marking from image and can be used by the tap of a button.
So now our app works something like this.
This is a very simple example of how we draw on an image, this code can be further expanded and refactored to give the user more drawing options like drawing an arrow or changing pen colour and size. These options will be covered in Part 2.
I hope you liked it! Follow me for more interesting topics and tutorials.
Thanks for the read !
