Difference between revisions of "Dependent gliders"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
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 22: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');