Point: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 23: Line 23:


== Attributes of a point ==
== Attributes of a point ==
Several attributes can be given to change the properties of a point.
 
=== User defined name ===
Several attributes can be given to change the properties of a point, for example a name.
<source lang="javascript">
<source lang="javascript">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p = b2.createElement('point',[1,1], {name:'X',style:5});
var p = b2.createElement('point',[1,1], {name:'X',style:5});
</source>
</source>
 
This point will be labeled with "X":
<html>
<html>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
Line 37: Line 39:
</html>
</html>


== Point styles==
=== Point styles===
The property type of a point can attain the values 0..12. In this examples we use a for loop to create 13 points.  
The property type of a point can attain the values 0..12. In this examples we use a for loop to create 13 points.  
<source lang="javascript">
<source lang="javascript">
Line 44: Line 46:
   var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
   var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
}
}
</source>
After creating the points we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.
<source lang="javascript">
p.setProperty({fixed:true});
</source>
</source>


Line 60: Line 58:
</script>
</script>
</html>
</html>
=== Fixed points===
A property of an element may also be set after creating it. In the above example we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.
<source lang="javascript">
p.setProperty({fixed:true});
</source>


== [[Points with constraints]] ==
== [[Points with constraints]] ==


[[Category:Examples]]
[[Category:Examples]]

Revision as of 10:15, 21 October 2008

Construction of a free point

This example shows how to construct a simple, draggable point. It is produced by the following commands:

<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 var p = board.createElement('point',[1,1]);
</script>

The JavaScript code has to be placed AFTER the div element which will contain the construction. From now on, we will only show the JavaScript code.

Attributes of a point

User defined name

Several attributes can be given to change the properties of a point, for example a name.

var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p = b2.createElement('point',[1,1], {name:'X',style:5});

This point will be labeled with "X":

Point styles

The property type of a point can attain the values 0..12. In this examples we use a for loop to create 13 points.

var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
for (var i=0;i<13;i++) {
  var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
}

Fixed points

A property of an element may also be set after creating it. In the above example we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.

p.setProperty({fixed:true});

Points with constraints