How can i improve arrowhead line drawing using CoreGraphics?

Question

In my app i have view where user can draw arrows. It works almost perfect. If i swipe slowly i have nice result. Image

Bu if i try to swipe faster i got the arrowhead somewhere but not at the very end of line. image

Sorry, due to my reputation i can't post images here.

How Can i improve arrowhead line drawing to draw however fast i swipe?

To do this i use next method -

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

mouseSwiped = YES;



UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self.view];

 UIGraphicsBeginImageContext(self.view.frame.size);
   [self.tempDrawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

  CGContextClearRect(UIGraphicsGetCurrentContext(),CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height));

   double slopy, cosy, siny;
   // Arrow size
   double length = 10.0;
   double width = 10.0;

   slopy = atan2((firstPoint.y - lastMovePoint.y), (firstPoint.x - lastMovePoint.x));
   cosy = cos(slopy);
   siny = sin(slopy);


   CGContextMoveToPoint(UIGraphicsGetCurrentContext(), firstPoint.x, firstPoint.y);
   CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
        //here is the tough part - actually drawing the arrows
   //a total of 6 lines drawn to make the arrow shape

   CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastMovePoint.x, lastMovePoint.y);

   CGContextAddLineToPoint(UIGraphicsGetCurrentContext(),
                           lastMovePoint.x +  (length * cosy - ( width / 2.0 * siny )),
                           lastMovePoint.y +  (length * siny + ( width / 2.0 * cosy )) );
   CGContextAddLineToPoint(UIGraphicsGetCurrentContext(),
                           lastMovePoint.x +  (length * cosy + width / 2.0 * siny),
                           lastMovePoint.y -  (width / 2.0 * cosy - length * siny) );
   CGContextClosePath(UIGraphicsGetCurrentContext());

   CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
   CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush );
   CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
   CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);

   CGContextStrokePath(UIGraphicsGetCurrentContext());
   self.tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext();
   [self.tempDrawImage setAlpha:opacity];
   UIGraphicsEndImageContext();

   lastMovePoint = currentPoint;

You might think about moving the path construction into its own function to simplify your code. You can use [this category on `UIBezierPath`](https://gist.github.com/4146780), which is explained [in this answer](http://stackoverflow.com/a/13559449/77567). — rob mayoff, Dec 26 '12 at 19:47

score 1 · Accepted Answer · answered Dec 26 '12 at 12:44

From my experience when drawing with core graphics, when swiping fast over a view, the distance between the points every time touchesMoved: gets called is larger, and I see that you are using a lastMovePoint which can be further than you'd like, giving you unwanted results. This does not happen when moving slowly and the distance between each point is minimal (sometimes even less than 1 point)

I suggest working only with the firstPoint and currentPoint, calculate the angle and draw the arrow using only that, because, when it comes to it, to draw a line you only need the first and last point, it doesn't matter where the user touched before :)

How can i improve arrowhead line drawing using CoreGraphics?

1 Answers1