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.