File: circletangent.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: buster, sid
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (66 lines) | stat: -rw-r--r-- 2,353 bytes parent folder | download | duplicates (2)
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="../src/loadjsxgraph.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>