Difference between revisions of "Mutually dependent line and gliders"

From JSXGraph Wiki
Jump to navigationJump to search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
In this example, a and b are gliders on lines. Additionally, the glider a depends on glider b.
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
 
var board = JXG.JSXGraph.initBoard('jxgbox', {
 
var board = JXG.JSXGraph.initBoard('jxgbox', {
Line 8: Line 9:
  
 
var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});
 
var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});
var el1 = board.create('line',[[1,0],[1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});
+
var el1 = board.create('line',[[1,0], [1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});
  
 
var gl1 = board.create('glider', [0,0, el0], {name:'b'});
 
var gl1 = board.create('glider', [0,0, el0], {name:'b'});
 
var gl2 = board.create('glider', [1,0, el1], {name:'a'});
 
var gl2 = board.create('glider', [1,0, el1], {name:'a'});
 +
//gl1.draggable = function() {return true; };
 +
//gl2.draggable = function() {return true; };
 +
 
var line = board.create('line', [gl1, gl2]);
 
var line = board.create('line', [gl1, gl2]);
gl1.draggable = function() {console.log("X"); return true; };
 
gl2.draggable = function() {console.log("Y"); return true; };
 
  
 
var offset = gl2.Y() - gl1.Y();
 
var offset = gl2.Y() - gl1.Y();
Line 24: Line 26:
 
     offset = gl2.Y() - gl1.Y();
 
     offset = gl2.Y() - gl1.Y();
 
     });
 
     });
 +
</jsxgraph>
 +
 +
===The JavaScript code===
 +
 +
<source lang="javascript">
 +
var board = JXG.JSXGraph.initBoard('jxgbox', {
 +
    boundingbox: [-5,5,5,-5],
 +
    keepaspectratio: true, axis:false, grid:true
 +
    });
 +
board.create('axis',[[0,0],[1,0]], {ticks: {majorHeight:20}});
 +
board.create('axis',[[0,0],[0,1]], {ticks: {majorHeight:20}});
 +
 +
var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});
 +
var el1 = board.create('line',[[1,0], [1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});
 +
 +
var gl1 = board.create('glider', [0,0, el0], {name:'b'});
 +
var gl2 = board.create('glider', [1,0, el1], {name:'a'});
 +
//gl1.draggable = function() {return true; };
 +
//gl2.draggable = function() {return true; };
  
 +
var line = board.create('line', [gl1, gl2]);
  
</jsxgraph>
+
var offset = gl2.Y() - gl1.Y();
 +
 
 +
gl1.on('drag', function() {
 +
    gl2.moveTo([gl1.X(), gl1.Y() + offset]);
 +
    });
 +
gl2.on('drag', function() {
 +
    offset = gl2.Y() - gl1.Y();
 +
    });
 +
</source>
 +
 
 +
[[Category:Examples]]

Latest revision as of 13:37, 23 June 2020

In this example, a and b are gliders on lines. Additionally, the glider a depends on glider b.

The JavaScript code

var board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5,5,5,-5],
    keepaspectratio: true, axis:false, grid:true
    });
board.create('axis',[[0,0],[1,0]], {ticks: {majorHeight:20}});
board.create('axis',[[0,0],[0,1]], {ticks: {majorHeight:20}});

var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});
var el1 = board.create('line',[[1,0], [1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});

var gl1 = board.create('glider', [0,0, el0], {name:'b'});
var gl2 = board.create('glider', [1,0, el1], {name:'a'});
//gl1.draggable = function() {return true; };
//gl2.draggable = function() {return true; };

var line = board.create('line', [gl1, gl2]);

var offset = gl2.Y() - gl1.Y();

gl1.on('drag', function() {
    gl2.moveTo([gl1.X(), gl1.Y() + offset]);
    });
gl2.on('drag', function() {
    offset = gl2.Y() - gl1.Y();
    });