siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT InscribedArrow

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!)

Features and Usage:

Primary Attributes:

10 Parameters:

circleCenter(TNTPoint), radius(positive real number), arrowTipLengthFactor(double, fraction of radius), arrowShankThicknessFactor(positive real number, fraction of radius), arrowFillColor(TNTColor), arrowStroke(TNTStroke), circleColor(TNTColor), circleStroke(TNTStroke), shiftFactor(positive real number, fraction of radius), rotation of arrow(real number, degrees)

To Create:

An example (the blue/gold image in the first quadrant above)

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

To Draw: mySymbol2.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.