spiralIcon

JSGS Shapes

TNTRoundedRectangle

Your browser does not support HTML5 Canvas
Notes:

Weird! Control points can be used to smooth out or even twist the edges of a rectangle to create things that don't even look like rectangles! Borders and/or fills are optional; the control points can be hidden or shown as desired. The green shape above shows the blue control points and center.

TNTRoundedRectangle Features and Usage:
Primary Attributes:

7 Parameters:

  • center: TNTPoints
  • width: a decimal (known as a 'double' in code) for the horizontal dimension
  • height: a decimal for the vertical dimension
  • radius: a decimal to 'curve' the edges
  • fillColor: TNTColor, as fcolr
  • borderStroke: 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:
Green Example

The green example above was created by:

var theCenter = new TNTPoint(-5, 5);
theCenter = theCenter.translate(12, -15);
var myRectangle2 = new TNTRoundedRectangle(theCenter, width, height, 2, medGreen, null, 0);
myRectangle2.showCenter = true;
myRectangle2.accentColor = blue;
myRectangle2.showPoints = true; 
myRectangle2.drawTNTRoundedRectangle(context);
To Draw: 
myRectangle2.drawTNTRoundedRectangle(context);
Comments:

If you look at the tntGraphics source code for TNTRoundedRectangle, you will notice that it uses a special function, quadraticCurveTo to make the curved edges. Check it out!
Even More:

Explore the source code of this page to see how the twisted shapes were created.

This shape was used in the Feeling Lucky Challenge where we did initial development for our TNTDie shape!