Circle

From JSXGraph Wiki
Revision as of 16:02, 17 September 2008 by 84.147.126.134 (talk)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Circle through two points

One possibility to construct a circle is to give its center and a point defining its radius. Lets construct two points "A" and "B".

var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = board.createElement('point',[0,0], {name:'A',style:6});
var p2 = board.createElement('point',[2,-1], {name:'B',style:6});

Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.

var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color.

var ci2 = brd2.createElement('circle',[p1,p2], 
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});

Dynamic fill-opacity

We can make the fill-opacity dynamic and make it somewhat dependend on position of "B".

var ci3 = brd3.createElement('circle',[p1,p2], 
    {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });