Drawing an ArrowLine

Website : www.mayankmalik.cjb.net

Environment: VC 5-6 , Windows 95/98/2000/NT/Me

Recently I had to develop a Graphics Software and wanted to add support for drawing an Arrow Line / Measuring Line. This was essential for the software and I had no option but to go over my trigonometry fundas. After churning for a couple of hours , I came up with this technique for drawing arrowheads at the end of a line.

The Lines are drawn when you drag the mouse . The drawing mode used is R2_NOT .As long as the user is dragging the mouse , the Line is refreshing itself (by redrawing) . You need to include "math.h" in your View.cpp file .

This checks when the User Starts dragging the mouse :

void CPolygonsView::OnLButtonDown(UINT nFlags, CPoint point) 
  m_Drag = true;   // for mouse drag check
  PointOrigin = point;  // value when mouse drag starts
  CView::OnLButtonDown(nFlags, point);

void CPolygonsView::OnLButtonUp(UINT nFlags, CPoint point) 

  m_Drag = false;  // for mouse drag check
  CView::OnLButtonUp(nFlags, point);

All the drawing is invoked by the MouseMove function . First the previously drawn Line is erased (by redrawing over it - using R2_NOT) and then the new Line is drawn using the new coordinates.

The loop computes all the other coordinates using these elements and draws lines connecting one vertex to the other.

void CPolygonsView::OnMouseMove(UINT nFlags, CPoint point) 
  if (m_Drag && PointOrigin!=point) // for mouse drag check
    CClientDC ClientDC(this);  // graphics
    if (MotionFix) DrawArrow(&ClientDC,PointOrigin,PointOld);
 // MotionFix is used to prevent redrawing in case it is the 
 // First Element 
  PointOld = point;
  CView::OnMouseMove(nFlags, point);

ok , that was the easy part , now the actual computation is done in the DrawArrow Function

void DrawArrow(CDC *pdc,CPoint m_One, CPoint m_Two)
  double slopy , cosy , siny;
  double Par = 10.0;  //length of Arrow (>)
  slopy = atan2( ( m_One.y - m_Two.y ),
    ( m_One.x - m_Two.x ) );
  cosy = cos( slopy );
  siny = sin( slopy ); //need math.h for these functions

  //draw a line between the 2 endpoint
  pdc->MoveTo( m_One );
  pdc->LineTo( m_Two );
  //here is the tough part - actually drawing the arrows
  //a total of 6 lines drawn to make the arrow shape
  pdc->MoveTo( m_One);
  pdc->LineTo( m_One.x + int( - Par * cosy - ( Par / 2.0 * siny ) ),
    m_One.y + int( - Par * siny + ( Par / 2.0 * cosy ) ) );
  pdc->LineTo( m_One.x + int( - Par * cosy + ( Par / 2.0 * siny ) ),
    m_One.y - int( Par / 2.0 * cosy + Par * siny ) );
  pdc->LineTo( m_One );
  /*/-------------similarly the the other end-------------/*/
  pdc->MoveTo( m_Two );
  pdc->LineTo( m_Two.x + int( Par * cosy - ( Par / 2.0 * siny ) ),
    m_Two.y + int( Par * siny + ( Par / 2.0 * cosy ) ) );
  pdc->LineTo( m_Two.x + int( Par * cosy + Par / 2.0 * siny ),
    m_Two.y - int( Par / 2.0 * cosy - Par * siny ) );
  pdc->LineTo( m_Two );


Download demo project - 88 Kb
Download source - 22 Kb


  • Unable to understand the code!

    Posted by Dick on 04/24/2012 04:48am

    pdc-LineTo( m_One.x + int( - Par * cosy - ( Par / 2.0 * siny ) ), m_One.y + int( - Par * siny + ( Par / 2.0 * cosy ) ) ); pdc-LineTo( m_One.x + int( - Par * cosy + ( Par / 2.0 * siny ) ), m_One.y - int( Par / 2.0 * cosy + Par * siny ) ); I can't understand this part of the code,either!I would be very grateful if you could explain it.

  • The mathematical formula?

    Posted by vanzyf on 07/14/2011 10:27pm

      I don`t understand the mathematical formula, please explain it.
      Thank you!

  • I don`t understand mathematical formula!

    Posted by vanzyf on 07/14/2011 10:24pm

      I don`t understand mathematical formula, please explain it.
      Thank you!

  • Mathematical formula?

    Posted by Legacy on 12/03/2003 12:00am

    Originally posted by: Ox

    Plese explain mathematical, the formula u use for draw the arrow, and can u show how long it is the arrow?

  • VB Equivalent?

    Posted by Legacy on 12/17/2002 12:00am

    Originally posted by: Makarand

    Hi do u have a VB equivalent version of the code?
    Also i need only one directional arrow and is there a way to select the line with arrow and delete it?

  • CSrollView problems...

    Posted by Legacy on 10/22/2002 12:00am

    Originally posted by: Pk Reddy

    I am trying to implement drawing of an arrow using mouse in a scroll view and have implemented automatic scrolling of scroll view when the mouse moves out of its bounds.
    I am having a few problems in getting the arrow drawn correctly when the view is scrolled. The initial point loses it focus and continues to be drawn in the view which is visible. Can someone implement a program to show how we can draw an arrow in a scroll view with automatic scrolling.

  • How to change the angle of arrow?

    Posted by Legacy on 07/19/2002 12:00am

    Originally posted by: wham

    I couldn't find the angle parameter in your arithmetic.
    Would you please tell me how to change?

  • Is there a way to do color?

    Posted by Legacy on 07/13/2002 12:00am

    Originally posted by: Tenalibabu

    This is a really good idea but it fails when you try to select a pen and draw colored lines

    For example i added this.

    //r, g, b, m_iPenwidth are integer values
    CPen m_pCurpen(PS_SOLID, m_iPenwidth, RGB(r,g,b));

    When using a pen you cannot use the code R2_NOT for ROP2.

    Is there a way to draw colored lines? I've tried all the ROP2 codes (R2_NOT, NOTMASKPEN, MASKPEN, etc)

    Can someone help?

  • We need more guys like you

    Posted by Legacy on 04/23/2002 12:00am

    Originally posted by: Alex Ndungu

    You have saved a friend of mine a load of trouble. You will be duly acknowledged.

  • Geronimo

    Posted by Legacy on 03/20/2002 12:00am

    Originally posted by: Javed Lodhi

    Good work. I know what it takes to even draw a single arrow.

  • Loading, Please Wait ...

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • In support of their business continuity and disaster recovery plans, many midsized companies endeavor to avoid putting all their eggs in one basket. Understanding the critical role of last-mile connectivity and always available Internet access for their enterprises, savvy firms utilize redundant connections from multiple service providers. Despite the good intentions, their Internet connectivity risk may still be in a single basket. That is because internet service providers (ISPs) and competitive local …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds