mirror of https://github.com/luileito/jsketch.git
Added option to capture mouseUp strokes
This commit is contained in:
Luis Leiva
parent
1a9dc38243
commit
1fe1753fd0
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* jQuery sketchable 1.4 | Luis A. Leiva | MIT license
|
||||
* jQuery sketchable 1.5 | Luis A. Leiva | MIT license
|
||||
* This is a jQuery plugin for the jSketch drawing class.
|
||||
*/
|
||||
/**
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
// Save a pointer to the drawing canvas.
|
||||
canvas: sketch
|
||||
});
|
||||
|
||||
// Attach event listeners.
|
||||
if (options.interactive) {
|
||||
elem.bind("mousedown", mousedownHandler);
|
||||
elem.bind("mouseup", mouseupHandler);
|
||||
|
|
@ -67,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 };
|
||||
}
|
||||
}
|
||||
|
|
@ -185,8 +185,8 @@
|
|||
* or a configuration object.
|
||||
* @returns jQuery
|
||||
* @class
|
||||
* @version 1.4
|
||||
* @date 8 Apr 2014
|
||||
* @version 1.5
|
||||
* @date 9 Apr 2014
|
||||
* @example
|
||||
* $(selector).sketchable();
|
||||
* $(selector).sketchable({interactive:false});
|
||||
|
|
@ -211,6 +211,7 @@
|
|||
* @example
|
||||
* $(selector).sketchable({
|
||||
* interactive: true,
|
||||
* mouseUpMovements: false,
|
||||
* events: {
|
||||
* create: function(elem, data){},
|
||||
* clear: function(elem, data){},
|
||||
|
|
@ -231,10 +232,12 @@
|
|||
* });
|
||||
*/
|
||||
$.fn.sketchable.defaults = {
|
||||
// if interactive is set to true, you can:
|
||||
// * draw on canvas via mouse/pen/touch input
|
||||
// * assign callbacks to a number of "key" events like create, mouseUp, etc.
|
||||
// In interactive mode, it's possible to draw via mouse/pen/touch input.
|
||||
interactive: true,
|
||||
// Indicate whether non-drawing strokes should be registered as well.
|
||||
// Notice that the last mouseUp stroke is never recorded, as the user has already finished drawing.
|
||||
mouseUpMovements: false,
|
||||
// Callback Event
|
||||
events: {
|
||||
// create: function(elem, data){},
|
||||
// clear: function(elem, data){},
|
||||
|
|
@ -273,9 +276,7 @@
|
|||
|
||||
function mousemoveHandler(e) {
|
||||
var elem = $(e.target), data = elem.data(_ns);
|
||||
// XXX: Comment this to record _all_ move movements on the canvas,
|
||||
// including those where the user is not drawing.
|
||||
if (!data.canvas.isDrawing) return;
|
||||
if (!options.mouseUpMovements && !data.canvas.isDrawing) return;
|
||||
|
||||
var p = getMousePos(e);
|
||||
if (data.canvas.isDrawing) data.canvas.lineTo(p.x, p.y);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* jQuery sketchable 1.4 | Luis A. Leiva | MIT license
|
||||
* jQuery sketchable 1.5 | Luis A. Leiva | MIT license
|
||||
* This is a jQuery plugin for the jSketch drawing class.
|
||||
*/
|
||||
(function(g){var j,e="sketchable";var b={init:function(k){j=g.extend({},g.fn.sketchable.defaults,k);return this.each(function(){var l=g(this),m=l.data(e);if(!m){var n=new jSketch(this,{fillStyle:j.graphics.fillStyle,strokeStyle:j.graphics.strokeStyle,lineWidth:j.graphics.lineWidth,});n.isDrawing=false;l.data(e,{strokes:[],coords:[],timestamp:new Date().getTime(),canvas:n});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}}}if(typeof j.events.create==="function"){j.events.create(l,l.data(e))}})},strokes:function(k){if(k){return this.each(function(){var m=g(this),n=m.data(e);n.strokes=k})}else{var l=g(this).data(e);return l.strokes}},handler:function(k){return this.each(function(){var l=g(this),m=l.data(e);k(l,m)})},clear:function(){return this.each(function(){var k=g(this),l=k.data(e);l.canvas.clear();l.strokes=[];if(typeof j.events.clear==="function"){j.events.clear(k,l)}})},reset:function(k){return this.each(function(){var l=g(this),m=l.data(e);l.sketchable("destroy").sketchable(k);if(typeof j.events.reset==="function"){j.events.reset(l,m)}})},destroy:function(){return this.each(function(){var k=g(this),l=k.data(e);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(k){if(b[k]){return b[k].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof k==="object"||!k){return b.init.apply(this,arguments)}else{g.error("Method "+k+" does not exist on jQuery.sketchable")}}return this};g.fn.sketchable.defaults={interactive:true,events:{},graphics:{fillStyle:"#F0F",strokeStyle:"#F0F",lineWidth:3,firstPointSize:0}};function c(l){var k=g(l.target),m=k.offset();return{x:Math.round(l.pageX-m.left),y:Math.round(l.pageY-m.top)}}function a(k,m){var l=(new Date).getTime();k.coords.push([m.x,m.y,l,k.canvas.isDrawing])}function f(n){var k=g(n.target),l=k.data(e);if(!l.canvas.isDrawing){return}var m=c(n);if(l.canvas.isDrawing){l.canvas.lineTo(m.x,m.y)}a(l,m);if(typeof j.events.mouseMove==="function"){j.events.mouseMove(n)}}function h(n){var k=g(n.target),l=k.data(e);l.canvas.isDrawing=true;var m=c(n);l.canvas.beginPath();if(j.graphics.firstPointSize>0){l.canvas.fillCircle(m.x,m.y,j.graphics.firstPointSize)}a(l,m);if(typeof j.events.mouseDown==="function"){j.events.mouseDown(n)}}function i(m){var k=g(m.target),l=k.data(e);l.canvas.isDrawing=false;l.canvas.closePath();l.strokes.push(l.coords);l.coords=[];if(typeof j.events.mouseUp==="function"){j.events.mouseUp(m)}}function d(l){l.preventDefault();var k=g(l.target);var n=l.originalEvent.changedTouches[0];for(var m in l){n[m]=l[m]}switch(l.type){case"touchstart":k.unbind(l.type,h);h(n);break;case"touchmove":k.unbind(l.type,f);f(n);break;case"touchend":k.unbind(l.type,i);i(n);break;default:return}}})(jQuery);
|
||||
(function(g){var j,e="sketchable";var b={init:function(k){j=g.extend({},g.fn.sketchable.defaults,k);return this.each(function(){var l=g(this),m=l.data(e);if(!m){var n=new jSketch(this,{fillStyle:j.graphics.fillStyle,strokeStyle:j.graphics.strokeStyle,lineWidth:j.graphics.lineWidth,});n.isDrawing=false;l.data(e,{strokes:[],coords:[],timestamp:new Date().getTime(),canvas:n});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}}}if(typeof j.events.create==="function"){j.events.create(l,l.data(e))}})},strokes:function(k){if(k){return this.each(function(){var m=g(this),n=m.data(e);n.strokes=k})}else{var l=g(this).data(e);return l.strokes}},handler:function(k){return this.each(function(){var l=g(this),m=l.data(e);k(l,m)})},clear:function(){return this.each(function(){var k=g(this),l=k.data(e);l.canvas.clear();l.strokes=[];if(typeof j.events.clear==="function"){j.events.clear(k,l)}})},reset:function(k){return this.each(function(){var l=g(this),m=l.data(e);l.sketchable("destroy").sketchable(k);if(typeof j.events.reset==="function"){j.events.reset(l,m)}})},destroy:function(){return this.each(function(){var k=g(this),l=k.data(e);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(k){if(b[k]){return b[k].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof k==="object"||!k){return b.init.apply(this,arguments)}else{g.error("Method "+k+" does not exist on jQuery.sketchable")}}return this};g.fn.sketchable.defaults={interactive:true,mouseUpMovements:false,events:{},graphics:{firstPointSize:0,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F"}};function c(l){var k=g(l.target),m=k.offset();return{x:Math.round(l.pageX-m.left),y:Math.round(l.pageY-m.top)}}function a(k,m){var l=(new Date).getTime();k.coords.push([m.x,m.y,l,k.canvas.isDrawing])}function f(n){var k=g(n.target),l=k.data(e);if(!j.mouseUpMovements&&!l.canvas.isDrawing){return}var m=c(n);if(l.canvas.isDrawing){l.canvas.lineTo(m.x,m.y)}a(l,m);if(typeof j.events.mouseMove==="function"){j.events.mouseMove(k,l,n)}}function h(n){var k=g(n.target),l=k.data(e);l.canvas.isDrawing=true;var m=c(n);l.canvas.beginPath();if(j.graphics.firstPointSize>0){l.canvas.fillCircle(m.x,m.y,j.graphics.firstPointSize)}a(l,m);if(typeof j.events.mouseDown==="function"){j.events.mouseDown(k,l,n)}}function i(m){var k=g(m.target),l=k.data(e);l.canvas.isDrawing=false;l.canvas.closePath();l.strokes.push(l.coords);l.coords=[];if(typeof j.events.mouseUp==="function"){j.events.mouseUp(k,l,m)}}function d(l){l.preventDefault();var k=g(l.target);var n=l.originalEvent.changedTouches[0];for(var m in l){n[m]=l[m]}switch(l.type){case"touchstart":k.unbind(l.type,h);h(n);break;case"touchmove":k.unbind(l.type,f);f(n);break;case"touchend":k.unbind(l.type,i);i(n);break;default:return}}})(jQuery);
|
||||
Loading…
Reference in New Issue