Click here to Skip to main content
14,602,808 members

Drawing Arrows

Rate this:
4.56 (22 votes)
Please Sign up or sign in to vote.
4.56 (22 votes)
30 Nov 2002
How to draw arrows (with arrowheads) to an arbitrary DC

Sample Image - Arrows.jpg


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:

// 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

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

Image 2


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


  • December 1, 2002 - Created


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
No Biography provided

Comments and Discussions

QuestionUrgent Pin
Member 104154789-May-14 5:34
MemberMember 104154789-May-14 5:34 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey22-Feb-12 0:02
professionalManoj Kumar Choubey22-Feb-12 0:02 
SuggestionSome suggestions Pin
herohuyongtao8-Oct-11 20:52
Memberherohuyongtao8-Oct-11 20:52 
GeneralCorrecting the math for better arrow heads Pin
bstrack17-Feb-10 8:09
Memberbstrack17-Feb-10 8:09 
Generalquestion Pin
Luo Rui4-Dec-06 2:24
MemberLuo Rui4-Dec-06 2:24 
GeneralFreaks out in release mode Pin
mark-w24-Sep-06 8:30
Membermark-w24-Sep-06 8:30 
GeneralRe: Freaks out in release mode Pin
mark-w24-Sep-06 8:55
Membermark-w24-Sep-06 8:55 
GeneralRe: Freaks out in release mode Pin
Jamie Hale25-Sep-06 4:23
MemberJamie Hale25-Sep-06 4:23 
GeneralRe: Freaks out in release mode Pin
mark-w30-Sep-06 19:30
Membermark-w30-Sep-06 19:30 
AnswerRe: Freaks out in release mode Pin
ClemensR18-Sep-07 5:10
MemberClemensR18-Sep-07 5:10 
GeneralRe: Freaks out in release mode Pin
kkokkal14-Jan-08 20:23
Memberkkokkal14-Jan-08 20:23 
GeneralJust another approach Pin
prcarp10-May-06 3:27
Memberprcarp10-May-06 3:27 
Just for the folks who need to draw their own arrows, this was a method I used:

#define ARROW_SIZE	(5.0)
void DrawArrow(CDC *pDC, const CPoint& ptPoint, const CPoint& ptBase)
    double slopy , cosy , siny;

    slopy = atan2((double)(ptBase.y - ptPoint.y), (double)(ptBase.x - ptPoint.x));
    cosy = cos(slopy);
    siny = sin(slopy);

    CPoint pts[3];
    pts[0] = ptPoint;
    pts[1].x = ptPoint.x + (int)(ARROW_SIZE * cosy - (ARROW_SIZE / 2.0 * siny) + 0.5);
    pts[1].y = ptPoint.y + (int)(ARROW_SIZE * siny + (ARROW_SIZE / 2.0 * cosy) + 0.5);
    pts[2].x = ptPoint.x + (int)(ARROW_SIZE * cosy + ARROW_SIZE / 2.0 * siny + 0.5);
    pts[2].y = ptPoint.y - (int)(ARROW_SIZE / 2.0 * cosy - ARROW_SIZE * siny + 0.5);

    pDC->Polygon(pts, 3);

This is just FYI and somewhat related to this article. It's benefit is a little less floating point math. I picked it up a long time ago and modified it. I can't take credit as being the original author.
GeneralRe: Just another approach Pin
rsantos0123-Nov-06 4:54
Memberrsantos0123-Nov-06 4:54 
GeneralI am looking for a simple MFC Control with Draw Area Pin
p2002ad25-May-05 6:14
Memberp2002ad25-May-05 6:14 
GeneralLength of arrow Pin
Hemant kulkarni2-Dec-02 20:11
MemberHemant kulkarni2-Dec-02 20:11 
GeneralRe: Length of arrow Pin
Philippe Lhoste2-Dec-02 23:07
MemberPhilippe Lhoste2-Dec-02 23:07 
GeneralRe: Length of arrow Pin
Philippe Lhoste3-Dec-02 1:53
MemberPhilippe Lhoste3-Dec-02 1:53 
GeneralRe: Length of arrow Pin
Jamie Hale3-Dec-02 4:50
MemberJamie Hale3-Dec-02 4:50 
GeneralRe: Length of arrow Pin
Jamie Hale3-Dec-02 4:51
MemberJamie Hale3-Dec-02 4:51 
GeneralHeight of the arrowhead Pin
MetalRob14-Nov-10 23:48
MemberMetalRob14-Nov-10 23:48 
GeneralRe: Height of the arrowhead Pin
Jamie Hale15-Nov-10 0:00
MemberJamie Hale15-Nov-10 0:00 
GeneralRe: Height of the arrowhead Pin
MetalRob15-Nov-10 0:17
MemberMetalRob15-Nov-10 0:17 
GeneralRe: Height of the arrowhead Pin
MetalRob15-Nov-10 0:18
MemberMetalRob15-Nov-10 0:18 
GeneralAnother way: matrix transformation (don't be scared it's easy!) :) Pin
Damir Valiulin2-Dec-02 13:05
MemberDamir Valiulin2-Dec-02 13:05 
GeneralRe: Another way: matrix transformation (don't be scared it's easy!) :) Pin
Jamie Hale3-Dec-02 4:48
MemberJamie Hale3-Dec-02 4:48 

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.

Posted 30 Nov 2002


49 bookmarked