spiralIcon

JSGS Shapes

TNTArrow

Your browser does not support HTML5 Canvas
Notes:

A very flexible object: look at the various presentations of a 'TNTArrow.' The 'head' of the arrow is assumed to be an equilateral triangle. There are 7 parameters to setup these shapes. Explore the code to see how they are assembled. Remember, the order of presentation and the data types of the parameters is profoundly important.

If you'd like it placed inside a circle, we have a wonderful TNTInscribedArrow for you! Be sure to check it out!

TNTArrow Features and Usage:
Primary Attributes:

7 Parameters:

  • tipCenter: TNTPoint
  • tipLength: a 'double'; the height of the equilateral 'tip' of the arrow (best seen in the magenta arrow above)
  • shankLength: a 'double'; the length of the arrow's shaft
  • shankThickness: a 'double'; the thickness of the arrow's shaft
  • fillColor: TNTColor as fcolr
  • stroke: a TNTStroke: to set the border color
  • rotn: a 'double' that rotates the shape about its center. rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The examples above were created by:

//special points/components
var center = origin.translate(5, 10);

//TNTGraphic Objects
var arrow1 = new TNTArrow(center, 2, 8, 1, yellow, blackStroke, 45);
arrow1.drawTNTArrow(context);

center = center.translate(-15, -10);
var arrow2 = new TNTArrow(center, 6, 8, 3, magenta, null, -30);
arrow2.showCenter = true;
arrow2.drawTNTArrow(context);

center = center.translate(12, -5);
var arrow3 = new TNTArrow(center, 4, 5, 8, darkGray, null, 0);
arrow3.drawTNTArrow(context);
To Draw: 
arrow3.drawTNTArrow(context);
Comments:

Positive angles are counter-clockwise, just like in math class
Even More:

Many TNT elements have a 'center' and with a adjustment of the showCenter boolean property, that center can be graphed to help you see specific placement. The magenta example above shows this in action