spiralIcon

JSGS Shapes

TNTGenPolygon

Your browser does not support HTML5 Canvas
Notes:

A TNTGenPolygon opens the door for non-regular shapes composed of segments. To do this, it needs an 'array' of TNTPoints which form the vertices (corners) of the shape, and of course, a TNTColor for fill color (fcolr) and a TNTStroke for borders. There is the ability of rotation as well. Corner points may be shown or hidden using the 'showPoints' boolean property.

See the TNTGenPolygon in action, creating a manger image in the novice design Star of Bethlehem. A TNT design used it for a Randomly-Decorated Christmas Tree.

If you want a polygon with equal sides, our TNTPolygon is for you.

TNTGenPolygon Features and Usage:
Primary Attributes:

4 Parameters:

  • myPts: an array of TNTPoints
  • fillColor: TNTColor as fcolr
  • stroke: a TNTStroke: to set the border color
  • rotationDeg: 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 ptA = new TNTPoint(1, 1);
var ptB = new TNTPoint(3, 9);
var ptC = new TNTPoint(8, -8);
var ptD = new TNTPoint(2, -6);
var myPts = new Array(ptA, ptB, ptC, ptD, ptA); //must begin/end with same point

//TNTGraphic Objects
//purple polygon
var rotation = 0;
var myPoly = new TNTGenPolygon(myPts, purple, null, rotation);
myPoly.accentColor = orange;
myPoly.showPoints = true;
myPoly.drawTNTGenPolygon(context);

//white polygon, rotated
var myPoly2 = myPoly;
myPoly2.rotn = 90;
myPoly2.fcolr = white;
myPoly2.stroke = magentaStroke;
myPoly2.drawTNTGenPolygon(context);
To Draw: 
myPoly.drawTNTGenPolygon(context);
Comments:

Note that the rotation is about the origin of the coordinate system. Generally, it's easier to draw these critters without a rotation, at least originally.
Even More:

When making the points, start at a vertex and create future ones in either a clockwise or counter-clockwise fashion. If you hop around, the image will get 'twisted.'

Also, be sure to make the last point the same as the first to close the figure!