15,881,424 members
Articles / Multimedia / GDI

# Drawing Arrows

Rate me:
30 Nov 2002 226.7K   7.1K   51   44
How to draw arrows (with arrowheads) to an arbitrary DC

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

A list of licenses authors might use can be found here.

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

 First PrevNext
 Urgent Member 104154789-May-14 5:34 Member 10415478 9-May-14 5:34
 My vote of 5 Manoj Kumar Choubey22-Feb-12 0:02 Manoj Kumar Choubey 22-Feb-12 0:02
 Some suggestions herohuyongtao8-Oct-11 20:52 herohuyongtao 8-Oct-11 20:52
 Correcting the math for better arrow heads bstrack17-Feb-10 8:09 bstrack 17-Feb-10 8:09
 question Luo Rui4-Dec-06 2:24 Luo Rui 4-Dec-06 2:24
 Freaks out in release mode mark-w24-Sep-06 8:30 mark-w 24-Sep-06 8:30
 Re: Freaks out in release mode mark-w24-Sep-06 8:55 mark-w 24-Sep-06 8:55
 Re: Freaks out in release mode Jamie Hale25-Sep-06 4:23 Jamie Hale 25-Sep-06 4:23
 Re: Freaks out in release mode mark-w30-Sep-06 19:30 mark-w 30-Sep-06 19:30
 Re: Freaks out in release mode ClemensR18-Sep-07 5:10 ClemensR 18-Sep-07 5:10
 Re: Freaks out in release mode kkokkal14-Jan-08 20:23 kkokkal 14-Jan-08 20:23
 Just another approach prcarp10-May-06 3:27 prcarp 10-May-06 3:27
 Re: Just another approach rsantos0123-Nov-06 4:54 rsantos01 23-Nov-06 4:54
 I am looking for a simple MFC Control with Draw Area p2002ad25-May-05 6:14 p2002ad 25-May-05 6:14
 Length of arrow Hemant kulkarni2-Dec-02 20:11 Hemant kulkarni 2-Dec-02 20:11
 Re: Length of arrow Philippe Lhoste2-Dec-02 23:07 Philippe Lhoste 2-Dec-02 23:07
 Re: Length of arrow Philippe Lhoste3-Dec-02 1:53 Philippe Lhoste 3-Dec-02 1:53
 Re: Length of arrow Jamie Hale3-Dec-02 4:50 Jamie Hale 3-Dec-02 4:50
 Re: Length of arrow Jamie Hale3-Dec-02 4:51 Jamie Hale 3-Dec-02 4:51
 Height of the arrowhead MetalRob14-Nov-10 23:48 MetalRob 14-Nov-10 23:48
 Re: Height of the arrowhead Jamie Hale15-Nov-10 0:00 Jamie Hale 15-Nov-10 0:00
 Re: Height of the arrowhead MetalRob15-Nov-10 0:17 MetalRob 15-Nov-10 0:17
 Re: Height of the arrowhead MetalRob15-Nov-10 0:18 MetalRob 15-Nov-10 0:18
 Another way: matrix transformation (don't be scared it's easy!) :) Damir Valiulin2-Dec-02 13:05 Damir Valiulin 2-Dec-02 13:05
 Re: Another way: matrix transformation (don't be scared it's easy!) :) Jamie Hale3-Dec-02 4:48 Jamie Hale 3-Dec-02 4:48
 Last Visit: 31-Dec-99 18:00     Last Update: 18-Apr-24 23:18 Refresh 12 Next ᐅ