How to get the effect of a narrowing brush line in Objective-C using GraphicContext

Question

I am making a calligraphy application and would like to change my code below, so when the user finishes the brush stroke, the line narrows and smoothes out, like with a real calligraphy pen (flick effect). I understand that touchsEnded may be the best way to do this, however, I'm just wondering what the best way would be to programmatically make this click at the end of a move using CGRect or GraphicsContext in UIKit in Xcode for Objective C.

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { mouseSwiped = YES; UITouch *touch = [touches anyObject]; currentPoint = [touch locationInView:self.view]; UIGraphicsBeginImageContext(CGSizeMake(320, 568)); [drawImage.image drawInRect:CGRectMake(0, 0, 320, 568)]; CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0); CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0, 0, 0, 1); CGContextBeginPath(UIGraphicsGetCurrentContext()); CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y); CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y); CGContextStrokePath(UIGraphicsGetCurrentContext()); [drawImage setFrame:CGRectMake(0, 0, 320, 568)]; drawImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); lastPoint = currentPoint; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { //what code do I put here to get the flick effect - what CGGetContext Parameter //may be applicable or what programming technique may help with this. } 

Answer 1

This may be more simplistic, but it should guide you in the right direction. I'm going to make a triangle, but in the end you could add Bezier curves to make the effect more realistic.

 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { //what code do I put here to get the flick effect - what CGGetContext Parameter //may be applicable or what programming technique may help with this. UIGraphicsBeginImageContext(CGSizeMake(320, 568)); [drawImage.image drawInRect:CGRectMake(0, 0, 320, 568)]; CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, 5.0); CGContextSetRGBFillColor(context, 0, 0, 0, 1); CGContextBeginPath(context); CGContextBeginPath(context); CGContextMoveToPoint(context, lastPoint.x, lastPoint.y); CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y); CGContextClosePath(context); CGContextStrokePath(context); //Normalized directionality float lineLength = sqrt((currentPoint.x - lastPoint.x)*(currentPoint.x - lastPoint.x) + (currentPoint.y - lastPoint.y)*(currentPoint.y - lastPoint.y)); float dx = (currentPoint.x - lastPoint.x)/lineLength; float dy = (currentPoint.y - lastPoint.y)/lineLength; //Now make a triangle CGContextBeginPath(context); //2.5 is from 1/2 of your line width (5) CGContextMoveToPoint(context, currentPoint.x + 2.5*dy, currentPoint.y - 2.5*dx); //This 10 is completely arbitrary, the length your taper is going to be. //Ideally this will be proportional to your last line segment length, longer if their finger is moving faster... CGContextAddLineToPoint(context, currentPoint.x + 10*dx, currentPoint.y + 10*dy); //Now the last tip of the triangle CGContextMoveToPoint(context, currentPoint.x - 2.5*dy, currentPoint.y + 2.5*dx); CGContextClosePath(context); CGContextFillPath(context); [drawImage setFrame:CGRectMake(0, 0, 320, 568)]; drawImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); } 

Now, to make this cooler, you can add a curve that a person drew to the calculation and create your “triangular” cone with Bezier curves in the direction in which they bent. It really can be very interesting to calculate.