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
|
<html>
<head>
<title>JSXGraph example</title>
<!--<script type="text/javascript" src="../distrib/MathJax/MathJax.js"></script>-->
<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/CanvasRenderer.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 = 'internal';
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], 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'});
p2 = brd.create('point', [0,4], {color:'blue', trace:true});
txt = brd.create('text',[function(){return p0.X()},function(){return p0.Y()}, JXG.JSXGraph.rendererType],
{id:'txt', fontSize:'48'});
/*
txt.rendNode.style.fill = "#ff00ff";
txt.rendNode.style.stroke = "#000000";
txt.rendNode.style.strokeWidth = "3px";
*/
im = brd.create('image',["../uccellino.jpg", [0,0], [3,10]], {opacity:0.5});
//txt2 = brd.create('text',[2,-3, function(){ return txt.getSize().toString();}], {});
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);
//tOff.bindTo(im);
//tOff.bindTo(txt);
// This is a rotation in screen coordinates.
// ratio is the the ratio between the board dimensions (maxY-minY)/(maxX-minX) in user coordinates
ratio = 1; // 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);
tOffInv.bindTo(im); ts1.bindTo(im); tRot.bindTo(im); ts2.bindTo(im); tOff.bindTo(im);
tRot.bindTo(p2); // For comparison, a rotation in user coordinates.
brd.update();
/*
txt2 = brd.create('text',[2.5,-2, "Input element: <input type='checkbox' onclick='txt.setProperty({visible:false})'>"], {display:'html', anchorX:'right'});
txt3 = brd.create('text',[2.5,-6, "internal text right"], {display:'internal', anchorX:'right', rotate:0});
txt4 = brd.create('text',[2.5,-8, "internal text left"], {display:'internal', anchorX:'middle'});
txt5 = brd.create('text',[2.5,-10, "internal text left"], {display:'internal', anchorX:'left', rotate:45});
txt6 = brd.create('text',[0,-6, "html text right"], {display:'html', anchorX:'right'});
txt7 = brd.create('text',[0,-8, "html text left"], {display:'html', anchorX:'middle'});
txt8 = brd.create('text',[0,-10, "html text left"], {display:'html', anchorX:'left'});
txt3.setProperty({rotate:180});
*/
//brd.update();
//brd.setBoundingBox([-5,10,5,-10], false);
//alert(txt.rendNode.getBBox().width);
</script>
</body>
</html>
|
