Draw arrow on line - iphone

Question

I have this code:
CGPoint arrowMiddle = CGPointMake((arrowOne.x + arrowTo.x)/2, (arrowOne.y + arrowTo.y)/2);
CGPoint arrowLeft = CGPointMake(arrowMiddle.x-40, arrowMiddle.y);
CGPoint arrowRight = CGPointMake(arrowMiddle.x, arrowMiddle.y + 40);
[arrowPath addLineToScreenPoint:arrowLeft];
[arrowPath addLineToScreenPoint:arrowMiddle];
[arrowPath addLineToScreenPoint:arrowRight];
[[mapContents overlay] addSublayer:arrowPath];
[arrowPath release];
with this output:
http://img517.yfrog.com/img517/7690/schermafbeelding2010032.png
What have i to add to get the left and right the at same degree of the line + 30°.
If someone has the algorithm of drawing an arrow on a line, pleas give it. It doesn't matter what programming language it is...
Thanks

Answer 1

Here is what you do. First, take the vector of the line and normalize it by dividing it by its length — this will give you a vector of length 1 pointing in the direction of the line. Next, multiply it by the length you need it to be. Turn it by 120° and -120° to make the arrow. Finally, offset it by the coordinates where you want it to be. Here is how it would look like in code:
// calculate the position of the arrow
CGPoint arrowMiddle;
arrowMiddle.x = (arrowOne.x + arrowTo.x) / 2;
arrowMiddle.y = (arrowOne.y + arrowTo.y) / 2;
// create a line vector
CGPoint v;
v.x = arrowTo.x - arrowOne.x;
v.y = arrowTo.y - arrowOne.y;
// normalize it and multiply by needed length
CGFloat length = sqrt(v.x * v.x + v.y * v.y);
v.x = 40 * (v.x / length);
v.y = 40 * (v.y / length);
// turn it by 120° and offset to position
CGPoint arrowLeft = CGPointApplyAffineTransform(v, CGAffineTransformMakeRotation(3.14 * 2 / 3));
arrowLeft.x = arrowLeft.x + arrowMiddle.x;
arrowLeft.y = arrowLeft.y + arrowMiddle.y;
// turn it by -120° and offset to position
CGPoint arrowRight = CGPointApplyAffineTransform(v, CGAffineTransformMakeRotation(-3.14 * 2 / 3));
arrowRight.x = arrowRight.x + arrowMiddle.x;
arrowRight.y = arrowRight.y + arrowMiddle.y;

Answer 2

Thanks for respond!
In the meanwhile I found also an solution.
It's Like this:
double slopy , cosy , siny;
double Par = 10.0; //length of Arrow (>)
slopy = atan2( ( arrowOne.y - arrowTo.y ),
( arrowOne.x - arrowTo.x ) );
cosy = cos( slopy );
siny = sin( slopy ); //need math.h for these functions
CGPoint arrowMiddle = CGPointMake((arrowOne.x + arrowTo.x)/2, (arrowOne.y + arrowTo.y)/2);
[arrowPath addLineToScreenPoint:arrowMiddle];
CGPoint arrowLeft = CGPointMake( arrowMiddle.x + round( - Par * cosy - ( Par / 2.0 * siny ) ), arrowMiddle.y + round( - Par * siny + ( Par / 2.0 * cosy ) ) );
[arrowPath addLineToScreenPoint:arrowLeft];
CGPoint arrowRight = CGPointMake( arrowMiddle.x + round( - Par * cosy + ( Par / 2.0 * siny ) ),arrowMiddle.y - round( Par / 2.0 * cosy + Par * siny ) );
[arrowPath addLineToScreenPoint:arrowRight];
[arrowPath addLineToScreenPoint:arrowMiddle];
[[mapContents overlay] addSublayer:arrowPath];
[arrowPath release];
The only problem here is that i draw it like it's an RMPath(route-me framework) and that the arrow gets bigger/smaller when you zoom in/out.
But thanks for respond, I will look into it which code is the most perform.