12,445,025 members (56,112 online)
alternative version

173.5K views
47 bookmarked
Posted

# Drawing Arrows

, 30 Nov 2002
 Rate this:
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:

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

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

## Share

No Biography provided

## You may also be interested in...

 Pro Pro

 First Prev Next
 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
 nice, but GDI+ can do it better afisser2-Dec-02 2:15 afisser 2-Dec-02 2:15
 Re: nice, but GDI+ can do it better Jamie Hale2-Dec-02 5:27 Jamie Hale 2-Dec-02 5:27
 Re: nice, but GDI+ can do it better Philippe Lhoste2-Dec-02 23:01 Philippe Lhoste 2-Dec-02 23:01
 First non-joke thread! Nishant S1-Dec-02 14:11 Nishant S 1-Dec-02 14:11
 Re: First non-joke thread! Shog91-Dec-02 15:07 Shog9 1-Dec-02 15:07
 Re: First non-joke thread! Jamie Hale1-Dec-02 17:02 Jamie Hale 1-Dec-02 17:02
 Where are the other 7? Nishant S1-Dec-02 14:09 Nishant S 1-Dec-02 14:09
 Last Visit: 31-Dec-99 18:00     Last Update: 23-Aug-16 22:17 Refresh 1