1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>
<h2>Transformations</h2>
<div id="jxgbox" class="jxgbox" style="width:700px; height:500px;"></div>
<div id="debug" style="display:none;"></div>
<script type="text/javascript">
/* <![CDATA[ */
// Globale Variable
var p0,p1, p2, p3, p4, t;
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 40});
b1axisx = board.create('axis', [[0,0], [0,1]], {});
b1axisy = board.create('axis', [[0,0], [1,0]], {});
p0 = board.create('point', [0,3], {style:5, name:'off',strokecolor:'blue', fillcolor:'red'});
p1 = board.create('point', [1,1], {style:9, name:'A',strokecolor:'blue'});
t = board.create('transform', [function(){return p0.X();},"Y(off)"], {type:'translate'});
p2 = board.create('point', [p1,t], {name:'translate',strokecolor:'red'});
t = board.create('transform', [2,0.5], {type:'scale'});
p2 = board.create('point', [p1,t], {name:'scale'});
p3 = board.create('point', [2,1], {name:'C', fixed:true});
t = board.create('transform', ["Y(off)",'C'], {type:'rotate'}); // angle, rotation center
p2 = board.create('point', [p1,t], {name:'rotate'});
board.create('line',[p2,p3], {straightFirst:false, straightLast:false});
board.create('line',[p1,p3], {straightFirst:false, straightLast:false});
// The same as the above rotation as concatenation of transforms
var t1 = board.create('transform', [-2,-1], {type:'translate'});
var t2 = board.create('transform', [Math.PI/4], {type:'rotate'});
var t3 = board.create('transform', [2,1], {type:'translate'});
p2 = board.create('point', [p1,[t1,t2,t3]], {name:'ro2'});
// Reflection
p4 = board.create('point', [1,3], {name:'D'});
var p5 = board.create('point', [-2,0], {name:''});
var l = board.create('line',[p5,p4], {strokewidth:0.2});
t = board.create('transform', [l.id], {type:'reflect'}); // Possible are l, l.id, l.name
p2 = board.create('point', [p1,t], {name:'reflect', strokecolor:'red'});
// one time application of a transform
p1 = board.create('point', [1,-2]);
p2 = board.create('point', [2,-2]);
p3 = board.create('point', [1,-3]);
p4 = board.create('point', [2,-3]);
t = board.create('transform', [Math.PI/6, 1], {type:'shear'});
t.applyOnce([p3,p4]);
// Construct a square with transformations
var sq = [];
sq[0] = board.create('point', [0,0], {strokeColor:'blue', name:'Drag me', style:5});
var right = board.create('transform', [2,0], {type:'translate'});
var up = board.create('transform', [0,2], {type:'translate'});
sq[1] = board.create('point', [sq[0],right], {style:7});
sq[2] = board.create('point', [sq[0],[right,up]], {style:7});
sq[3] = board.create('point', [sq[0],up], {style:7});
var pol = board.create('polygon',sq, {fillColor:'blue', gradient:'radial', gradientsecondcolor:'white', gradientSecondOpacity:'0'});
// Rotate the square around point sq[0]
var rot = board.create('transform', ["Y(off)",sq[0]], {type:'rotate'});
//rot.bindTo(sq);
rot.bindTo(sq.slice(1));
board.addConditions("<data>B.x=If(X(B)>0,X(B),0)</data>");
board.update();
/* ]]> */
</script>
</body>
</html>
|
