Difference between revisions of "Dependent gliders"

From JSXGraph Wiki
Jump to: navigation, search
Line 38: Line 38:
 
  }, 'update');
 
  }, 'update');
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="javascript">
 +
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
 +
var P0 = brd.create('point', [-4,-1], {name:'', face:'[]'});
 +
var P1 = brd.create('point', [4,-1], {name:'', face:'[]'});
 +
var li = brd.create('line', [P0,P1]);
 +
var A = brd.create('glider', [0,-1,li]);
 +
var B = brd.create('glider', [-3,-1,li]);
 +
var C = brd.create('glider', [ 3,-1,li]);
 +
brd.addHook(function() {
 +
    // Find the element that has been dragged
 +
    var o;
 +
    if (typeof brd.touches != 'undefined' && brd.touches.length>0) {
 +
      o = brd.touches[0].obj;
 +
    } else if (typeof brd.mouse.obj != 'undefined') {
 +
      o = brd.mouse.obj;
 +
    } else {
 +
      return;
 +
    }
 +
   
 +
    // A has been dragged 
 +
    if (o==A) {
 +
      // Update the relative position of B between P0 and P1
 +
      B.position = A.position - 0.3;
 +
      B.prepareUpdate().update(true).updateRenderer();
 +
 +
      // Update the absolute position of C
 +
      C.setPositionDirectly(JXG.COORDS_BY_USER, A.X()+3, C.Y());
 +
      C.prepareUpdate().update().updateRenderer();
 +
    } else if (o==B) {  // B has been dragged
 +
      A.position = B.position + 0.3;
 +
      A.prepareUpdate().update(true).updateRenderer();
 +
 +
      C.setPositionDirectly(JXG.COORDS_BY_USER, A.X()+3, C.Y());
 +
      C.prepareUpdate().update().updateRenderer();
 +
    } else if (o==C) {  // C has been dragged
 +
      A.setPositionDirectly(JXG.COORDS_BY_USER, C.X()-3, A.Y());
 +
      A.prepareUpdate().update().updateRenderer();
 +
 +
      B.position = A.position - 0.3;
 +
      B.prepareUpdate().update(true).updateRenderer();
 +
    }
 +
}, 'update');
 +
 +
</source>
 +
 +
[[Category:Examples]]

Revision as of 21:59, 10 January 2012

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true});
var P0 = brd.create('point', [-4,-1], {name:'', face:'[]'});
var P1 = brd.create('point', [4,-1], {name:'', face:'[]'});
var li = brd.create('line', [P0,P1]);
var A = brd.create('glider', [0,-1,li]);
var B = brd.create('glider', [-3,-1,li]);
var C = brd.create('glider', [ 3,-1,li]);
brd.addHook(function() {
    // Find the element that has been dragged
    var o;
    if (typeof brd.touches != 'undefined' && brd.touches.length>0) {
      o = brd.touches[0].obj;
    } else if (typeof brd.mouse.obj != 'undefined') {
      o = brd.mouse.obj;
    } else {
      return;
    }
    
    // A has been dragged  
    if (o==A) {
      // Update the relative position of B between P0 and P1
      B.position = A.position - 0.3;
      B.prepareUpdate().update(true).updateRenderer();

      // Update the absolute position of C
      C.setPositionDirectly(JXG.COORDS_BY_USER, A.X()+3, C.Y()); 
      C.prepareUpdate().update().updateRenderer();
    } else if (o==B) {  // B has been dragged
      A.position = B.position + 0.3;
      A.prepareUpdate().update(true).updateRenderer();

      C.setPositionDirectly(JXG.COORDS_BY_USER, A.X()+3, C.Y()); 
      C.prepareUpdate().update().updateRenderer();
    } else if (o==C) {  // C has been dragged
      A.setPositionDirectly(JXG.COORDS_BY_USER, C.X()-3, A.Y()); 
      A.prepareUpdate().update().updateRenderer();

      B.position = A.position - 0.3;
      B.prepareUpdate().update(true).updateRenderer();
    } 
 }, 'update');