-
Notifications
You must be signed in to change notification settings - Fork 3
/
jquery.gesture.dev.js
58 lines (58 loc) · 2.12 KB
/
jquery.gesture.dev.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
// $.gestures dev utilities
( function ( $ ) {
$.extend( $.gesture.prototype, {
export : function ( name ) {
return JSON.stringify( name ?
this.gestures[ name ].strokes :
this.strokes
);
}
, board : function ( width, height ) {
var self = this
, point = function ( x, y ) {
ctx.fillStyle = ctx.strokeStyle = 'rgb(' + Math.floor( 201 * Math.random() ) + ',' + Math.floor( 201 * Math.random() ) + ',' + Math.floor( 201 * Math.random() ) + ')';
ctx.fillRect( x - 2, y - 2, 4, 4 );
ctx.lineWidth = 2;
}
, line = function ( from, to ) {
ctx.beginPath();
ctx.moveTo( from[ 0 ], from[ 1 ] );
ctx.lineTo( to[ 0 ], to[ 1 ] );
ctx.closePath();
ctx.stroke();
}
, canvas = $( '<canvas>', {
tabindex : 1 // allow focus to catch key events ;)
, width : width = width || 400
, height : height = height || 300
, css : { background : '#eee', border: '1px solid #ccc' }
} )
, ctx = canvas.get( 0 ).getContext( '2d' );
console.log( 'Draw gestures on the board.\nPress ESC to clear the board, ENTER to save new gesture & SPACE to recognize drawn gesture.\nUse TAB to get focus on the board without drawing on it.' );
return self
.listen( canvas )
.on( 'mousedown.gesture', function ( event ) {
if ( event.which > 1 )
return;
event.type = 'record.gesture';
point.apply( null, canvas.triggerHandler( event, [ true ] ) );
canvas
.on( 'mousemove.gesture.drawing', function ( event ) {
event.type = 'record.gesture';
self.points.length &&
line( self.points[ self.points.length - 1 ], canvas.triggerHandler( event ) );
} )
.on( 'mouseup.gesture.drawing', function () {
canvas
.unbind( '.drawing' )
.triggerHandler( 'save.gesture' );
} );
} )
.on( 'reset.gesture', function () {
ctx.canvas.width = width;
ctx.canvas.height = height;
} )
.trigger( 'reset.gesture' ); // fix sizing bug + clean up
}
} );
} )( jQuery )