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
|
<!DOCTYPE html>
<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>
<h2>Magnifier</h2>
<div id="jxgbox" class="jxgbox" style="width:600px; height:450px;"></div>
<canvas id="magnifier" width="200" height="200" style="z-index: 10000; position: absolute; top: 80px; left: 650px; border: 1px solid black; display: none;"></canvas>
<img id="img" src="test.svg" style="border: 1px solid green; height: 450px; width: 600px; display: block;" />
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1,6,10,-3], axis:false, grid:false});
var p1 = board.create('point', [0, 0], {face:'+',name:"A"});
var p2 = board.create('point', [3, 4], {face:'o',name:"B"});
var p3 = board.create('point', [4, 0], {face:'[]',name:"C"});
var l1 = board.create('line', [p1, p2], {strokeWidth:'2', strokeColor:'green',withLabel:true});
var l2 = board.create('arrow', [p1, p3], {strokeWidth:'2', strokeColor:'blue',withLabel:false});
var down = false,
magnifier = document.getElementById('magnifier'),
magncont = magnifier.getContext('2d');
board.on('down', function (e) {
down = true;
magnifier.style.display = 'block';
});
board.on('up', function (e) {
down = false;
magnifier.style.display = 'none';
});
board.on('move', function (e) {
var svg, timg = document.getElementById('img'), pos;
if (down) {
board.renderer.svgRoot.setAttribute("xmlns", "http://www.w3.org/2000/svg");
board.renderer.svgRoot.setAttribute("width", "600");
board.renderer.svgRoot.setAttribute("height", "450");
svg = new XMLSerializer().serializeToString(board.renderer.svgRoot);
timg = new Image(600, 450);
timg.onload = function () {
pos = board.getMousePosition(e);
magncont.clearRect(0, 0, 200, 200);
try {
magncont.drawImage(timg, Math.max(pos[0]-50, 0), Math.max(pos[1]-50, 0), 100, 100, 0, 0, 200, 200);
} catch (exc) {
// there seems to be a bug in the iOS 5 implementation of drawImage. It only works while moving
// around in the top left corner
console.log('whoopsie: ' + Math.max(pos[0]-50, 0) + '/' + Math.max(pos[1]-50, 0));
}
};
var svgb64 = JXG.Util.Base64.encode(svg);
timg.src = 'data:image/svg+xml;base64,' + svgb64;
//window.setTimeout(onload, 1000);
}
});
})();
/* ]]> */
</script>
</body>
</html>
|
