spiralIcon

JSGS Shapes

TNTInscribedArrow

Your browser does not support HTML5 Canvas
Notes:

The advent of the TNTDisk, we could use it to 'contain' other shapes such as the TNTArrow. Check out the code for further details. Do this, noticing how many variations are shown above. Lots of variety! (Note the shape where the 'black hat' is outside the disk!)

This shape was implemented in a TNT design: Inscribed Arrow Topo Map.

TNTInscribedArrow Features and Usage:
Primary Attributes:

10 Parameters:

  • circleCenter: TNTPoint
  • radius: a positive real number
  • arrowTipLengthFactor: a 'double'; a fraction of the radius
  • arrowShankThicknessFactor: a 'double'; a fraction of the radius
  • arrowFillColor: TNTColor as fcolr
  • arrowStroke: a TNTStroke: to set the arrow border color
  • diskFillColor: TNTColor as fcolr
  • diskStroke: a TNTStroke: to set the disk border color
  • shiftFactor: a 'double'; a fraction of the radius
  • 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:

var center = origin
var mySymbol = new TNTInscribedArrow(center, 5, .9, 
    .35, red, null, pink, null, 0, 15);
mySymbol.showCenter = true;
mySymbol.drawTNTInscribedArrow(context);

var ptA = new TNTPoint(10, 10);
var mySymbol2 = new TNTInscribedArrow(ptA, 3, .5, 
    .15, gold, null, null, blueStroke, 2, -165);
mySymbol2.drawTNTInscribedArrow(context);

var ptB = new TNTPoint(-10, 10);
var mySymbol3 = new TNTInscribedArrow(ptB, 8, 1.5, .5, 
    purple, null, yellow, purpleStroke, 0, 0);
mySymbol3.drawTNTInscribedArrow(context);

var ptC = new TNTPoint(-10, -10);
var mySymbol4 = new TNTInscribedArrow(ptC, 4, 0, .5, 
    medGreen, null, green, null, 0, 60);
mySymbol4.drawTNTInscribedArrow(context);

var ptD = new TNTPoint(10, -10);
var mySymbol5 = new TNTInscribedArrow(ptD, 6, .95, 
    .9, black, null, lightFlesh, null, 1.1, 85);
mySymbol5.drawTNTInscribedArrow(context);
To Draw: 
mySymbol.drawTNTInscribedArrow(context);
Comments:

Remember, the order and number of the parameters is important, and they must match the 'type' of data requested. If it needs a TNTColor for the 4th parameter, you can't supply a whole number for that.
Even More:

The pink and red image above has its center shown by using the commmand: mySymbol.showCenter = true;, which uses a boolean property to make a decision as to whether or not to draw the center. See the code for details.