14,602,808 members

# Drawing Arrows

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

 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
 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.
 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: 7-Aug-20 9:10     Last Update: 7-Aug-20 9:10 Refresh 12 Next ᐅ