mirror of https://github.com/luileito/jsketch.git
Improved multitouch support
This commit is contained in:
Luis A. Leiva
parent
3c38789797
commit
7cf84d8bb5
|
|
@ -41,11 +41,11 @@
|
|||
// Attach event listeners.
|
||||
if (options.interactive) {
|
||||
elem.bind("mousedown", mousedownHandler);
|
||||
elem.bind("mouseup", mouseupHandler);
|
||||
elem.bind("mousemove", mousemoveHandler);
|
||||
elem.bind("touchstart", touchHandler);
|
||||
elem.bind("touchend", touchHandler);
|
||||
elem.bind("touchmove", touchHandler);
|
||||
elem.bind("mouseup", mouseupHandler);
|
||||
elem.bind("touchstart", touchdownHandler);
|
||||
elem.bind("touchmove", touchmoveHandler);
|
||||
elem.bind("touchend", touchupHandler);
|
||||
// Fix Chrome "bug".
|
||||
this.onselectstart = function(){ return false };
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
// This will store one stroke per touching finger.
|
||||
coords: {},
|
||||
// Date of first coord, used as time origin.
|
||||
timestamp: new Date().getTime(),
|
||||
timestamp: (new Date).getTime(),
|
||||
// Save a pointer to the drawing canvas (jSketch instance).
|
||||
sketch: sketch,
|
||||
// Save also a pointer to the given options.
|
||||
|
|
@ -157,12 +157,12 @@
|
|||
return this.each(function(){
|
||||
var elem = $(this), data = elem.data(_ns), options = data.options;
|
||||
if (options.interactive) {
|
||||
elem.unbind("mousedown", mousedownHandler);
|
||||
elem.unbind("mouseup", mouseupHandler);
|
||||
elem.unbind("mousemove", mousemoveHandler);
|
||||
elem.unbind("mousedown", mousedownHandler);
|
||||
elem.unbind("touchstart", touchHandler);
|
||||
elem.unbind("touchend", touchHandler);
|
||||
elem.unbind("touchmove", touchHandler);
|
||||
elem.unbind("touchend", touchHandler);
|
||||
}
|
||||
elem.removeData(_ns);
|
||||
|
||||
|
|
@ -297,36 +297,70 @@
|
|||
/**
|
||||
* @private
|
||||
*/
|
||||
function mousemoveHandler(e, idx) {
|
||||
if (typeof idx === 'undefined') idx = 0;
|
||||
function mousedownHandler(e) {
|
||||
if (e.originalEvent.touches) return false;
|
||||
downHandler(e);
|
||||
};
|
||||
|
||||
var elem = $(e.target), data = elem.data(_ns), options = data.options;
|
||||
//if (!options.mouseupMovements && !data.sketch.isDrawing) return;
|
||||
// This would grab all penup strokes AFTER drawing something on the canvas for the first time.
|
||||
if ( (!options.mouseupMovements || data.strokes.length === 0) && !data.sketch.isDrawing ) return;
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function mousemoveHandler(e) {
|
||||
if (e.originalEvent.touches) return false;
|
||||
moveHandler(e);
|
||||
};
|
||||
|
||||
var p = getMousePos(e);
|
||||
if (data.sketch.isDrawing) {
|
||||
var last = data.coords[idx][ data.coords[idx].length - 1 ];
|
||||
data.sketch.beginPath().line(last[0], last[1], p.x, p.y).stroke().closePath();
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function mouseupHandler(e) {
|
||||
if (e.originalEvent.touches) return false;
|
||||
upHandler(e);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function touchdownHandler(e) {
|
||||
var touches = e.originalEvent.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
downHandler(touch);
|
||||
}
|
||||
saveMousePos(idx, data, p);
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
if (typeof options.events.mousemove === 'function') {
|
||||
options.events.mousemove(elem, data, e);
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function touchmoveHandler(e) {
|
||||
var touches = e.originalEvent.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
moveHandler(touch);
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function touchupHandler(e) {
|
||||
var touches = e.originalEvent.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
upHandler(touch);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function mousedownHandler(e, idx) {
|
||||
if (typeof idx === 'undefined') idx = 0;
|
||||
|
||||
function downHandler(e) {
|
||||
var idx = e.identifier || 0;
|
||||
var elem = $(e.target), data = elem.data(_ns), options = data.options;
|
||||
data.sketch.isDrawing = true;
|
||||
var p = getMousePos(e);
|
||||
|
||||
// Mark visually 1st point of stroke.
|
||||
if (options.graphics.firstPointSize > 0) {
|
||||
data.sketch.fillCircle(p.x, p.y, options.graphics.firstPointSize);
|
||||
|
|
@ -350,9 +384,30 @@
|
|||
/**
|
||||
* @private
|
||||
*/
|
||||
function mouseupHandler(e, idx) {
|
||||
if (typeof idx === 'undefined') idx = 0;
|
||||
function moveHandler(e) {
|
||||
var idx = e.identifier || 0;
|
||||
var elem = $(e.target), data = elem.data(_ns), options = data.options;
|
||||
//if (!options.mouseupMovements && !data.sketch.isDrawing) return;
|
||||
// This would grab all penup strokes AFTER drawing something on the canvas for the first time.
|
||||
if ( (!options.mouseupMovements || data.strokes.length === 0) && !data.sketch.isDrawing ) return;
|
||||
|
||||
var p = getMousePos(e);
|
||||
if (data.sketch.isDrawing) {
|
||||
var last = data.coords[idx][ data.coords[idx].length - 1 ];
|
||||
data.sketch.beginPath().line(last[0], last[1], p.x, p.y).stroke().closePath();
|
||||
}
|
||||
saveMousePos(idx, data, p);
|
||||
|
||||
if (typeof options.events.mousemove === 'function') {
|
||||
options.events.mousemove(elem, data, e);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function upHandler(e) {
|
||||
var idx = e.identifier || 0;
|
||||
var elem = $(e.target), data = elem.data(_ns), options = data.options;
|
||||
data.sketch.isDrawing = false;
|
||||
data.strokes.push(data.coords[idx]);
|
||||
|
|
@ -363,40 +418,4 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function touchHandler(e) {
|
||||
e.preventDefault();
|
||||
var elem = $(e.target);
|
||||
var touches = e.originalEvent.changedTouches;
|
||||
// Remove (emulated) mouse events on mobile devices.
|
||||
switch (e.type) {
|
||||
case "touchstart":
|
||||
elem.unbind(e.type, mousedownHandler);
|
||||
for (var i = 0, t = touches[i]; i < touches.length; i++) {
|
||||
for (var o in e) t[o] = e[o];
|
||||
mousedownHandler(t, t.identifier);
|
||||
}
|
||||
break;
|
||||
case "touchmove":
|
||||
elem.unbind(e.type, mousemoveHandler);
|
||||
for (var i = 0, t = touches[i]; i < touches.length; i++) {
|
||||
for (var o in e) t[o] = e[o];
|
||||
mousemoveHandler(t, t.identifier);
|
||||
}
|
||||
break;
|
||||
case "touchend":
|
||||
elem.unbind(e.type, mouseupHandler);
|
||||
for (var i = 0, t = touches[i]; i < touches.length; i++) {
|
||||
for (var o in e) t[o] = e[o];
|
||||
mouseupHandler(t, t.identifier);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
* jQuery sketchable | v1.8 | Luis A. Leiva | MIT license
|
||||
* A jQuery plugin for the jSketch drawing library.
|
||||
*/
|
||||
(function(g){var e="sketchable";var b={init:function(k){var j=g.extend(true,{},g.fn.sketchable.defaults,k||{});return this.each(function(){var l=g(this),m=l.data(e);if(!m){if(j.interactive){l.bind("mousedown",h);l.bind("mouseup",i);l.bind("mousemove",f);l.bind("touchstart",d);l.bind("touchend",d);l.bind("touchmove",d);this.onselectstart=function(){return false}}}var n=new jSketch(this,j.graphics);n.isDrawing=false;l.data(e,{strokes:[],coords:{},timestamp:new Date().getTime(),sketch:n,options:j});if(typeof j.events.init==="function"){j.events.init(l,l.data(e))}})},strokes:function(j){if(j){return this.each(function(){var l=g(this),m=l.data(e);m.strokes=j})}else{var k=g(this).data(e);return k.strokes}},handler:function(j){return this.each(function(){var k=g(this),l=k.data(e);j(k,l)})},clear:function(){return this.each(function(){var k=g(this),l=k.data(e),j=l.options;l.sketch.clear();l.strokes=[];l.coords={};if(typeof j.events.clear==="function"){j.events.clear(k,l)}})},reset:function(j){return this.each(function(){var l=g(this),m=l.data(e),k=m.options;l.sketchable("destroy").sketchable(j);if(typeof k.events.reset==="function"){k.events.reset(l,m)}})},destroy:function(){return this.each(function(){var k=g(this),l=k.data(e),j=l.options;if(j.interactive){k.unbind("mousedown",h);k.unbind("mouseup",i);k.unbind("mousemove",f);k.unbind("touchstart",d);k.unbind("touchend",d);k.unbind("touchmove",d)}k.removeData(e);if(typeof j.events.destroy==="function"){j.events.destroy(k,l)}})}};g.fn.sketchable=function(j){if("methods functions hooks".split(" ").indexOf(j)>-1){return b}else{if(b[j]){return b[j].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof j==="object"||!j){return b.init.apply(this,arguments)}else{g.error("Method "+j+' does not exist. See jQuery.sketchable("methods").')}}}return this};g.fn.sketchable.defaults={interactive:true,mouseupMovements:false,relTimestamps:false,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}};function c(k){var j=g(k.target),l=j.offset();return{x:Math.round(k.pageX-l.left),y:Math.round(k.pageY-l.top)}}function a(j,k,m){if(!k.coords[j]){k.coords[j]=[]}var l=(new Date).getTime();if(k.options.relTimestamps){if(k.strokes.length===0&&k.coords[j].length===0){k.timestamp=l}l-=k.timestamp}k.coords[j].push([m.x,m.y,l,+k.sketch.isDrawing])}function f(q,j){if(typeof j==="undefined"){j=0}var m=g(q.target),n=m.data(e),k=n.options;if((!k.mouseupMovements||n.strokes.length===0)&&!n.sketch.isDrawing){return}var o=c(q);if(n.sketch.isDrawing){var l=n.coords[j][n.coords[j].length-1];n.sketch.beginPath().line(l[0],l[1],o.x,o.y).stroke().closePath()}a(j,n,o);if(typeof k.events.mousemove==="function"){k.events.mousemove(m,n,q)}}function h(o,j){if(typeof j==="undefined"){j=0}var l=g(o.target),m=l.data(e),k=m.options;m.sketch.isDrawing=true;var n=c(o);if(k.graphics.firstPointSize>0){m.sketch.fillCircle(n.x,n.y,k.graphics.firstPointSize)}if(!m.coords[j]){m.coords[j]=[]}if(m.coords[j].length>0){m.strokes.push(m.coords[j]);m.coords[j]=[]}a(j,m,n);if(typeof k.events.mousedown==="function"){k.events.mousedown(l,m,o)}}function i(n,j){if(typeof j==="undefined"){j=0}var l=g(n.target),m=l.data(e),k=m.options;m.sketch.isDrawing=false;m.strokes.push(m.coords[j]);m.coords[j]=[];if(typeof k.events.mouseup==="function"){k.events.mouseup(l,m,n)}}function d(n){n.preventDefault();var l=g(n.target);var m=n.originalEvent.changedTouches;switch(n.type){case"touchstart":l.unbind(n.type,h);for(var k=0,j=m[k];k<m.length;k++){for(var p in n){j[p]=n[p]}h(j,j.identifier)}break;case"touchmove":l.unbind(n.type,f);for(var k=0,j=m[k];k<m.length;k++){for(var p in n){j[p]=n[p]}f(j,j.identifier)}break;case"touchend":l.unbind(n.type,i);for(var k=0,j=m[k];k<m.length;k++){for(var p in n){j[p]=n[p]}i(j,j.identifier)}break;default:return}return false}})(jQuery);
|
||||
;(function(j){var g="sketchable";var e={init:function(p){var o=j.extend(true,{},j.fn.sketchable.defaults,p||{});return this.each(function(){var q=j(this),r=q.data(g);if(!r){if(o.interactive){q.bind("mousedown",l);q.bind("mousemove",h);q.bind("mouseup",n);q.bind("touchstart",i);q.bind("touchmove",d);q.bind("touchend",b);this.onselectstart=function(){return false}}}var s=new jSketch(this,o.graphics);s.isDrawing=false;q.data(g,{strokes:[],coords:{},timestamp:(new Date).getTime(),sketch:s,options:o});if(typeof o.events.init==="function"){o.events.init(q,q.data(g))}})},strokes:function(o){if(o){return this.each(function(){var q=j(this),r=q.data(g);r.strokes=o})}else{var p=j(this).data(g);return p.strokes}},handler:function(o){return this.each(function(){var p=j(this),q=p.data(g);o(p,q)})},clear:function(){return this.each(function(){var p=j(this),q=p.data(g),o=q.options;q.sketch.clear();q.strokes=[];q.coords={};if(typeof o.events.clear==="function"){o.events.clear(p,q)}})},reset:function(o){return this.each(function(){var q=j(this),r=q.data(g),p=r.options;q.sketchable("destroy").sketchable(o);if(typeof p.events.reset==="function"){p.events.reset(q,r)}})},destroy:function(){return this.each(function(){var p=j(this),q=p.data(g),o=q.options;if(o.interactive){p.unbind("mouseup",n);p.unbind("mousemove",h);p.unbind("mousedown",l);p.unbind("touchstart",touchHandler);p.unbind("touchmove",touchHandler);p.unbind("touchend",touchHandler)}p.removeData(g);if(typeof o.events.destroy==="function"){o.events.destroy(p,q)}})}};j.fn.sketchable=function(o){if("methods functions hooks".split(" ").indexOf(o)>-1){return e}else{if(e[o]){return e[o].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof o==="object"||!o){return e.init.apply(this,arguments)}else{j.error("Method "+o+' does not exist. See jQuery.sketchable("methods").')}}}return this};j.fn.sketchable.defaults={interactive:true,mouseupMovements:false,relTimestamps:false,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}};function f(p){var o=j(p.target),q=o.offset();return{x:Math.round(p.pageX-q.left),y:Math.round(p.pageY-q.top)}}function c(o,p,r){if(!p.coords[o]){p.coords[o]=[]}var q=(new Date).getTime();if(p.options.relTimestamps){if(p.strokes.length===0&&p.coords[o].length===0){p.timestamp=q}q-=p.timestamp}p.coords[o].push([r.x,r.y,q,+p.sketch.isDrawing])}function l(o){if(o.originalEvent.touches){return false}m(o)}function h(o){if(o.originalEvent.touches){return false}k(o)}function n(o){if(o.originalEvent.touches){return false}a(o)}function i(q){var p=q.originalEvent.changedTouches;for(var o=0;o<p.length;o++){var r=p[o];m(r)}q.preventDefault()}function d(q){var p=q.originalEvent.changedTouches;for(var o=0;o<p.length;o++){var r=p[o];k(r)}q.preventDefault()}function b(q){var p=q.originalEvent.changedTouches;for(var o=0;o<p.length;o++){var r=p[o];a(r)}}function m(u){var o=u.identifier||0;var r=j(u.target),s=r.data(g),q=s.options;s.sketch.isDrawing=true;var t=f(u);if(q.graphics.firstPointSize>0){s.sketch.fillCircle(t.x,t.y,q.graphics.firstPointSize)}if(!s.coords[o]){s.coords[o]=[]}if(s.coords[o].length>0){s.strokes.push(s.coords[o]);s.coords[o]=[]}c(o,s,t);if(typeof q.events.mousedown==="function"){q.events.mousedown(r,s,u)}}function k(v){var o=v.identifier||0;var s=j(v.target),t=s.data(g),q=t.options;if((!q.mouseupMovements||t.strokes.length===0)&&!t.sketch.isDrawing){return}var u=f(v);if(t.sketch.isDrawing){var r=t.coords[o][t.coords[o].length-1];t.sketch.beginPath().line(r[0],r[1],u.x,u.y).stroke().closePath()}c(o,t,u);if(typeof q.events.mousemove==="function"){q.events.mousemove(s,t,v)}}function a(s){var o=s.identifier||0;var q=j(s.target),r=q.data(g),p=r.options;r.sketch.isDrawing=false;r.strokes.push(r.coords[o]);r.coords[o]=[];if(typeof p.events.mouseup==="function"){p.events.mouseup(q,r,s)}}})(jQuery);
|
||||
Loading…
Reference in New Issue