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
|
<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>
<h1>Projective Transformation</h1>
<div id="jxgbox" class="jxgbox" style="width:400px; height:400px; overflow:hidden; float:left; background-color:rgb(77, 189, 51)"></div>
<div id="jxgbox2" class="jxgbox" style="width:400px; height:400px; overflow:hidden; float:left; background-color:rgb(77, 189, 51)"></div>
<div id="debug" style="display:block;"></div>
<script type="text/javascript">
/* <![CDATA[ */
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-10,70,110,-10], keepaspectratio:true, axis:false});
var i, p=[], l=[], p1=[], p2=[], q1=[], q2=[], lh=[], lv=[];
p[0] = brd.create('point',[0,0], {withLabel:false, fillColor:'white', strokeColor:'white'});
p[1] = brd.create('point',[100,0], {withLabel:false, fillColor:'white', strokeColor:'white'});
p[2] = brd.create('point',[100,60], {withLabel:false, fillColor:'white', strokeColor:'white'});
p[3] = brd.create('point',[0,60], {withLabel:false, fillColor:'white', strokeColor:'white'});
l[0] = brd.create('segment',[p[0],p[1]],{withLabel:false, strokeColor:'white'});
l[1] = brd.create('segment',[p[1],p[2]],{withLabel:false, strokeColor:'white'});
l[2] = brd.create('segment',[p[2],p[3]],{withLabel:false, strokeColor:'white'});
l[3] = brd.create('segment',[p[3],p[0]],{withLabel:false, strokeColor:'white'});
/*
for (i=1;i<8;i++) {
p1[i] = brd.create('glider',[i,0,l[0]],{withLabel:false});
q2[i] = brd.create('glider',[8,i,l[1]],{withLabel:false});
p2[i] = brd.create('glider',[i,8,l[2]],{withLabel:false});
q1[i] = brd.create('glider',[0,i,l[3]],{withLabel:false});
}
for (i=1;i<8;i++) {
lv[i] = brd.create('segment',[p1[i],p2[i]],{withLabel:false});
lh[i] = brd.create('segment',[q1[i],q2[i]],{withLabel:false});
}
*/
//----------------------------------------------------------------------
var mat=[[1,0.2,0.3],
[0.6,7,3],
[0.8,1,7.1]];
//----------------------------------------------------------------------
var brd2 = JXG.JSXGraph.initBoard('jxgbox2',{boundingbox:[-1,21,21,-6], keepaspectratio:true, axis:false});
brd.addChild(brd2);
var pp=[], ll=[], pp1=[], pp2=[], qq1=[], qq2=[], llh=[], llv=[];
pp[0] = brd2.create('point',[function(){return JXG.Math.matVecMult(mat,p[0].coords.usrCoords);}],{withLabel:false});
pp[1] = brd2.create('point',[function(){return JXG.Math.matVecMult(mat,p[1].coords.usrCoords);}],{withLabel:false});
pp[2] = brd2.create('point',[function(){return JXG.Math.matVecMult(mat,p[2].coords.usrCoords);}],{withLabel:false});
pp[3] = brd2.create('point',[function(){return JXG.Math.matVecMult(mat,p[3].coords.usrCoords);}],{withLabel:false});
ll[0] = brd2.create('segment',[pp[0],pp[1]],{withLabel:false});
ll[1] = brd2.create('segment',[pp[1],pp[2]],{withLabel:false});
ll[2] = brd2.create('segment',[pp[2],pp[3]],{withLabel:false});
ll[3] = brd2.create('segment',[pp[3],pp[0]],{withLabel:false});
/*
for (i=1;i<8;i++) {
pp1[i] = (function(k){ return brd2.create('point',[function(){return JXG.Math.matVecMult(mat,p1[k].coords.usrCoords);}],{withLabel:false}); })(i);
qq2[i] = (function(k){ return brd2.create('point',[function(){return JXG.Math.matVecMult(mat,q2[k].coords.usrCoords);}],{withLabel:false}); })(i);
pp2[i] = (function(k){ return brd2.create('point',[function(){return JXG.Math.matVecMult(mat,p2[k].coords.usrCoords);}],{withLabel:false}); })(i);
qq1[i] = (function(k){ return brd2.create('point',[function(){return JXG.Math.matVecMult(mat,q1[k].coords.usrCoords);}],{withLabel:false}); })(i);
}
for (i=1;i<8;i++) {
llv[i] = brd2.create('segment',[pp1[i],pp2[i]],{withLabel:false});
llh[i] = brd2.create('segment',[qq1[i],qq2[i]],{withLabel:false});
}
*/
/* ]]> */
</script>
</body>
</html>
|
