Click here to Skip to main content
Click here to Skip to main content

Draw Straight and Curved Arrows

By , 30 Jan 2007
 

Sample Image - ArrowRenderer1.png

Sample application using ArrowRenderer routines. Drawing random colored curved arrows.

Sample Image - ArrowRenderer1.png

Another sample application that shows mouse cursor position using many arrows.

Introduction

This article presents some useful routines that help drawing custom arrows on any Graphics object. It allows to choose whether an arrow should be straight or curved. In the second case, the main arrow line is drawn using the Bezier curve.

Background

I know that any question about how to draw an arrow is probably answered quickly, advising the inquirer to read something about different line ending caps. That is true, however one doesn't have a big influence on how the final arrow will be like. Pissed about that, I decided to write my own library that allows a user to draw custom arrows both straight and curved.

Code

  • Width - Gets or sets width (in pixels) of the full base of the arrowhead
  • Theta - Gets or sets angle (in radians) at the arrow tip between the two sides of the arrowhead
  • FillArrowHead - Gets or sets flag indicating whether or not the arrowhead should be filled
  • NumberOfBezierCurveNodes - Gets or sets the number of nodes used to calculate the Bezier curve
  • DrawArrow - Renders the arrow on given graphics using desired parameters
  • DrawArrowOnCurve - Renders the curved arrow on given graphics using desired parameters
  • DrawArrows - Draws arrows between consecutive points

Points of Interest

This code is especially useful when graphs need to be rendered. DrawArrows is particularly useful for that.

Sample Usage

Last semester, I was developing a program that solves the Vehicle Routing Problem for a project at Operational Research. That approach used genetic algorithms. The following picture was generated using my renderer that utilizes, among others, the presented ArrowRenderer class. Grey circles represent depots, while red ones are cities that need to be visited. Arrows are used to show how the route should be performed.

Sample image

Credit

  • Routine that generates the Bezier curve nodes array is a refined version of the one found in "Beziers and Other Splines" chapter from "Programming Microsoft Windows with C#" by Charles Petzold.
  • Simple Vector structure was found long ago somewhere on the Internet. If you own this piece of code, please let me know so I can give you credit.

History

  • 30.01.2007 - First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Michal Brylka
Architect Nokia Siemens Networks
Poland Poland
Member
Michał is C# and whole .NET enthusiast. He graduated from computer science MSc studies at Wroclaw University of Technology, Poland.
 
He is interested in photography and diving. He is member of PADI, currently with divemaster certificate.

His favorite movies are Matrix, Amélie(Le Fabuleux Destin d'Amélie Poulain), Stargate SG-1 TV Serie and comedies of Mel Brooks.
 
Michał lives in Wroclaw, Poland. To contact Michał, email him at michal.brylka[mail-'"at'"-sign]op.pl.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralMy vote of 5membermanoj kumar choubey26 Feb '12 - 21:49 
nice
QuestionGood work.. small issue not resolvedmemberManoj Mathew6 Mar '09 - 12:29 
Am doing some serious graphics and am using panel controls. What I have observed is that these arrows get hidden behind these panels. I have tried a lot of different techniques to have the arrows to be on top but no success in that.
 
Any ideas or thoughts on this matter woule be appreciated.
 
BTW.. thanks for a good library and well written code.
 
Regards,
 
Max
GeneralDrawing custom arrowsmembercrockettk6 Apr '07 - 4:26 

Mark,
 
I am trying to add custom arrows like following images with limit knowledge on Beizer curves and the DrawArc function. Is this easy to do?
 
Example 1: http://www.softdevusa.com/portals/0/drawarc.gif[^]
 
Example 2: http://www.softdevusa.com/portals/0/biezer.gif[^]
 
Example 3: http://www.softdevusa.com/portals/0/drawarc2.gif[^]
 
Thanks,
 
-Kurt
 

GeneralRe: Drawing custom arrowsmemberMichal Brylka6 Apr '07 - 11:16 
Hi,
 
drawing custom arrows with my DrawArrowOnCurve method is really simple, although pictures you've placed links to, are not just arrows(the last one is no arrow at all). You are right that DrawArc will allow you to achieve such results. One of it's parameter is sweeping angle, which, in your cases would always be 180 degrees (pie(3.14) radians.) However, second picture is not that easy. Write yourself a program that renders Bezier curves based on 4 points and do some experiments with parameters.
 
Regards
 
Michał Bryłka

GeneralRe: Drawing custom arrowsmemberblue.it8x21 Feb '09 - 5:22 
Thank you!I very wants it
And I was found it! OMG | :OMG:
 
Liza

GeneralGreat bit of Codemembermatt_Altis28 Mar '07 - 23:21 
Thanks!
 
Matt
GeneralRe: Great bit of CodememberMichal Brylka29 Mar '07 - 9:05 
Thanks for you appreciation. Did you use this code somewhere specifically?
 
Michał Bryłka

GeneralRe: Great bit of Codemembermatt_Altis30 Mar '07 - 0:56 
Hi Michal,
I have a web app which draws graphs and I needed to put arrow heads on some lines. Your code worked a treat. Nicely written too!
Thanks again
Matt
GeneralRe: Great bit of CodememberMichal Brylka30 Mar '07 - 15:34 
Nice to hear that. Especially, due to the fact that this library was designed to draw both directed and undirected graphs. That was the reason to add curved arrows(directed graph's arc) and starting/ending offsets feature. Can you provide me with a link to your website?
 
Michał Bryłka

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

Permalink | Advertise | Privacy | Mobile
Web04 | 2.6.130516.1 | Last Updated 30 Jan 2007
Article Copyright 2007 by Michal Brylka
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid