File: text_html.html

package info (click to toggle)
jsxgraph 1.10.1%2Bdfsg1-1
  • links: PTS, VCS
  • area: main
  • in suites: trixie
  • size: 24,804 kB
  • sloc: javascript: 82,299; xml: 5,869; java: 1,072; php: 281; makefile: 184; python: 174; cpp: 76; sh: 12
file content (39 lines) | stat: -rw-r--r-- 1,963 bytes parent folder | download | duplicates (3)
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
<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>
   <script type="text/javascript" src="../../src/renderer/canvas.js"></script>
</head>
<body>
<h1>Text and transformations</h1>
<div id='jxgbox' class='jxgbox' style='width:600px; height:600px;'></div>
<div id="debug" style="display:block;"></div>
<script type='text/javascript'>
    var brd, txt, p0, p1, p2, im;
    //JXG.Options.renderer = 'canvas';
    JXG.Options.text.display = 'html';

    brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});
    p0 = brd.create('point', [0,0], {style:5, name:'offset'});
    p1 = brd.create('point', [3,0], {style:5, name:'rot+scale'});
    txt = brd.create('text',[function(){return p0.X()},function(){return p0.Y()}, JXG.JSXGraph.rendererType], {fontSize:'64'});

    var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});
    var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});

    tOff.bindTo(p1);

    // This is a rotation in screen coordinates.
    // ratio is the the ratio between the board dimensions (maxY-minY)/(maxX-minX) in user coordinates
    ratio = 5;
    var ts1 = brd.create('transform', [function(){return ratio;}, function(){return 1;}], {type:'scale'});
    var ts2 = brd.create('transform', [function(){return 1/ratio;}, function(){return 1;}], {type:'scale'});
    var tRot = brd.create('transform', [function(){return Math.atan2((p1.Y()-p0.Y())/ratio, p1.X()-p0.X());}], {type:'rotate'});

    // Rotate text around point "offset" by dragging point "rot+scale"
    tOffInv.bindTo(txt); ts1.bindTo(txt); tRot.bindTo(txt); ts2.bindTo(txt); tOff.bindTo(txt);
    brd.update();
</script>
</body>
</html>