Difference between revisions of "Point"

From JSXGraph Wiki
Jump to: navigation, search
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 12: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