diff --git a/jquery.sketchable.js b/jquery.sketchable.js index 8e54d76..20d8f20 100644 --- a/jquery.sketchable.js +++ b/jquery.sketchable.js @@ -1,37 +1,34 @@ /*! * jQuery sketchable | v1.8 | Luis A. Leiva | MIT license - * This is a jQuery plugin for the jSketch drawing class. + * A jQuery plugin for the jSketch drawing library. */ /** * @name $ - * @class - * See the jQuery library for full details. - * This just documents the method that is added to jQuery by this plugin. + * @class + * @ignore + * @description This just documents the method that is added to jQuery by this plugin. + * See the jQuery library for full details. */ /** * @name $.fn - * @class + * @memberof $ + * @description This just documents the method that is added to jQuery by this plugin. * See the jQuery library for full details. - * This just documents the method that is added to jQuery by this plugin. */ ;(function($){ // Custom namespace ID. var _ns = "sketchable"; /** - * Note: This is NOT a constructor actually, but a series of methods to be - * called from the plugin. - * @name methods - * @class - * Plugin API. + * jQuery sketchable plugin API. + * @namespace methods */ var methods = { /** * Initializes the selected jQuery objects. - * @param {Object} opts plugin configuration (see defaults) + * @param {Object} opts plugin configuration (see defaults). * @return jQuery - * @name init * @ignore - * @methodOf methods + * @namespace methods.init * @example $(selector).sketchable(); */ init: function(opts) { @@ -54,7 +51,6 @@ } } var sketch = new jSketch(this, options.graphics); -// sketch.beginPath(); // Flag drawing state on a per-canvas basis. sketch.isDrawing = false; // Reconfigure element data. @@ -78,13 +74,12 @@ }, /** * Gets/Sets drawing data strokes sequence. - * @param Array arr data strokes: multidimensional array of {x,y,time,status} tuples; status = 0 (pen down) or 1 (pen up) + * @param {Array} arr - 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 + * @namespace methods.strokes * @example - * $(selector).sketchable('strokes'); - * $(selector).sketchable('strokes', [ [arr1], ..., [arrN] ]); + * $(selector).sketchable('strokes'); // Getter + * $(selector).sketchable('strokes', [ [arr1], ..., [arrN] ]); // Setter */ strokes: function(arr) { if (arr) { // setter @@ -99,12 +94,9 @@ }, /** * Allows low-level manipulation of the sketchable canvas. - * @param Object callback function, invoked with 2 arguments: - * * elem: jQuery element - * * data: element data + * @param {Function} callback - Callback function, invoked with 2 arguments: elem (jQuery element) and data (jQuery element data). * @return jQuery - * @name handler - * @methodOf methods + * @namespace methods.handler * @example * $(selector).sketchable('handler', function(elem, data){ * // do something with elem or data @@ -117,10 +109,11 @@ }); }, /** - * Clears canvas (together with strokes data). + * Clears canvas (together with strokes data). + * If you need to clear canvas only, just invoke data.sketch.clear() via $(selector).sketchable('handler'). + * @see methods.handler * @return jQuery - * @name clear - * @methodOf methods + * @namespace methods.clear * @example $(selector).sketchable('clear'); */ clear: function() { @@ -136,10 +129,9 @@ }, /** * Reinitializes a sketchable canvas with given opts. - * @param Object opts configuration options + * @param {Object} opts - Configuration options. * @return jQuery - * @name reset - * @methodOf methods + * @namespace methods.reset * @example * $(selector).sketchable('reset'); * $(selector).sketchable('reset', {interactive:false}); @@ -156,8 +148,7 @@ /** * Destroys sketchable canvas (together with strokes data and events). * @return jQuery - * @name destroy - * @methodOf methods + * @namespace methods.destroy * @example $(selector).sketchable('destroy'); */ destroy: function() { @@ -181,13 +172,19 @@ }; /** - * Creates a new jQuery.sketchable object. - * @param {String|Object} method name of the method to invoke, or a configuration object. + * Creates a jQuery.sketchable instance. + * This is a jQuery plugin for the jSketch drawing class. + * @param {String|Object} method - Method to invoke, or a configuration object. * @return jQuery * @class + * @version 1.8 + * @date 9 Jul 2014 + * @author Luis A. Leiva + * @license MIT license * @example * $(selector).sketchable(); * $(selector).sketchable({interactive:false}); + * @see methods */ $.fn.sketchable = function(method) { // These "magic" keywords return internal plugin methods, @@ -205,23 +202,23 @@ }; /** - * Default configuration (publicly modifiable). - * Note that mouse[ยทยทยท] callbacks are triggered only if interactive is set to true. + * Default configuration. + * Note that mouse* callbacks are triggered only if interactive is set to true. * @name defaults * @default - * @memberOf $.fn.sketchable + * @memberof $.fn.sketchable * @example * $(selector).sketchable({ * interactive: true, * mouseupMovements: false, * relTimestamps: false, * events: { - * init: function(elem, data){}, - * clear: function(elem, data){}, - * destroy: function(elem, data){}, - * mousedown: function(elem, data, evt){}, - * mousemove: function(elem, data, evt){}, - * mouseup: function(elem, data, evt){}, + * init: function(elem, data){ }, + * clear: function(elem, data){ }, + * destroy: function(elem, data){ }, + * mousedown: function(elem, data, evt){ }, + * mousemove: function(elem, data, evt){ }, + * mouseup: function(elem, data, evt){ }, * }, * graphics: { * firstPointSize: 3, @@ -242,16 +239,15 @@ mouseupMovements: false, // Inidicate whether timestamps should be relative (start at time 0) or absolute (start at Unix epoch). relTimestamps: false, - // Callback Event + // Event callbacks. events: { - // init: function(elem, data){}, - // clear: function(elem, data){}, - // destroy: function(elem, data){}, - // mousedown: function(elem, data, evt){}, - // mousemove: function(elem, data, evt){}, - // mouseup: function(elem, data, evt){}, + // init: function(elem, data){ }, + // clear: function(elem, data){ }, + // destroy: function(elem, data){ }, + // mousedown: function(elem, data, evt){ }, + // mousemove: function(elem, data, evt){ }, + // mouseup: function(elem, data, evt){ }, }, - // TODO: add more jSketch config options graphics: { firstPointSize: 3, lineWidth: 3, @@ -264,7 +260,9 @@ }; - + /** + * @private + */ function getMousePos(e) { var elem = $(e.target), pos = elem.offset(); return { @@ -273,6 +271,9 @@ } }; + /** + * @private + */ function saveMousePos(idx, data, pt) { var time = (new Date).getTime(); if (data.options.relTimestamps) { @@ -283,7 +284,10 @@ } data.coords[idx].push([ pt.x, pt.y, time, +data.sketch.isDrawing ]); }; - + + /** + * @private + */ function mousemoveHandler(e, idx) { if (typeof idx === 'undefined') idx = 0; @@ -302,7 +306,10 @@ options.events.mousemove(elem, data, e); } }; - + + /** + * @private + */ function mousedownHandler(e, idx) { if (typeof idx === 'undefined') idx = 0; @@ -328,7 +335,10 @@ options.events.mousedown(elem, data, e); } }; - + + /** + * @private + */ function mouseupHandler(e, idx) { if (typeof idx === 'undefined') idx = 0; @@ -340,30 +350,33 @@ options.events.mouseup(elem, data, e); } }; - + + /** + * @private + */ function touchHandler(e) { e.preventDefault(); var elem = $(e.target); - var touch = e.originalEvent.changedTouches; + 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 = touch[i]; i < touch.length; i++) { + 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 = touch[i]; i < touch.length; i++) { + 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 = touch[i]; i < touch.length; i++) { + for (var i = 0, t = touches[i]; i < touches.length; i++) { for (var o in e) t[o] = e[o]; mouseupHandler(t, t.identifier); } diff --git a/jquery.sketchable.min.js b/jquery.sketchable.min.js index dabac4f..085cb74 100644 --- a/jquery.sketchable.min.js +++ b/jquery.sketchable.min.js @@ -1,5 +1,5 @@ /*! * jQuery sketchable | v1.8 | Luis A. Leiva | MIT license - * This is a jQuery plugin for the jSketch drawing class. + * 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){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(m){m.preventDefault();var l=g(m.target);var p=m.originalEvent.changedTouches;switch(m.type){case"touchstart":l.unbind(m.type,h);for(var k=0,j=p[k];k-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){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];kbeginFill(). * @return jSketch - * @name endFill - * @methodOf jSketch + * @memberof jSketch */ endFill: function() { this.graphics.fillStyle = this.data.fillStyle; @@ -138,14 +135,13 @@ }, /** * Sets the line style. - * @param {Number|String} color an HTML color - * @param {Number} thickness line thickness - * @param {String} capStyle style of line cap - * @param {String} joinStyle style of line join - * @param {String} mitter style of mitter + * @param {Number|String} color - An HTML color. + * @param {Number} thickness - Line thickness. + * @param {String} capStyle - Style of line cap. + * @param {String} joinStyle - Style of line join. + * @param {String} mitter - Style of mitter. * @return jSketch - * @name lineStyle - * @methodOf jSketch + * @memberof jSketch */ lineStyle: function(color,thickness,capStyle,joinStyle,mitter) { this.graphics.strokeStyle = color || this.graphics.strokeStyle; @@ -157,11 +153,10 @@ }, /** * Move brush to a coordinate in canvas. - * @param {Number} x - * @param {Number} y + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. * @return jSketch - * @name moveTo - * @methodOf jSketch + * @memberof jSketch */ moveTo: function(x,y) { this.graphics.moveTo(x,y); @@ -169,25 +164,23 @@ }, /** * Draws line to given coordinate. - * @param {Number} x - * @param {Number} y + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. * @return jSketch - * @name lineTo - * @methodOf jSketch + * @memberof jSketch */ lineTo: function(x,y) { this.graphics.lineTo(x,y); return this; }, /** - * Draws line from coordinate 1 to coordinate 2. - * @param {Number} x1 - * @param {Number} y1 - * @param {Number} x2 - * @param {Number} y2 + * Draws line from point 1 to point 2. + * @param {Number} x1 - Horizontal coordinate of point 1. + * @param {Number} y1 - Vertical coordinate of point 1. + * @param {Number} x2 - Horizontal coordinate of point 2. + * @param {Number} y2 - Vertical coordinate of point 2. * @return jSketch - * @name line - * @methodOf jSketch + * @memberof jSketch */ line: function(x1,y1,x2,y2) { this.graphics.moveTo(x1,y1); @@ -196,13 +189,12 @@ }, /** * Draws curve to given coordinate. - * @param {Number} x - * @param {Number} y - * @param {Number} cpx x coordinate of control point - * @param {Number} cpy y coordinate of control point + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. + * @param {Number} cpx - Horizontal coordinate of control point. + * @param {Number} cpy - Vertical coordinate of control point. * @return jSketch - * @name curveTo - * @methodOf jSketch + * @memberof jSketch */ curveTo: function(x,y,cpx,cpy) { this.graphics.quadraticCurveTo(cpx,cpy,x,y); @@ -210,15 +202,14 @@ }, /** * Draws curve from coordinate 1 to coordinate 2. - * @param {Number} x1 - * @param {Number} y1 - * @param {Number} x2 - * @param {Number} y2 - * @param {Number} cpx x coordinate of control point - * @param {Number} cpy y coordinate of control point + * @param {Number} x1 - Horizontal coordinate of point 1. + * @param {Number} y1 - Vertical coordinate of point 1. + * @param {Number} x2 - Horizontal coordinate of point 2. + * @param {Number} y2 - Vertical coordinate of point 2. + * @param {Number} cpx - Horizontal coordinate of control point. + * @param {Number} cpy - Vertical coordinate of control point. * @return jSketch - * @name curve - * @methodOf jSketch + * @memberof jSketch */ curve: function(x1,y1,x2,y2,cpx,cpy) { this.graphics.moveTo(x1,y1); @@ -228,8 +219,7 @@ /** * Strokes a given path. * @return jSketch - * @name stroke - * @methodOf jSketch + * @memberof jSketch */ stroke: function() { this.graphics.stroke(); @@ -237,14 +227,13 @@ }, /** * Draws a stroke-only rectangle. - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. + * @param {Number} width - Rectangle width. + * @param {Number} height - Rectangle height. * @return jSketch - * @name strokeRect - * @methodOf jSketch - */ + * @memberof jSketch + */ strokeRect: function(x,y,width,height) { this.graphics.beginPath(); //this.moveTo(x,y).lineTo(x+width,y).lineTo(x+width,y+height).lineTo(y,y+height).lineTo(x,y); @@ -254,13 +243,12 @@ }, /** * Draws a filled rectangle. - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. + * @param {Number} width - Rectangle width. + * @param {Number} height - Rectangle height. * @return jSketch - * @name fillRect - * @methodOf jSketch + * @memberof jSketch */ fillRect: function(x,y,width,height) { this.graphics.beginPath(); @@ -270,12 +258,11 @@ }, /** * Draws a stroke-only circle. - * @param {Number} x - * @param {Number} y - * @param {Number} radius + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. + * @param {Number} radius - Circle radius. * @return jSketch - * @name strokeCircle - * @methodOf jSketch + * @memberof jSketch */ strokeCircle: function(x,y,radius) { this.graphics.beginPath(); @@ -286,12 +273,11 @@ }, /** * Draws a filled circle. - * @param {Number} x - * @param {Number} y - * @param {Number} radius + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. + * @param {Number} radius - Circle radius. * @return jSketch - * @name fillCircle - * @methodOf jSketch + * @memberof jSketch */ fillCircle: function(x,y,radius) { this.graphics.beginPath(); @@ -312,8 +298,7 @@ /** * A path is started. * @return jSketch - * @name beginPath - * @methodOf jSketch + * @memberof jSketch */ beginPath: function() { this.graphics.beginPath(); @@ -322,8 +307,7 @@ /** * A path is finished. * @return jSketch - * @name closePath - * @methodOf jSketch + * @memberof jSketch */ closePath: function() { this.graphics.closePath(); @@ -331,9 +315,9 @@ }, /** * Sets brush to eraser mode. + * @param {Number} brushSize - Brush size. * @return jSketch - * @name eraser - * @methodOf jSketch + * @memberof jSketch */ eraser: function(brushSize) { if (typeof brushSize === 'undefined') brushSize = 15; @@ -345,20 +329,20 @@ }, /** * Sets brush to pencil mode. + * @param {Number} brushSize - Brush size. * @return jSketch - * @name pencil - * @methodOf jSketch + * @memberof jSketch */ - pencil: function() { + pencil: function(brushSize) { this.graphics.globalCompositeOperation = "source-over"; this.restoreGraphics('strokeStyle lineWidth'); + if (typeof brushSize !== 'undefined') this.graphics.lineWidth = brushSize; return this; }, /** * Clears stage. * @return jSketch - * @name clear - * @methodOf jSketch + * @memberof jSketch */ clear: function() { // The following resets _all_ styles, so better use clearRect. @@ -370,8 +354,7 @@ /** * Saves a snapshot of all styles and transformations. * @return jSketch - * @name save - * @methodOf jSketch + * @memberof jSketch */ save: function() { this.graphics.save(); @@ -380,8 +363,7 @@ /** * Restores previous drawing state. * @return jSketch - * @name restore - * @methodOf jSketch + * @memberof jSketch */ restore: function() { this.graphics.restore(); @@ -389,10 +371,9 @@ }, /** * Saves given drawing settings. - * @param {Mixed} propList Array or space-separated String + * @param propList {Array|String} propList - Array or space-separated String. * @return jSketch - * @name saveGraphics - * @methodOf jSketch + * @memberof jSketch */ saveGraphics: function(propList) { if (typeof propList === 'string') propList = propList.split(" "); @@ -404,10 +385,9 @@ }, /** * Restores given drawing settings. - * @param {Mixed} propList Array or space-separated String + * @param propList {Array|String} propList - Array or space-separated String. * @return jSketch - * @name restoreGraphics - * @methodOf jSketch + * @memberof jSketch */ restoreGraphics: function(propList) { if (typeof propList === 'string') propList = propList.split(" "); @@ -419,12 +399,11 @@ }, /** * Draws an image. - * @param {Number} img - * @param {Number} x - * @param {Number} y + * @param {Number} src - Image source path. + * @param {Number} x - Horizontal coordinate. + * @param {Number} y - Vertical coordinate. * @return jSketch - * @name drawImage - * @methodOf jSketch + * @memberof jSketch */ drawImage: function(src, x,y) { var self = this, img = new Image(); @@ -436,7 +415,7 @@ } }; - // expose + // Expose. window.jSketch = jSketch; })(this); diff --git a/jsketch.min.js b/jsketch.min.js index f910e0a..ea082d9 100644 --- a/jsketch.min.js +++ b/jsketch.min.js @@ -2,4 +2,4 @@ * jSketch 0.8 | 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}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.saveGraphics("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);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);return this},curve:function(f,i,d,h,g,e){this.graphics.moveTo(f,i);this.curveTo(d,h,g,e);return this},stroke:function(){this.graphics.stroke();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(d){if(typeof d==="undefined"){d=15}if(typeof this.data.strokeStyle==="undefined"){this.saveGraphics("strokeStyle lineWidth")}this.graphics.globalCompositeOperation="destination-out";this.graphics.strokeStyle="rgba(0,0,0,1)";this.graphics.lineWidth=d;return this},pencil:function(){this.graphics.globalCompositeOperation="source-over";this.restoreGraphics("strokeStyle lineWidth");return this},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},saveGraphics:function(d){if(typeof d==="string"){d=d.split(" ")}for(var e=0;e