spiralIcon

JSGS Shapes

TNTCircleSegment

Your browser does not support HTML5 Canvas
Notes:

A circle segment is a shape formed by the intersection of an arc of circle and a chord connecting the endpoints of that arc.

The arc of circle is selected using 'thetaStart' and 'thetaEnd' referenced from a horizontal going through the center of the defining circle. (Positive angles are counter-clockwise).

In the picture above, the TNTCircleSegment is in orange, the defining TNTDisk is in white, with special points in black.

TNTCircleSegment Features and Usage:
Primary Attributes:

6 Parameters:

  • center: TNTPoint
  • radius: a positive real number ('double')
  • spokeLength: a 'double'
  • thetaStartDeg: a real number ('double')
  • thetaEndDeg: a real number ('double')
  • fillColor: TNTColor (can be null for a framework image)
  • borderColor: a TNTStroke
To Create:

The example above was created by:

var center = new TNTPoint(-5, -2);

var baseDisk = new TNTDisk(center, 10, 
    null, whiteStroke);
baseDisk.accentColor = black;
baseDisk.showCenter = true;
baseDisk.drawTNTDisk(context);

var x = -5 + 10*Math.cos(-40*Math.PI/180.0);
var y = -2 + 10*Math.sin(-40*Math.PI/180.0);
var ptA = new TNTPoint(x, y);
var seg1 = new TNTLine(center, ptA, whiteStroke);
seg1.drawTNTLine(context);

x = -5 + 10*Math.cos(30*Math.PI/180.0);
y =  -2 + 10*Math.sin(30*Math.PI/180.0);
var ptB = new TNTPoint(x, y);
var seg2 = new TNTLine(center, ptB, whiteStroke);
seg2.drawTNTLine(context);

var myCircleSegment = 
    new TNTCircleSegment(center, 10,
    -40, 30, orange, null);
myCircleSegment.drawTNTCircleSegment(context);
ptA.drawTNTPoint(myTNTCanvas, black);
ptB.drawTNTPoint(myTNTCanvas, black);
center.drawTNTPoint(myTNTCanvas, black);
To Draw: myCircleSegment.drawTNTCircleSegment(context);
Comments:

When trying to design these, it helps to sketch the disk first, along with it's center. Starting and ending angles (in degrees) are measured from the horizontal, with positive angles going counter-clockwise, as in math class.

We showed this 'scaffolding' in the example above.
Even More:

See how we used SohCahToa to get the two black points on the circle from the center and radius? Boy...we  ♥ you, trig!

This shape was instrumental in creating the TNTTwoTonedDisk.