This repository has been archived by the owner on Jan 8, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
fingersTouch.js
101 lines (72 loc) · 2.84 KB
/
fingersTouch.js
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var playground = document.getElementById( "playground" );
var fingersInfos = document.getElementById( "fingersInfos" );
var centerInfos = document.getElementById( "centerInfos" );
var centerPointY = document.height / 2;
var centerPointX = document.width / 2;
var isMoving = false;
$( centerInfos )
.html( 'Center <br/> x:'+ centerPointX +' y:'+ centerPointY );
playground.ontouchstart = function ( event ) {
event.preventDefault();
$('#playground .touch-point').remove();
isMoving = true;
var fingerPositions = [];
if ( event.touches.length > 0 ) {
var pointsHtml = '';
var fingersInfosHtml = '';
for ( var i = 0; i < event.touches.length; i++ )
{
fingerPositions.push(
{
"startX": event.touches[ i ].pageX,
"startY": event.touches[ i ].pageY
}
);
pointsHtml = '<div class="finger'+i+' touch-point"><span>' + fingerPositions[ i ].startX +'px, '+ fingerPositions[ i ].startY+'px</span></div>';
$( '#playground' ).append( pointsHtml );
fingersInfosHtml += '<div class="finger'+i+' touch-point mini"></div> #' + (i+1) + ' x: '+ fingerPositions[ i ].startX + ' y:' + fingerPositions[ i ].startY;
}
$( fingersInfos ).html( fingersInfosHtml );
var touchPoints = [];
for ( var i = 0; i < event.touches.length; i++ )
{
touchPoints.push( document.querySelectorAll( '.touch-point' )[ i ] );
touchPoints[ i ].style.webkitTransform =
'translate3d('
+ ( event.touches[ i ].pageX - 20 ) + 'px, '
+ ( event.touches[ i ].pageY - 20 ) + 'px, 0)'
;
}
playground.ontouchmove = function( event ) {
event.preventDefault();
if ( isMoving ) {
var fingersInfosHtml = '';
for ( var i = 0; i < touchPoints.length; i++ ) {
touchPoints[ i ].style.webkitTransform =
'translate3d('
+ ( event.touches[ i ].pageX - 20 ) + 'px, '
+ ( event.touches[ i ].pageY - 20) + 'px, 0)'
;
$( touchPoints[ i ] )
.find( 'span' )
.html(
'#' + (i+1) + ' '
+ event.touches[ i ].pageX + 'px, '
+ event.touches[ i ].pageY + 'px'
)
;
if ( i > 0 )
{
fingersInfosHtml += '<br/>';
}
fingersInfosHtml += '<div class="finger'+i+' touch-point mini"></div> #' + (i+1) + ' x: '+ event.touches[ i ].pageX + ' y:' + event.touches[ i ].pageY;
}
$( fingersInfos ).html( fingersInfosHtml );
}
}; // move
playground.ontouchend = function( event ) {
event.preventDefault();
isMoving = false;
}
}
}