How to draw a line type with arrows in flex

There is no direct arrow-linear method for drawing in flex.

How can we draw lines with arrows?

In two steps:

1. Draw a line, which is very simple.

2. Draw arrows. This step is troublesome, because when drawing arrows, the lines need to be rotated, And the arrows also need to be rotated. In this way, the coordinates must be calculated dynamically.

Below is my implementationCode.

 

Code
Package customer
{
Import flash. Geom. Point;

Import MX. Core. uicomponent;

Public class mytriangle extends uicomponent
{
Public Function Mytriangle ()
{
Super ();
}

// Arrow size
Public VaR RADIUS: Int = 6 ;
Public VaR Frompoint: point;
Public VaR Topoint: point;
// Linear color
Public VaR Linecolor: uint = Zero X 000000 ;
// Need to draw arrows?
Public VaR Needarrow: Boolean = True ;

Private Function Getangle (): Int
{
VaR Tmpx: Int = Topoint. x - Frompoint. X;
VaR Tmpy: Int = Frompoint. Y - Topoint. Y;
VaR Angle: Int = Math. atan2 (tmpy, tmpx) * ( 180 / Math. Pi );
Return Angle;
}

// Draw line
Public Function Draw (): Void
{
This . Graphics. Clear ();
This . Graphics. linestyle ( 1 , Linecolor, 1 );
This . Graphics. moveTo (frompoint. X, frompoint. y );
This . Graphics. lineto (topoint. X, topoint. y );

If (Needarrow)
{
VaR Angle: Int   = Getangle ();
VaR Centerx: Int = Topoint. x - Radius * Math. Cos (Angle * (Math. Pi / 180 ));
VaR Centery: Int = Topoint. Y + Radius * Math. Sin (Angle * (Math. Pi / 180 ));
VaR Topx: Int = Topoint. X;
VaR Topy: Int = Topoint. Y;

VaR Leftx: Int = Centerx + Radius * Math. Cos (Angle + 120 ) * (Math. Pi / 180 ));
VaR Lefty: Int = Centery - Radius * Math. Sin (Angle + 120 ) * (Math. Pi / 180 ));

VaR Rightx: Int = Centerx + Radius * Math. Cos (Angle + 240 ) * (Math. Pi / 180 ));
VaR Righty: Int = Centery - Radius * Math. Sin (Angle + 240 ) * (Math. Pi / 180 ));

This . Graphics. beginfill (linecolor, 1 );

This . Graphics. linestyle ( 1 , Linecolor, 1 );

This . Graphics. moveTo (topx, topy );
This . Graphics. lineto (leftx, lefty );

This . Graphics. lineto (centerx, centery );

This . Graphics. lineto (rightx, righty );
This . Graphics. lineto (topx, topy );

This . Graphics. endfill ();
}
}


}
}

 

Test code:

 

Code
<? XML version = "1.0" encoding = "UTF-8" ?>
< MX: Application Xmlns: MX = "Http://www.adobe.com/2006/mxml" Layout = "Absolute" Creationcomplete = "Init ();" Backgroundgradientalphas = "[1.0, 1.0]" Backgroundgradientcolors = "[# Fcfcfc, # fcfcfc]" >
< MX: script >
<! [CDATA [

Import MX. Controls. Alert;
Import customer. mytriangle;

VaR begin: Boolean = false;
VaR TMP: mytriangle;
VaR frompoint: point;


Private function mousedownhandler (E: mouseevent): void
{
Begin = true;
Frompoint = new point (mousex, Mousey );
TMP = new mytriangle ();
TMP. radius = 4;
TMP. needarrow = true;
Mycanvas. addchild (TMP );
}

Private function mousemovehandler (E: mouseevent): void
{
If (BEGIN)
{
VaR topoint: Point = new point (mousex, Mousey );
TMP. frompoint = frompoint;
TMP. topoint = topoint;
TMP. Draw ();
}
}

Private function mouseoverhandler (E: mouseevent): void
{
Begin = false;
}


]>
</ MX: script >
< MX: canvas X = "0" Y = "0" Width = "100%" ID = "Mycanvas" Height = "100%" Mouseup = "Mouseoverhandler (event )" Mousedown = "Mousedownhandler (event )" Mousemove = "Mousemovehandler (event );" >
</ MX: canvas >

</ MX: Application >