siteIcon

Tech Novice Tools

JS Grafix Sandbox

burgerIcon
spiral

JSGrafix Sandbox (JSGS)

TNT Arrow

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.

Features and Usage:

Primary Attributes:

7 Parameters:

tipCenter(TNTPoint), tipLength(positive real number), shankLength(positive real number), shankThickness(positive real number), fillColor(TNTColor), stroke(TNTStroke), rotation(real number)

To Create:

The pink arrow example:

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

To Draw: arrow2.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 example above shows this in action.