File: image.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye, buster, sid
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (65 lines) | stat: -rw-r--r-- 2,825 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
<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>
  <h2>Images</h2>
  <div id="jxgbox" class="jxgbox" style="width:700px; height:500px;"></div>
  <div id="debug" style="display:block;"></div>
   <script type="text/javascript">
    /* <![CDATA[ */
    //(function(){
        var p0, p1, picStr, board;
        
        picStr = "http://easyimup.de/uploads/garfield-1069_e254457.gif";
        //picStr = "./uccellino.jpg";
        picStr = "./fagiolo.jpg";

        board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 40, axis:true, grid:true});

        var p0 = board.create('point', [-1,0], {style:5, name:'opacity'}); 

        /*
        var p1 = board.create('point', [3,0], {style:5, name:'rot+scale'}); 
        var li = board.create('line', [p0,p1]); 
        */
        var p1 = board.create('point', [1,1]); 
        var p2 = board.create('point', [4,3]); 
        var im = board.create('image',[picStr, 
                                [function(){return p1.X()}, function(){return p1.Y(); }],
                                [function(){return p2.X() - p1.X()}, function(){return p2.Y() - p1.Y(); }]],
            {id:'imx', 
             opacity: function(){ return Math.exp(-Math.abs(p0.X())*0.4);}, 
             rotate:0, 
             frozen:false }); 

        /*
        // 
        // Translate image and point "rot+scale" by freagging point "offset"
        var tOff = board.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); 
        tOff.bindTo(im);
        tOff.bindTo(p1);
        
        // Rotate image around point "offset" by dragging point "rot+scale"
        var tRot = board.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); 
        tRot.bindTo(im);
        
        // Scale image by dragging point "rot+scale"
        // We do this by moving the image back to the origin (inverse of transformation tOff),
        // then scale the image (because scaling "starts from (0,0))
        // Finally, we move the image back to point "Offset"
        var tOffInv = board.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); 
        var tScale = board.create('transform', [function(){return p1.Dist(p0)/3;},
                                            function(){return p1.Dist(p0)/3;}], {type:'scale'}); 
        tOffInv.bindTo(im); tScale.bindTo(im); tOff.bindTo(im);
        //board.update();
        */
    //})();
  /* ]]> */
  </script>
</body>
</html>