How can I erase a line between two CGpoint? - ios

Question

I am creating a line in ipad as user touch the screen and and drag the finger. Problem is line is creating on every point in by (touchMoved:) we we drag it. But in last it should only one not many. How can I erase or remove last line after created new one? Here is my code:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
if(ArrowDraw==YES){
NSLog(#"ArrowDrawing");
if ([[event allTouches]count]==1){
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:FullImageView];
UIGraphicsBeginImageContext(self.view.frame.size);
[self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), firstPoint.x, firstPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 1 );
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
CGContextStrokePath(UIGraphicsGetCurrentContext());
self.tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext();
[self.tempDrawImage setAlpha:opacity];
UIGraphicsEndImageContext();
//firstPoint = currentPoint;
NSLog(#"TouchMoving x=%f y=%f",firstPoint.x,firstPoint.y);
}
UIGraphicsBeginImageContext(self.FullImageView.frame.size);
[self.FullImageView.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
[self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) blendMode:kCGBlendModeNormal alpha:opacity];
self.FullImageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.tempDrawImage.hidden=YES;
}
}

Answer 1

The key is to not update the image, but rather just draw the arrow on top of the image. Then replace the arrow with another as the touchesMoved come in.
For example, I might use the QuartzCore.framework by adding it to your target's "Link Binary With Libraries" and add the following line to the start of your .m:
#import <QuartzCore/QuartzCore.h>
Then you can define a new ivar for your CAShapeLayer:
CAShapeLayer *shapeLayer;
Finally, then update your touchesMoved to something like:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
if (ArrowDraw==YES){
if ([[event allTouches]count]==1) {
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:FullImageView];
if (!shapeLayer)
{
shapeLayer = [CAShapeLayer layer];
shapeLayer.lineWidth = 1;
shapeLayer.strokeColor = [[UIColor blackColor] CGColor];
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[FullImageView.layer addSublayer:shapeLayer];
}
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:firstPoint];
[path addLineToPoint:currentPoint];
shapeLayer.path = [path CGPath];
}
}
}
You can modify that UIBezierPath to include the arrowhead if you need that, too, for example:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
if (ArrowDraw==YES){
if ([[event allTouches]count]==1) {
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:FullImageView];
if (!shapeLayer) {
[self createShapeLayer];
}
shapeLayer.path = [[self arrowPathFrom:firstPoint to:currentPoint arrowheadSize:10.0] CGPath];
}
}
}
- (void)createShapeLayer
{
shapeLayer = [CAShapeLayer layer];
shapeLayer.lineWidth = 1;
shapeLayer.strokeColor = [[UIColor blackColor] CGColor];
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[FullImageView.layer addSublayer:shapeLayer];
}
- (UIBezierPath *)arrowPathFrom:(CGPoint)start to:(CGPoint)end arrowheadSize:(CGFloat)arrowheadSize
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:start];
[path addLineToPoint:end];
// add arrowhead
CGFloat angle = atan2(end.y - start.y, end.x - start.x) + M_PI * 3.0 / 4.0;
[path addLineToPoint:CGPointMake(cos(angle) * arrowheadSize + end.x, sin(angle) * arrowheadSize + end.y)];
[path addLineToPoint:end];
angle = atan2(end.y - start.y, end.x - start.x) - M_PI * 3.0 / 4.0;
[path addLineToPoint:CGPointMake(cos(angle) * arrowheadSize + end.x, sin(angle) * arrowheadSize + end.y)];
[path addLineToPoint:end];
return path;
}