From a953062b4f49401d951eac638b1573fd25f5b1a4 Mon Sep 17 00:00:00 2001 From: Luis Leiva Date: Tue, 8 Apr 2014 12:34:18 +0200 Subject: [PATCH] Added time + status to strokes array, plus minor fixes --- jquery.sketchable.js | 99 ++++++++++++++++++++++++++------------------ 1 file changed, 58 insertions(+), 41 deletions(-) diff --git a/jquery.sketchable.js b/jquery.sketchable.js index 11a2b0c..7dd3b2d 100644 --- a/jquery.sketchable.js +++ b/jquery.sketchable.js @@ -1,19 +1,19 @@ /*! - * jQuery sketchable 1.3 | Luis A. Leiva | MIT license + * jQuery sketchable 1.4 | Luis A. Leiva | MIT license * This is a jQuery plugin built on top of jSketch drawing class. */ /** - * @name $ - * @class - * See the jQuery library for full details. - * This just documents the method that is added to jQuery by this plugin. - */ +* @name $ +* @class +* See the jQuery library for full details. +* This just documents the method that is added to jQuery by this plugin. +*/ /** - * @name $.fn - * @class - * See the jQuery library for full details. - * This just documents the method that is added to jQuery by this plugin. - */ +* @name $.fn +* @class +* See the jQuery library for full details. +* This just documents the method that is added to jQuery by this plugin. +*/ ;(function($){ // config options + namespace ID var options, _ns = "sketchable"; @@ -46,11 +46,17 @@ fillStyle: options.graphics.fillStyle, strokeStyle: options.graphics.strokeStyle, lineWidth: options.graphics.lineWidth, - })//.background(options.graphics.background); // let user decide... - + }); + // Flag drawing state. + sketch.isDrawing = false; elem.data(_ns, { - strokes: [], // mouse strokes - coords: [], // a single stroke + // All strokes will be stored here. + strokes: [], + // This array represents a single stroke. + coords: [], + // Date of first coord, used as time origin. + timestamp: new Date().getTime(), + // Save a pointer to the drawing canvas. canvas: sketch }); @@ -61,7 +67,7 @@ elem.bind("touchstart", touchHandler); elem.bind("touchend", touchHandler); elem.bind("touchmove", touchHandler); - // fix Chrome "bug" + // fix Chrome bug this.onselectstart = function(){ return false }; } } @@ -72,7 +78,7 @@ }, /** * Gets/Sets drawing data strokes sequence. - * @param Array arr data strokes: multidimensional array of [x,y,status]'s; status = 0 (pen down) or 1 (pen up) + * @param Array arr data strokes: multidimensional array of {x,y,time,status} tuples; status = 0 (pen down) or 1 (pen up) * @return Strokes object on get, jQuery on set (with the new data attached) * @name strokes * @methodOf methods @@ -88,7 +94,6 @@ }); } else { // getter var data = $(this).data(_ns); - return data.strokes; } }, @@ -125,7 +130,7 @@ data.strokes = []; if (typeof options.events.clear === 'function') { options.events.clear(elem, data); - } + } }); }, /** @@ -180,7 +185,7 @@ * or a configuration object. * @returns jQuery * @class - * @version 1.3 + * @version 1.4 * @example * $(selector).sketchable(); * $(selector).sketchable({interactive:false}); @@ -206,15 +211,15 @@ * $(selector).sketchable({ * interactive: true, * events: { - * create: function(elem,data){}, - * clear: function(elem,data){}, - * destroy: function(elem,data){}, + * create: function(elem,data){}, + * clear: function(elem,data){}, + * destroy: function(elem,data){}, * mouseDown: function(evt){}, * mouseMove: function(evt){}, - * mouseUp: function(evt){}, + * mouseUp: function(evt){}, * }, * graphics: { - * lineWidth: 2, + * lineWidth: 3, * strokeStyle: '#F0F', * fillStyle: '#F0F', * lineCap: "round", @@ -229,18 +234,19 @@ // * assign callbacks to onMouseDown(evt), onMouseMove(evt), onMouseUp(evt) interactive: true, events: { - // create: function(elem,data){}, - // clear: function(elem,data){}, - // destroy: function(elem,data){}, + // create: function(elem,data){}, + // clear: function(elem,data){}, + // destroy: function(elem,data){}, // mouseDown: function(evt){}, // mouseMove: function(evt){}, - // mouseUp: function(evt){}, + // mouseUp: function(evt){}, }, // TODO: add more jSketch config options graphics: { fillStyle: '#F0F', strokeStyle: '#F0F', - lineWidth: 2 + lineWidth: 3, + firstPointSize: 0 //lineCap: //lineJoin: //miterLimit: @@ -254,18 +260,25 @@ function getMousePos(e) { var elem = $(e.target), pos = elem.offset(); return { - x: e.pageX - pos.left, - y: e.pageY - pos.top + x: Math.round(e.pageX - pos.left), + y: Math.round(e.pageY - pos.top) } }; - + + function saveMousePos(data, pt) { + //var timeDelta = (new Date).getTime() - data.timestamp; + var time = (new Date).getTime(); + data.coords.push([ pt.x, pt.y, time, data.canvas.isDrawing ]); + }; + function mousemoveHandler(e) { var elem = $(e.target), data = elem.data(_ns); + // XXX: Comment this to record _all_ move movements on the canvas. if (!data.canvas.isDrawing) return; + var p = getMousePos(e); - data.canvas.lineTo(p.x, p.y); - //data.coords.push({ x:p.x, y:p.y, type:0 }); - data.coords.push([ p.x, p.y, 0 ]); + if (data.canvas.isDrawing) data.canvas.lineTo(p.x, p.y); + saveMousePos(data, p); if (typeof options.events.mouseMove === 'function') { options.events.mouseMove(e); } @@ -276,10 +289,11 @@ data.canvas.isDrawing = true; var p = getMousePos(e); data.canvas.beginPath(); - // mark visually 1st point of stroke - data.canvas.fillCircle(p.x,p.y,options.graphics.lineWidth); - //data.coords.push({ x:p.x, y:p.y, type:1 }); - data.coords.push([ p.x, p.y, 1 ]); + // Mark visually 1st point of stroke. + if (options.graphics.firstPointSize > 0) { + data.canvas.fillCircle(p.x, p.y, options.graphics.firstPointSize); + } + saveMousePos(data, p); if (typeof options.events.mouseDown === 'function') { options.events.mouseDown(e); } @@ -300,7 +314,10 @@ e.preventDefault(); var elem = $(e.target); var touch = e.originalEvent.changedTouches[0]; - touch.type = e.type; + // Copy original event properties to touch event to simulate mouse event. + for (var o in e) { + touch[o] = e[o]; + } // remove (emulated) mouse events on mobile devices switch(e.type) { case "touchstart":