spiralIcon

JSGS Shapes

TNTSpade

Your browser does not support HTML5 Canvas
Notes:

Let's call a spade a TNTSpade. To support card games, we needed this shape, composed of a TNTHeart and a TNTSpire.

As with TNTClub, the 'stem' of the spade received its parameters based on the overall parameters of the spade. This way, everything scales appropriately, as shown in the figure above.

TNTSpade Features and Usage:
Primary Attributes:

5 Parameters:

  • center: TNTPoint; located at the center of the body of the heart
  • radius: decimals (known as a 'double' in code); the distance from the center of the heart to a lobe; the base is scaled to that value
  • fillColor: TNTColor (can be null for a framework image)
  • borderColor: a TNTStroke: to set the border color as well as the thickness of the sides
  • rotationDeg: a 'double' that rotates the square about its center. rotn > 0 ==> counter clockwise; rotn < 0 ==> clockwise
To Create:

The example above was created by:

var center = new TNTPoint(3,3);

var myStroke = null;
var aSpade = new TNTSpade(center, 6, black, myStroke, 0);
aSpade.drawTNTSpade(context);

var anotherSpade = new TNTSpade(center.translate(-9, -8), 2, red, null, 0);
anotherSpade.drawTNTSpade(context);
To Draw: aSpade.drawTNTSpade(context);
Comments:

This is the third shape in the JSGS to utilize the class keyword in JavaScript. Check it out in the source code.

TNTHeart is a complicated figure and to maintain its heart shape, the basic parameters that create it must be scaled by a scaling factor. Look at its source code: we added a method, calcFactor, that used linear regression to compute the correct factor for a given radius. We ♥ math!