IPad smooth recording

Question

I am currently working on an iPad project where I need features that allow the user to write on a piece of paper with a stylus.

I tested a couple of styluses and found out that bamboo was the best. They also have a free application that you can use for writing.

The problem I am facing is that the method I use does not produce smooth curves. The bamboo paper app provides perfect lines. This is the code that I still have:

- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); UIGraphicsBeginImageContext(self.frame.size); // draw accumulated lines if ([self.lines count] > 0) { for (Line *tempLine in self.lines){ CGContextSetAlpha(context, tempLine.opacity); CGContextSetStrokeColorWithColor(context, tempLine.lineColor.CGColor); CGContextSetLineWidth(context, tempLine.lineWidth); CGContextSetLineCap(context, kCGLineCapRound); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextAddPath(context, tempLine.linePath); CGContextStrokePath(context); } } //draw current line CGContextSetAlpha(context, self.currentLine.opacity); CGContextSetStrokeColorWithColor(context, self.currentLine.lineColor.CGColor); CGContextSetLineWidth(context, self.currentLine.lineWidth); CGContextSetLineCap(context, kCGLineCapRound); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextBeginPath(context); CGContextAddPath(context, self.currentLine.linePath); CGContextStrokePath(context); UIGraphicsEndImageContext(); } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint cPoint = [touch locationInView:self]; CGPathMoveToPoint(self.currentLine.linePath, NULL, cPoint.x, cPoint.y); [self setNeedsDisplay]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint currentPoint = [touch locationInView:self]; CGPathAddLineToPoint(self.currentLine.linePath, NULL, currentPoint.x, currentPoint.y); [self setNeedsDisplay]; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint cPoint = [touch locationInView:self]; CGPathAddLineToPoint(self.currentLine.linePath, NULL, cPoint.x, cPoint.y); [self setNeedsDisplay]; [self.lines addObject:self.currentLine]; Line *nextLine = [[Line alloc] initWithOptions:self.currentLine.lineWidth color:self.currentLine.lineColor opacity:self.currentLine.opacity]; self.currentLine = nextLine; [nextLine release]; } 

Here are the images that make it clear what problems I am facing. This is the image that is generated when recording using the code above:

This image, if I write the same thing on a Mamboo paper application:

Does anyone have an idea how to get a nice email, for example, in the mamboo app?

Answer 1

Instead of connecting to points using straight lines ( CGPathAddLineToPoint ), you should try using Bezier curves: CGPathAddCurveToPoint or CGPathAddQuadCurveToPoint .

This is what smoothing will do.

---

If you are not familiar with Bezier curves , you will probably find a Wikipedia page about Bezier curves (not just mathematical equations, but look at sketches and animated images). This will give you a general idea of ​​how control points influence the smoothing of lines around the key points of your line.

For your case, there should be enough quadratic curves (only one control point for each sub-segment between your two key points).

(One line from P0 to P1, smoothed using breakpoint P1)

---

One example (out of the box, just a guess from my mind, never tested, didn't adapt the coefficients to your needs) to calculate this breakpoint C between each of your key points A and B to make AC, say, 2/3 of the length AB and (AB, AC) making an angle of 30 degrees or similar.

You can even suggest in the settings of your application to adjust the smoothing using the slider, which will affect the values ​​that you choose to calculate each control point, and see which coefficients are best suited.