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
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
<script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>
<a href="http://samples.msdn.microsoft.com/workshop/samples/vml/redoval.htm">Simple VML example from Microsoft</a>
<div id="box" class="jxgbox" style="width:800px; height:400px; overflow:hidden;"></div>
<div id="debug" style="display:block;"></div>
<div id="myinfobox"
style="
display:none;
position:absolute;
border-width:2px; border-color:red; border-style:solid;
background-color:#ffff88;
padding:10px;
/* Cross-browser opacity: */
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
filter: alpha(opacity=50);
opacity:.5;
"
></div>
<script type="text/javascript">
/* <![CDATA[ */
var board = JXG.JSXGraph.initBoard('box', {boundingbox:[-4,4,12,-4], keepaspectratio:true,axis:true});
var p1 = board.createElement('point', [0,2] , {name:'A',fillColor:'red',strokeColor:'red'});
var p2 = board.createElement('point', [0,3] , {name:'B',fillColor:'red',strokeColor:'red'});
var c = board.createElement('circle', [p1,p2] , {name:'c',strokeColor:'red'});
var p3 = board.createElement('point', [0,-1] , {name:'C',fillColor:'red',strokeColor:'red'});
var t2 = board.createElement('tangent', [c,p2], {dash:2});
//-----------------------------------
var infobox = document.getElementById('myinfobox');
JXG.Line.prototype.highlight = function(){
infobox.innerHTML = this.name;
infobox.style.display = 'block';
}
JXG.Line.prototype.noHighlight = function(){
infobox.style.display = 'none';
}
c.highlight = function(){
infobox.innerHTML = 'circle '+this.name;
infobox.style.display = 'block';
}
c.noHighlight = function(){
infobox.style.display = 'none';
}
var pol = board.create('polar',[c,p3]);
var i1 = board.createElement('intersection', [c,pol,0],{visible:false});
var i2 = board.createElement('intersection', [c,pol,1],{visible:false});
var t1 = board.createElement('tangent', [c,i1]);
var t2 = board.createElement('tangent', [c,i2]);
/* ]]> */
</script>
<div onclick="p3.moveTo([5,-1],1000)">Klick</div>
<br>
</body>
</html>
|
