Difference between revisions of "Restrict points to limited area"

From JSXGraph Wiki
Jump to navigationJump to search
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 +
Restrict the points A, B, and C to the lower left quadrant.
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
 
var A = brd.create('point', [-1,-1], {name:'A'});
 
var A = brd.create('point', [-1,-1], {name:'A'});
var B = brd.create('point', [-3, 2], {name:'B'});
+
var B = brd.create('point', [-3, -3], {name:'B'});
var C = brd.create('point', [ 3, 0], {name:'C'});
+
var C = brd.create('point', [ -2, 0], {name:'C'});
  
 
brd.on('move', function() {
 
brd.on('move', function() {
 
   var list = [A, B, C], i;
 
   var list = [A, B, C], i;
+
 
 +
  brd.suspendUpdate();
 
   for (i = 0; i < list.length; ++i) {
 
   for (i = 0; i < list.length; ++i) {
       list[i].moveTo([Math.min(0, list[i].X()), Math.min(0, list[i].Y())]);
+
       list[i].moveTo(
 +
          [
 +
            Math.min(0, list[i].X()),  
 +
            Math.min(0, list[i].Y())
 +
          ]
 +
        );
 
   }
 
   }
 +
  brd.unsuspendUpdate();
 
  });
 
  });
  
Line 19: Line 27:
 
<source lang="javascript">
 
<source lang="javascript">
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
var P0 = brd.create('point', [-4,-1], {name:'', face:'[]'});
+
var A = brd.create('point', [-1,-1], {name:'A'});
var P1 = brd.create('point', [4,-1], {name:'', face:'[]'});
+
var B = brd.create('point', [-3, -3], {name:'B'});
var li = brd.create('line', [P0,P1]);
+
var C = brd.create('point', [ -2, 0], {name:'C'});
var A = brd.create('glider', [0,-1,li], {name:'A'});
 
var B = brd.create('glider', [-3,-1,li], {name:'B'});
 
var C = brd.create('glider', [ 3,-1,li], {name:'C'});
 
  
brd.on('update', function() {
+
brd.on('move', function() {
 
   var list = [A, B, C], i;
 
   var list = [A, B, C], i;
 
  for (i=
 
  
 +
  brd.suspendUpdate();
 +
  for (i = 0; i < list.length; ++i) {
 +
      list[i].moveTo(
 +
          [
 +
            Math.min(0, list[i].X()),
 +
            Math.min(0, list[i].Y())
 +
          ]
 +
        );
 +
  }
 +
  brd.unsuspendUpdate();
 
  });
 
  });
 +
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 11:47, 18 June 2013

Restrict the points A, B, and C to the lower left quadrant.

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
var A = brd.create('point', [-1,-1], {name:'A'});
var B = brd.create('point', [-3, -3], {name:'B'});
var C = brd.create('point', [ -2, 0], {name:'C'});

brd.on('move', function() {
   var list = [A, B, C], i;

   brd.suspendUpdate();
   for (i = 0; i < list.length; ++i) {
       list[i].moveTo(
           [
            Math.min(0, list[i].X()), 
            Math.min(0, list[i].Y())
           ]
         );
   }
   brd.unsuspendUpdate();
 });