Circle: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 41: Line 41:
  var ci2 = brd2.createElement('circle',[p1,p2],  
  var ci2 = brd2.createElement('circle',[p1,p2],  
   {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
   {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
</script>
</html>
=== Dynamic fill-opacity ===
We can make the fill-opacity dynamic and make it somewhat dependend on the radius of the circle.
<source lang="javascript">
var ci3 = brd3.createElement('circle',[p1,p2],
    {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
</source>
<html>
<div id="jxgbox3" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var brd3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd3.createElement('point',[0,0], {name:'A',style:6});
var p2 = brd3.createElement('point',[2,0], {name:'B',style:6});
var ci3 = brd3.createElement('circle',[p1,p2],
  {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
</script>
</script>
</html>
</html>

Revision as of 16:00, 17 September 2008

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 the radius of the circle.

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