One of the most common issues in drawing apps is that the polylines appears jagged when drawn quickly. Such flaws create unfavorable impact on the application as well developers. Apps developed for IPhone, which is one of the premium devices in the world; must encompass all the development aspects, may it be a major bug as in Apple Map or as simple as jagged polylines in drawing apps.
Drawing lines are one of the most common features in iOS apps. It can be used for numerous purposes such as putting a signature in PDFs and images, drawing line graphs, preparing presentations with sketches and many more. Most of the iOS applications generate jaggy lines when drawn quickly. On the other hand, smooth lines facilitate uses with the convenience to draw quickly and without affecting the practicality of the application.
Below are the steps to follow how to draw smooth lines in iOS apps.
Contents
1. Add UIImage View
First of all we need to add UIImageView to a UIView.
SmoothLineViewController.h: @property (nonatomic, readwrite, retain) IBOutlet UIImageView *imageView; Then we’ll @synthesize this property in SmoothLineViewController.m: @synthesize imageView=imageView_;
Finally, we’ll use the Interface Builder to add the UIImageView component to SmoothLineViewControllerr.xib
2. Handling Touches
Now we are ready to write code for handle touches and draw polylines. We’ll need to declare the following member variables in the header:
CGPoint previousPoint;
NSMutableArray *drawnPoints;
UIImage *cleanImage;
add the method to the class:
/** This method draws a line to an image and returns the resulting image */
- (UIImage *)drawLineFromPoint:(CGPoint)from_Point toPoint:(CGPoint)to_Point image:(UIImage *)image
{
CGSize sizeOf_Screen = self.view.frame.size;
UIGraphicsBeginImageContext(sizeOf_Screen);
CGContextRef current_Context = UIGraphicsGetCurrentContext();
[image drawInRect:CGRectMake(0, 0, sizeOf_Screen.width, sizeOf_Screen.height)];
CGContextSetLineCap(current_Context, kCGLineCapRound);
CGContextSetLineWidth(current_Context, 1.0);
CGContextSetRGBStrokeColor(current_Context, 1, 0, 0, 1);
CGContextBeginPath(current_Context);
CGContextMoveToPoint(current_Context, from_Point.x, from_Point.y);
CGContextAddLineToPoint(current_Context, to_Point.x, to_Point.y);
CGContextStrokePath(current_Context);
UIImage *rect = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return rect;
}
drawLineFromPoint:to_Point:image is a simple utility method that draws a line over a UIImage and returns the resulting UIImage.
Now UIResponder‘s touch handling methods will be overridden:
- (void)touchesBegan:(NSSet *)_touches withEvent:(UIEvent *)_event
{
// retrieve the touch point
UITouch *_touch = [_touches anyObject];
CGPoint current_Point = [_touch locationInView:self.view];
// Its record the touch points to use as input to our line smoothing algorithm
drawn_Points = [[NSMutableArray arrayWithObject:[NSValue valueWithCGPoint:current_Point]] retain];
previous_Point = current_Point;
// we need to save the unmodified image to replace the jagged polylines with the smooth polylines
clean_Image = [imageView_.image retain];
}
- (void)touchesMoved:(NSSet *)_touches withEvent:(UIEvent *)_event
{
UITouch *_touch = [_touches anyObject];
CGPoint current_Point = [_touch locationInView:self.view];
[drawnPoints addObject:[NSValue valueWithCGPoint:current_Point]];
imageView_.image = [self drawLineFromPoint:previous_Point toPoint:current_Point image:imageView_.image];
previous_Point = current_Point;
}
3. Simply Polyline
We need to find a similar polyline, but with fewer vertices. This is necessary because we cannot interpolate between vertices to generate a nice smooth polyline if they are placed too close to each other. I use the “Ramer–Douglas–Peucker” algorithm for this. Alternatively, Lang’s simplification algorithm or any other polyline simplification algorithms would work.
We’ll begin by adding the following utility method:
/** Draws a path to an image and returns the resulting image */
- (UIImage *)drawPathWithPoints:(NSArray *)points image:(UIImage *)image
{
CGSize screenSize = self.view.frame.size;
UIGraphicsBeginImageContext(screenSize);
CGContextRef currentContext = UIGraphicsGetCurrentContext();
[image drawInRect:CGRectMake(0, 0, screenSize.width, screenSize.height)];
CGContextSetLineCap(currentContext, kCGLineCapRound);
CGContextSetLineWidth(currentContext, 1.0);
CGContextSetRGBStrokeColor(currentContext, 0, 0, 1, 1);
CGContextBeginPath(currentContext);
int count = [points count];
CGPoint point = [[points objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(currentContext, point.x, point.y);
for(int i = 1; i < count; i++) {
point = [[points objectAtIndex:i] CGPointValue];
CGContextAddLineToPoint(currentContext, point.x, point.y);
}
CGContextStrokePath(currentContext);
UIImage *ret = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return ret;
}
drawPathWithPoints:image is similar to our line drawing method above, except it draws a polyline, given an array of vertices.
We’ll also add an Objective-C implementation of Wikipedia’s pseudo code for the Ramer–Douglas–Peucker algorithm:
- (NSArray *)douglasPeucker:(NSArray *)points epsilon:(float)epsilon
{
int count = [points count];
if(count < 3) {
return points;
}
//Find the point with the maximum distance
float dmax = 0;
int index = 0;
for(int i = 1; i < count - 1; i++) {
CGPoint point = [[points objectAtIndex:i] CGPointValue];
CGPoint lineA = [[points objectAtIndex:0] CGPointValue];
CGPoint lineB = [[points objectAtIndex:count - 1] CGPointValue];
float d = [self perpendicularDistance:point lineA:lineA lineB:lineB];
if(d > dmax) {
index = i;
dmax = d;
}
}
//If max distance is greater than epsilon, recursively simplify
NSArray *resultList;
if(dmax > epsilon) {
NSArray *recResults1 = [self douglasPeucker:[points subarrayWithRange:NSMakeRange(0, index + 1)] epsilon:epsilon];
NSArray *recResults2 = [self douglasPeucker:[points subarrayWithRange:NSMakeRange(index, count - index)] epsilon:epsilon];
NSMutableArray *tmpList = [NSMutableArray arrayWithArray:recResults1];
[tmpList removeLastObject];
[tmpList addObjectsFromArray:recResults2];
resultList = tmpList;
} else {
resultList = [NSArray arrayWithObjects:[points objectAtIndex:0],
[points objectAtIndex:count - 1],nil];
}
return resultList;
}
- (float)perpendicularDistance:(CGPoint)point lineA:(CGPoint)lineA lineB:(CGPoint)lineB
{
CGPoint v1 = CGPointMake(lineB.x - lineA.x, lineB.y - lineA.y);
CGPoint v2 = CGPointMake(point.x - lineA.x, point.y - lineA.y);
float lenV1 = sqrt(v1.x * v1.x + v1.y * v1.y);
float lenV2 = sqrt(v2.x * v2.x + v2.y * v2.y);
float angle = acos((v1.x * v2.x + v1.y * v2.y) / (lenV1 * lenV2));
return sin(angle) * lenV2;
}
CGPoint v1 = CGPointMake(lineB.x – lineA.x, lineB.y – lineA.y);
If you have difficulty for understanding the code above, refer to Wikipedia’s explanation and pseudo code of the algorithm. Now we’ll also override UIResponder‘stouchesEnded:withEvent method to add post-processing instructions for our polyline:
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
NSArray *generalizedPoints = [self douglasPeucker:drawnPoints epsilon:2];
imageView_.image = [self drawPathWithPoints:generalizedPoints image:cleanImage];
[drawnPoints release];
[cleanImage release];
}
The method computes a simplified polyline, using our recorded touch points, drawn Points, as the input to Ramer–Douglas–Peucker algorithm, and replaces the jaggy polyline with the simplified polyline.
Also Read; How To Use Service Oriented Architecture In IOS Swift
If you try running the app now, you would see your polylines being replaced by more jaggy polylines. That’s expected.
4. Smooth Polyline
Now that we have a simplified polyline, we are ready to interpolate the points between the vertices for a nice smooth curve. Add the following method to the class:
- (NSArray *)catmullRomSpline:(NSArray *)points segments:(int)segments
{
int count = [points count];
if(count < 4) {
return points;
}
float b[segments][4];
{
// precompute interpolation parameters
float t = 0.0f;
float dt = 1.0f/(float)segments;
for (int i = 0; i < segments; i++, t+=dt) {
float tt = t*t;
float ttt = tt * t;
b[i][0] = 0.5f * (-ttt + 2.0f*tt - t);
b[i][1] = 0.5f * (3.0f*ttt -5.0f*tt +2.0f);
b[i][2] = 0.5f * (-3.0f*ttt + 4.0f*tt + t);
b[i][3] = 0.5f * (ttt - tt);
}
}
NSMutableArray *resultArray = [NSMutableArray array];
{
int i = 0; // first control point
[resultArray addObject:[points objectAtIndex:0]];
for (int j = 1; j < segments; j++) {
CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
CGPoint pointIp2 = [[points objectAtIndex:(i + 2)] CGPointValue];
float px = (b[j][0]+b[j][1])*pointI.x + b[j][2]*pointIp1.x + b[j][3]*pointIp2.x;
float py = (b[j][0]+b[j][1])*pointI.y + b[j][2]*pointIp1.y + b[j][3]*pointIp2.y;
[resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
}
}
for (int i = 1; i < count-2; i++) {
// the first interpolated point is always the original control point
[resultArray addObject:[points objectAtIndex:i]];
for (int j = 1; j < segments; j++) {
CGPoint pointIm1 = [[points objectAtIndex:(i - 1)] CGPointValue];
CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
CGPoint pointIp2 = [[points objectAtIndex:(i + 2)] CGPointValue];
float px = b[j][0]*pointIm1.x + b[j][1]*pointI.x + b[j][2]*pointIp1.x + b[j][3]*pointIp2.x;
float py = b[j][0]*pointIm1.y + b[j][1]*pointI.y + b[j][2]*pointIp1.y + b[j][3]*pointIp2.y;
[resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
}
}
{
int i = count-2; // second to last control point
[resultArray addObject:[points objectAtIndex:i]];
for (int j = 1; j < segments; j++) {
CGPoint pointIm1 = [[points objectAtIndex:(i - 1)] CGPointValue];
CGPoint pointI = [[points objectAtIndex:i] CGPointValue];
CGPoint pointIp1 = [[points objectAtIndex:(i + 1)] CGPointValue];
float px = b[j][0]*pointIm1.x + b[j][1]*pointI.x + (b[j][2]+b[j][3])*pointIp1.x;
float py = b[j][0]*pointIm1.y + b[j][1]*pointI.y + (b[j][2]+b[j][3])*pointIp1.y;
[resultArray addObject:[NSValue valueWithCGPoint:CGPointMake(px, py)]];
}
}
// the very last interpolated point is the last control point
[resultArray addObject:[points objectAtIndex:(count - 1)]];
return resultArray;
}
All credits go to supersg559 for the implementation Catmull-Rom Spline algorithm above. I merely modified it to use NSArrays instead of C-arrays. A good explanation of the algorithm can be found on “The Code Project”.
Finally, modify touchesEnded:withEvent: to use this algorithm:
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
NSArray *generalizedPoints = [self douglasPeucker:drawnPoints epsilon:2];
NSArray *splinePoints = [self catmullRomSpline:generalizedPoints segments:4];
imageView_.image = [self drawPathWithPoints:splinePoints image:cleanImage];
[drawnPoints release];
[cleanImage release];
}
That’s it. You’re done!
It would facilitate them to put fine-looking signatures, draw beautiful sketches and make impressive presentations.
Have something to add to this topic? Share it in the comments.
At Andolasoft we have a team dedicated iOS app developer who has long expertise in implementation of Service Oriented Architecture. Our developers can help you in all your mobile app development issues. So don’t hesitate to communicate with them. Book a free consultation to access them directly.
