/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1

« back to all changes in this revision

Viewing changes to trunk/DuggaSys/duggor/Dugga 2 Datorgrafik - Geometri/canvas_touchevents_demo.html

  • Committer: Henrik G.
  • Date: 2013-03-26 23:22:55 UTC
  • Revision ID: henrik.gustavsson@his.se-20130326232255-ik6snyatlbkf3zs1
First seed of Lenasys ... Needs to be Organized Further

Show diffs side-by-side

added added

removed removed

Lines of Context:
trunk/DuggaSys/duggor/Dugga 2 Datorgrafik - Geometri/canvas_touchevents_demo.html
 
1
<html>
 
2
        <body>
 
3
        
 
4
        <table>
 
5
                <tr>
 
6
                        <td>
 
7
                                <canvas id='a' width='600' height='450' style='border:2px solid black;'>
 
8
                                </canvas>
 
9
                        </td>
 
10
                        <td>
 
11
                                <div style="border:2px solid black;background-color:#fed;width:300;height:450;">
 
12
                                        <div id="infobox" style="padding:4px;">
 
13
                                        Change values in form to update curve and information box.
 
14
                                        </div>
 
15
                                </div>
 
16
                        </td>                   
 
17
                </tr>
 
18
        </table>        
 
19
 
 
20
        <form>
 
21
        
 
22
        Function: 
 
23
        <select id="function" name="function" onchange="dataentry(this.options[this.selectedIndex].value,this.options[this.selectedIndex].label);">
 
24
                        <option value="Func">Linear</option>
 
25
                        <option value="Func">Step</option>
 
26
                        <option value="Func">Smoothstep</option>
 
27
        </select>                       
 
28
        <br>
 
29
        
 
30
 
 
31
                        
 
32
        </form>         
 
33
        <br>
 
34
        
 
35
        
 
36
        
 
37
        </div>
 
38
 
 
39
        <script lang='Javascript'>
 
40
                
 
41
                var mx=100,my=100,clickstate=0;
 
42
 
 
43
                function ev_mouseup(ev)
 
44
                {
 
45
                                clickstate=0;
 
46
                }
 
47
                
 
48
                function ev_mousedown(ev)
 
49
                {
 
50
                                clickstate=1;
 
51
                }
 
52
                
 
53
                function ev_mousemove (ev) 
 
54
                {
 
55
                                if(clickstate==1){
 
56
                                          if (ev.layerX||ev.layerX==0) { // Firefox
 
57
                                                    mx=ev.layerX-acanvas.offsetLeft;
 
58
                                                    my=ev.layerY-acanvas.offsetTop;
 
59
                                          } else if (ev.offsetX || ev.offsetX == 0) { // Opera
 
60
                                                    mx=ev.offsetX-acanvas.offsetLeft;
 
61
                                                    my=ev.offsetY-acanvas.offsetTop;
 
62
                                          }
 
63
                                }               
 
64
                }
 
65
 
 
66
                var acanvas=document.getElementById('a');
 
67
                var context=acanvas.getContext("2d");           
 
68
 
 
69
                // Mouse Events
 
70
                acanvas.addEventListener('mousemove', ev_mousemove, false);
 
71
                acanvas.addEventListener('mouseup', ev_mouseup, false);
 
72
                acanvas.addEventListener('mousedown', ev_mousedown, false);
 
73
 
 
74
                // Touch Events
 
75
                acanvas.addEventListener('touchstart', ev_touchstart, false);
 
76
                acanvas.addEventListener('touchend', ev_touchend, false);
 
77
                acanvas.addEventListener('touchmove', ev_touchmove, false);
 
78
 
 
79
/*
 
80
 
 
81
Single Touch Works!
 
82
 
 
83
Multi Touch Enabled:
 
84
 
 
85
for (var i = 0; i < event.touches.length; i++) {
 
86
    var touch = event.touches[i];
 
87
    ctx.beginPath();
 
88
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
 
89
    ctx.fill();
 
90
    ctx.stroke();
 
91
}
 
92
 
 
93
 
 
94
*/
 
95
 
 
96
                // Touch start event
 
97
                function ev_touchstart(event){  
 
98
                event.preventDefault();  
 
99
                var numtouch = event.touches.length;  
 
100
                clickstate=1;  
 
101
                };  
 
102
 
 
103
                // Touch end event
 
104
                function ev_touchend(event){  
 
105
                event.preventDefault();  
 
106
                var numtouch = event.touches.length;  
 
107
                                clickstate=0;
 
108
                };  
 
109
                
 
110
                // Touch move event
 
111
                function ev_touchmove(event){  
 
112
                event.preventDefault();  
 
113
                var numtouch = event.touches.length;  
 
114
 
 
115
                                targetEvent =  event.touches.item(0);
 
116
//                              mx = targetEvent.clientX;
 
117
//                              my = targetEvent.clientY;
 
118
 
 
119
                                mx = targetEvent.pageX;
 
120
                                my = targetEvent.pageY;
 
121
                };  
 
122
                
 
123
                setTimeout("foo();",20);
 
124
                
 
125
 
 
126
                function foo()
 
127
                {
 
128
                                context.clearRect(0,0,600,600);
 
129
                                
 
130
                                context.strokeStyle = '#000';
 
131
                                context.lineWidth   = 1.5;
 
132
                                if(clickstate==1){
 
133
                                                context.beginPath();
 
134
                                                context.moveTo(0,0);
 
135
                                                context.lineTo(mx,my);
 
136
                                                context.stroke();       
 
137
                                }
 
138
 
 
139
                                setTimeout("foo();",100);
 
140
                                
 
141
          }
 
142
          
 
143
                                        
 
144
        </script>
 
145
 
 
146
        </body>
 
147
</html>