Click here to Skip to main content
Licence 
First Posted 30 Nov 2002
Views 136,071
Bookmarked 40 times

Drawing Arrows

By | 30 Nov 2002 | Article
How to draw arrows (with arrowheads) to an arbitrary DC.

Sample Image - Arrows.jpg

Excuse

Basically, there was a request for some code to draw arrows and I had never seen any. Plus, I'm not really in the mood to hang drapes or vacuum.

Using the code

This is a simple API for drawing lines with arrowheads. It looks like this:

// ARROWSTRUCT
//
// Defines the attributes of an arrow.
typedef struct tARROWSTRUCT {
    int nWidth;     // width (in pixels) of the full base of the arrowhead
    float fTheta;   // angle (in radians) at the arrow tip between the two
                    //  sides of the arrowhead
    bool bFill;     // flag indicating whether or not the arrowhead should be
                    //  filled
} ARROWSTRUCT;

// ArrowTo()
//
// Draws an arrow, using the current pen and brush, from the current position
//  to the passed point using the attributes defined in the ARROWSTRUCT.
void ArrowTo(HDC hDC, int x, int y, ARROWSTRUCT *pArrow);
void ArrowTo(HDC hDC, const POINT *lpTo, ARROWSTRUCT *pArrow);

Simply fill an ARROWSTRUCT with the desired attributes, make sure the current DC position is correct (MoveTo(), etc.), and call one of the two ArrowTo() functions. The size parameters (nWidth and fTheta) are defined as follows:

Technique

This goes back to high-school algebra and trigonometry. The ArrowTo() function first builds a vector of the full line. Then it calculates the points for the sides of the arrowhead based on the nWidth and fTheta attributes you pass. Badda-boom-badda-bing, you got your arrowhead.

Here's some pseudo-pseudocode:

lineVector = toPoint - fromPoint
lineLength = length of lineVector

// calculate point at base of arrowhead
tPointOnLine = nWidth / (2 * (tanf(fTheta) / 2) * lineLength);
pointOnLine = toPoint + -tPointOnLine * lineVector

// calculate left and right points of arrowhead
normalVector = (-lineVector.y, lineVector.x)
tNormal = nWidth / (2 * lineLength)
leftPoint = pointOnLine + tNormal * normalVector
rightPoint = pointOnLine + -tNormal * normalVector

History

  • December 1 2002 - Created.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Jamie Hale

Web Developer

Canada Canada

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralMy vote of 5 Pinmembermanoj kumar choubey0:02 22 Feb '12  
SuggestionSome suggestions Pinmemberherohuyongtao20:52 8 Oct '11  
GeneralCorrecting the math for better arrow heads Pinmemberbstrack8:09 17 Feb '10  
Generalquestion PinmemberLuo Rui2:24 4 Dec '06  
GeneralFreaks out in release mode Pinmembermark-w8:30 24 Sep '06  
GeneralRe: Freaks out in release mode Pinmembermark-w8:55 24 Sep '06  
GeneralRe: Freaks out in release mode PinmemberJamie Hale4:23 25 Sep '06  
GeneralRe: Freaks out in release mode Pinmembermark-w19:30 30 Sep '06  
AnswerRe: Freaks out in release mode PinmemberClemensR5:10 18 Sep '07  
GeneralRe: Freaks out in release mode Pinmemberkkokkal20:23 14 Jan '08  
GeneralJust another approach Pinmemberprcarp3:27 10 May '06  
GeneralRe: Just another approach Pinmemberrsantos014:54 23 Nov '06  
GeneralI am looking for a simple MFC Control with Draw Area Pinmemberp2002ad6:14 25 May '05  
GeneralLength of arrow PinmemberHemant kulkarni20:11 2 Dec '02  
GeneralRe: Length of arrow PinmemberPhilippe Lhoste23:07 2 Dec '02  
GeneralRe: Length of arrow PinmemberPhilippe Lhoste1:53 3 Dec '02  
GeneralRe: Length of arrow PinmemberJamie Hale4:50 3 Dec '02  
GeneralRe: Length of arrow PinmemberJamie Hale4:51 3 Dec '02  
GeneralHeight of the arrowhead PinmemberMetalRob23:48 14 Nov '10  
GeneralRe: Height of the arrowhead PinmemberJamie Hale0:00 15 Nov '10  
GeneralRe: Height of the arrowhead PinmemberMetalRob0:17 15 Nov '10  
GeneralRe: Height of the arrowhead PinmemberMetalRob0:18 15 Nov '10  
GeneralAnother way: matrix transformation (don't be scared it's easy!) :) PinmemberDamir Valiulin13:05 2 Dec '02  
GeneralRe: Another way: matrix transformation (don't be scared it's easy!) :) PinmemberJamie Hale4:48 3 Dec '02  
Generalnice, but GDI+ can do it better Pinmemberafisser2:15 2 Dec '02  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web03 | 2.5.120517.1 | Last Updated 1 Dec 2002
Article Copyright 2002 by Jamie Hale
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid