Notes:
TNTArc is a portion of a circle. You must supply a center, a radius and a beginning and ending angle (in degrees) to get what you want. Positve angles are counter-clockwise as you learned (hopefully) in math class. This object allows you to use the function 'showCenter' which locates the arc's center. It's helpful to show this initially to position the arc where you want it.
It's worth experimenting with this TNTArc using Chrome's Developer Tools. The help section explains how to do this.
This shape was instrumental in making our spectacular TNTSonarBeams by using a loop to generate multiple arcs!
TNTArc Features and Usage:
| Primary Attributes: |
5 Parameters: |
|---|---|
| To Create: |
The example above was created by:
//designer colors
var gray = new TNTColor(200, 200, 200, "gray");
//designer strokes
var grayStroke = new TNTStroke(gray, .2);
//special points/components
var center = new TNTPoint(1, 2);
center.factor = 100;
center.drawTNTPoint(myTNTCanvas, white);
var radius = 10;
var theta0 = 30;
var thetaf = 120;
var myX = center.x + radius*Math.cos(theta0*Math.PI/180);
var myY = center.y + radius*Math.sin(theta0*Math.PI/180);
var ptA = new TNTPoint(myX, myY);
ptA.factor = 100; //makes it bigger
ptA.drawTNTPoint(myTNTCanvas, white);
var lineOA = new TNTLine(center, ptA, whiteStroke);
lineOA.drawTNTLine(context);
myX = center.x + radius*Math.cos(thetaf*Math.PI/180);
myY = center.y + radius*Math.sin(thetaf*Math.PI/180);
var ptB = new TNTPoint(myX, myY);
ptB.factor = 100;
ptB.drawTNTPoint(myTNTCanvas, gray);
var lineOB = new TNTLine(center, ptB, grayStroke);
lineOB.drawTNTLine(context);
var myArc = new TNTArc(center, radius, theta0, thetaf, magentaStroke);
myArc.accentColor = red;
myArc.showCenter = true;
myArc.drawTNTArc(context);
|
| To Draw: | myArc.drawTNTArc(context); |