Circle: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
Line 4: Line 4:
<source lang="javascript">
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.createElement('point',[0,0], {name:'A',size: 4, face: 'o'});
var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
var p2 = b.createElement('point',[2,-1], {name:'B',size: 4, face: 'o'});
var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
</source>
</source>
Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
Line 14: Line 14:
<jsxgraph box="jxgbox" width="500" height="200">
<jsxgraph box="jxgbox" width="500" height="200">
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
  var p1 = brd.createElement('point',[0,0], {name:'A',size: 4, face: 'o'});
  var p1 = brd.create('point',[0,0], {name:'A',size: 4, face: 'o'});
  var p2 = brd.createElement('point',[2,-1], {name:'B',size: 4, face: 'o'});
  var p2 = brd.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
  var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
  var ci = brd.create('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</jsxgraph>
</jsxgraph>


Line 23: Line 23:


<source lang="javascript">
<source lang="javascript">
var ci2 = b.createElement('circle',[p1,p2],  
var ci2 = b.create('circle',[p1,p2],  
     {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
     {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
</source>
</source>
Line 29: Line 29:
<jsxgraph box="jxgbox2" width="500" height="200">
<jsxgraph box="jxgbox2" width="500" height="200">
  var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
  var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
  var p1 = brd2.createElement('point',[0,0], {name:'A',size: 4, face: 'o'});
  var p1 = brd2.create('point',[0,0], {name:'A',size: 4, face: 'o'});
  var p2 = brd2.createElement('point',[2,-1], {name:'B',size: 4, face: 'o'});
  var p2 = brd2.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
  var ci2 = brd2.createElement('circle',[p1,p2],  
  var ci2 = brd2.create('circle',[p1,p2],  
   {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
   {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
</jsxgraph>
</jsxgraph>

Latest revision as of 08:21, 3 March 2021

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', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'});

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 = b.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 = b.create('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 dependent on the position of "B", i.e. the JavaScript variable "p2".

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