Click here to Skip to main content
15,881,938 members
Articles / Multimedia / GDI

Drawing Arrows

Rate me:
Please Sign up or sign in to vote.
4.56/5 (22 votes)
30 Nov 2002 226.7K   7.1K   51   44
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:

C++
// 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:

C++
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.


Written By
Web Developer
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalnice, but GDI+ can do it better Pin
afisser2-Dec-02 2:15
afisser2-Dec-02 2:15 
GeneralRe: nice, but GDI+ can do it better Pin
Jamie Hale2-Dec-02 5:27
Jamie Hale2-Dec-02 5:27 
GeneralRe: nice, but GDI+ can do it better Pin
Philippe Lhoste2-Dec-02 23:01
Philippe Lhoste2-Dec-02 23:01 
GeneralFirst non-joke thread! Pin
Nish Nishant1-Dec-02 14:11
sitebuilderNish Nishant1-Dec-02 14:11 
GeneralRe: First non-joke thread! Pin
Shog91-Dec-02 15:07
sitebuilderShog91-Dec-02 15:07 
GeneralRe: First non-joke thread! Pin
Jamie Hale1-Dec-02 17:02
Jamie Hale1-Dec-02 17:02 
QuestionWhere are the other 7? Pin
Nish Nishant1-Dec-02 14:09
sitebuilderNish Nishant1-Dec-02 14:09 

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

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