diff --git a/jquery.sketchable.js b/jquery.sketchable.js index 7dd3b2d..0767fc5 100644 --- a/jquery.sketchable.js +++ b/jquery.sketchable.js @@ -1,6 +1,6 @@ /*! * jQuery sketchable 1.4 | Luis A. Leiva | MIT license - * This is a jQuery plugin built on top of jSketch drawing class. + * This is a jQuery plugin for the jSketch drawing class. */ /** * @name $ @@ -185,7 +185,8 @@ * or a configuration object. * @returns jQuery * @class - * @version 1.4 + * @version 1.4 + * @date 8 Apr 2014 * @example * $(selector).sketchable(); * $(selector).sketchable({interactive:false}); @@ -266,7 +267,7 @@ }; function saveMousePos(data, pt) { - //var timeDelta = (new Date).getTime() - data.timestamp; + //var delta = (new Date).getTime() - data.timestamp; var time = (new Date).getTime(); data.coords.push([ pt.x, pt.y, time, data.canvas.isDrawing ]); }; diff --git a/jquery.sketchable.min.js b/jquery.sketchable.min.js index 93044f7..c8aa08e 100644 --- a/jquery.sketchable.min.js +++ b/jquery.sketchable.min.js @@ -1,5 +1,5 @@ -/* - * jQuery sketchable 1.3 | Luis A. Leiva | MIT license - * This is a jQuery plugin built on top of jSketch drawing class. +/*! + * jQuery sketchable 1.4 | Luis A. Leiva | MIT license + * This is a jQuery plugin for the jSketch drawing class. */ -(function(f){var i,d="sketchable";var a={init:function(j){i=f.extend({},f.fn.sketchable.defaults,j);return this.each(function(){var k=f(this),l=k.data(d);if(!l){var m=new jSketch(this,{fillStyle:i.graphics.fillStyle,strokeStyle:i.graphics.strokeStyle,lineWidth:i.graphics.lineWidth,});k.data(d,{strokes:[],coords:[],canvas:m});if(i.interactive){k.bind("mousedown",g);k.bind("mouseup",h);k.bind("mousemove",e);k.bind("touchstart",c);k.bind("touchend",c);k.bind("touchmove",c);this.onselectstart=function(){return false}}}if(typeof i.events.create==="function"){i.events.create(k,k.data(d))}})},strokes:function(j){if(j){return this.each(function(){var l=f(this),m=l.data(d);m.strokes=j})}else{var k=f(this).data(d);return k.strokes}},handler:function(j){return this.each(function(){var k=f(this),l=k.data(d);j(k,l)})},clear:function(){return this.each(function(){var j=f(this),k=j.data(d);k.canvas.clear();k.strokes=[];if(typeof i.events.clear==="function"){i.events.clear(j,k)}})},reset:function(j){return this.each(function(){var k=f(this),l=k.data(d);k.sketchable("destroy").sketchable(j);if(typeof i.events.reset==="function"){i.events.reset(k,l)}})},destroy:function(){return this.each(function(){var j=f(this),k=j.data(d);if(i.interactive){j.unbind("mousedown",g);j.unbind("mouseup",h);j.unbind("mousemove",e);j.unbind("touchstart",c);j.unbind("touchend",c);j.unbind("touchmove",c)}j.removeData(d);if(typeof i.events.destroy==="function"){i.events.destroy(j,k)}})}};f.fn.sketchable=function(j){if(a[j]){return a[j].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof j==="object"||!j){return a.init.apply(this,arguments)}else{f.error("Method "+j+" does not exist on jQuery.sketchable")}}return this};f.fn.sketchable.defaults={interactive:true,events:{},graphics:{fillStyle:"#F0F",strokeStyle:"#F0F",lineWidth:2}};function b(k){var j=f(k.target),l=j.offset();return{x:k.pageX-l.left,y:k.pageY-l.top}}function e(m){var j=f(m.target),k=j.data(d);if(!k.canvas.isDrawing){return}var l=b(m);k.canvas.lineTo(l.x,l.y);k.coords.push([l.x,l.y,0]);if(typeof i.events.mouseMove==="function"){i.events.mouseMove(m)}}function g(m){var j=f(m.target),k=j.data(d);k.canvas.isDrawing=true;var l=b(m);k.canvas.beginPath();k.canvas.fillCircle(l.x,l.y,i.graphics.lineWidth);k.coords.push([l.x,l.y,1]);if(typeof i.events.mouseDown==="function"){i.events.mouseDown(m)}}function h(l){var j=f(l.target),k=j.data(d);k.canvas.isDrawing=false;k.canvas.closePath();k.strokes.push(k.coords);k.coords=[];if(typeof i.events.mouseUp==="function"){i.events.mouseUp(l)}}function c(k){k.preventDefault();var j=f(k.target);var l=k.originalEvent.changedTouches[0];l.type=k.type;switch(k.type){case"touchstart":j.unbind(k.type,g);g(l);break;case"touchmove":j.unbind(k.type,e);e(l);break;case"touchend":j.unbind(k.type,h);h(l);break;default:return}}})(jQuery); \ No newline at end of file +(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); \ No newline at end of file diff --git a/jsketch.js b/jsketch.js index 5dbf5fb..94e4d41 100644 --- a/jsketch.js +++ b/jsketch.js @@ -1,5 +1,5 @@ /*! - * jSketch 0.6 | Luis A. Leiva | MIT license + * jSketch 0.7 | Luis A. Leiva | MIT license * A simple JavaScript library for drawing facilities on HTML5 canvas. */ /** @@ -8,10 +8,9 @@ * such as object chainability and old-school AS3-like notation. * @name jSketch * @class - * @author Luis Leiva - * @version 0.6 - * @date 16 Jan 2012 - * @since 2010 + * @author Luis A. Leiva + * @version 0.7 + * @date 8 Apr 2014 * @example * var canvas1 = document.getElementById('foo'); * var canvas2 = document.getElementById('bar'); @@ -350,8 +349,9 @@ * @methodOf jSketch */ clear: function() { - this.graphics.clearRect(0,0, this.stageWidth,this.stageHeight); + // The following resets _all_ styles, so better use clearRect. //this.canvas.width = this.canvas.width; + this.graphics.clearRect(0,0, this.stageWidth,this.stageHeight); this.data = {}; return this; }, diff --git a/jsketch.min.js b/jsketch.min.js index a5efae8..4bc0929 100644 --- a/jsketch.min.js +++ b/jsketch.min.js @@ -1,5 +1,5 @@ -/* - * jSketch 0.6 | Luis A. Leiva | MIT license +/*! + * jSketch 0.7 | Luis A. Leiva | MIT license * A simple JavaScript library for drawing facilities on HTML5 canvas. */ -(function(a){var c=function(e,d){return new b(e,d)};var b=function(e,d){if(!e){return}d=d||{};this.context(e);this.stageWidth=e.getAttribute("width");this.stageHeight=e.getAttribute("height");this.graphics.fillStyle=d.fillStyle||"#F00";this.graphics.strokeStyle=d.strokeStyle||"#F0F";this.graphics.lineWidth=d.lineWidth||2;this.graphics.lineCap=d.lineCap||"round";this.graphics.lineJoin=d.lineJoin||"round";this.graphics.mitterLimit=d.mitterLimit||10;this.data={};return this};c.fn=b.prototype={context:function(d){if(d==null){throw ("No canvas element specified.")}this.canvas=d;this.graphics=d.getContext("2d");return this},size:function(e,d){this.stageWidth=e;this.stageHeight=d;this.canvas.width=e;this.canvas.height=d;return this},background:function(d){var e=this.graphics.fillStyle;this.beginFill(d);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.beginFill(e);return this},stage:function(f,d,e){this.size(f,d).background(e);return this},beginFill:function(d){this.data.fillStyle=this.graphics.fillStyle;this.graphics.fillStyle=d;return this},endFill:function(){this.graphics.fillStyle=this.data.fillStyle;return this},lineStyle:function(d,e,f,h,g){this.graphics.strokeStyle=d||this.graphics.strokeStyle;this.graphics.lineWidth=e||this.graphics.lineWidth;this.graphics.lineCap=f||this.graphics.lineCap;this.graphics.lineJoin=h||this.graphics.lineJoin;this.graphics.mitterLimit=g||this.graphics.mitterLimit;return this},moveTo:function(d,e){this.graphics.moveTo(d,e);return this},lineTo:function(d,e){this.graphics.lineTo(d,e);this.graphics.stroke();return this},line:function(e,g,d,f){this.graphics.moveTo(e,g);this.lineTo(d,f);return this},curveTo:function(d,g,f,e){this.graphics.quadraticCurveTo(f,e,d,g);this.graphics.stroke();return this},curve:function(f,i,d,h,g,e){this.graphics.moveTo(f,i);this.curveTo(d,h,g,e);return this},strokeRect:function(e,g,f,d){this.graphics.beginPath();this.graphics.strokeRect(e,g,f,d);this.graphics.closePath();return this},fillRect:function(e,g,f,d){this.graphics.beginPath();this.graphics.fillRect(e,g,f,d);this.graphics.closePath();return this},strokeCircle:function(e,f,d){this.graphics.beginPath();this.graphics.arc(e,f,d,0,Math.PI*2,false);this.graphics.stroke();this.graphics.closePath();return this},fillCircle:function(e,f,d){this.graphics.beginPath();this.graphics.arc(e,f,d,0,Math.PI*2,false);this.graphics.fill();this.graphics.closePath();return this},radialCircle:function(e,j,d,f,h){var i=this.graphics.createRadialGradient(e,j,d,e,j,h);i.addColorStop(0,f);i.addColorStop(1,"rgba(0,0,0,0)");this.graphics.fillStyle=i;this.fillCircle(e,j,d);return this},beginPath:function(){this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();return this},eraser:function(){this.data.strokeStyle=this.graphics.strokeStyle;this.graphics.globalCompositeOperation="copy";this.graphics.strokeStyle="rgba(0,0,0,0)"},pencil:function(){this.graphics.globalCompositeOperation="source-over";this.graphics.strokeStyle=this.data.strokeStyle},clear:function(){this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight);this.data={};return this},save:function(){this.graphics.save();return this},restore:function(){this.graphics.restore();return this}};a.jSketch=c})(this); \ No newline at end of file +(function(a){var c=function(e,d){return new b(e,d)};var b=function(e,d){if(!e){return}if(typeof d==="undefined"){d={}}this.context(e);this.stageWidth=e.getAttribute("width");this.stageHeight=e.getAttribute("height");this.graphics.fillStyle=typeof d.fillStyle!=="undefined"?d.fillStyle:"#F00";this.graphics.strokeStyle=typeof d.strokeStyle!=="undefined"?d.strokeStyle:"#F0F";this.graphics.lineWidth=typeof d.lineWidth!=="undefined"?d.lineWidth:2;this.graphics.lineCap=typeof d.lineCap!=="undefined"?d.lineCap:"round";this.graphics.lineJoin=typeof d.lineJoin!=="undefined"?d.lineJoin:"round";this.graphics.mitterLimit=typeof d.mitterLimit!=="undefined"?d.mitterLimit:10;this.data={};return this};c.fn=b.prototype={context:function(d){if(d==null){throw ("No canvas element specified.")}this.canvas=d;this.graphics=d.getContext("2d");return this},size:function(e,d){this.stageWidth=e;this.stageHeight=d;this.canvas.width=e;this.canvas.height=d;return this},background:function(d){var e=this.graphics.fillStyle;this.beginFill(d);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.beginFill(e);return this},stage:function(f,d,e){this.size(f,d).background(e);return this},beginFill:function(d){this.data.fillStyle=this.graphics.fillStyle;this.graphics.fillStyle=d;return this},endFill:function(){this.graphics.fillStyle=this.data.fillStyle;return this},lineStyle:function(d,e,f,h,g){this.graphics.strokeStyle=d||this.graphics.strokeStyle;this.graphics.lineWidth=e||this.graphics.lineWidth;this.graphics.lineCap=f||this.graphics.lineCap;this.graphics.lineJoin=h||this.graphics.lineJoin;this.graphics.mitterLimit=g||this.graphics.mitterLimit;return this},moveTo:function(d,e){this.graphics.moveTo(d,e);return this},lineTo:function(d,e){this.graphics.lineTo(d,e);this.graphics.stroke();return this},line:function(e,g,d,f){this.graphics.moveTo(e,g);this.lineTo(d,f);return this},curveTo:function(d,g,f,e){this.graphics.quadraticCurveTo(f,e,d,g);this.graphics.stroke();return this},curve:function(f,i,d,h,g,e){this.graphics.moveTo(f,i);this.curveTo(d,h,g,e);return this},strokeRect:function(e,g,f,d){this.graphics.beginPath();this.graphics.strokeRect(e,g,f,d);this.graphics.closePath();return this},fillRect:function(e,g,f,d){this.graphics.beginPath();this.graphics.fillRect(e,g,f,d);this.graphics.closePath();return this},strokeCircle:function(e,f,d){this.graphics.beginPath();this.graphics.arc(e,f,d,0,Math.PI*2,false);this.graphics.stroke();this.graphics.closePath();return this},fillCircle:function(e,f,d){this.graphics.beginPath();this.graphics.arc(e,f,d,0,Math.PI*2,false);this.graphics.fill();this.graphics.closePath();return this},radialCircle:function(e,j,d,f,h){var i=this.graphics.createRadialGradient(e,j,d,e,j,h);i.addColorStop(0,f);i.addColorStop(1,"rgba(0,0,0,0)");this.graphics.fillStyle=i;this.fillCircle(e,j,d);return this},beginPath:function(){this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();return this},eraser:function(){this.data.strokeStyle=this.graphics.strokeStyle;this.graphics.globalCompositeOperation="copy";this.graphics.strokeStyle="rgba(0,0,0,0)"},pencil:function(){this.graphics.globalCompositeOperation="source-over";this.graphics.strokeStyle=this.data.strokeStyle},clear:function(){this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight);this.data={};return this},save:function(){this.graphics.save();return this},restore:function(){this.graphics.restore();return this}};a.jSketch=c})(this); \ No newline at end of file