diff --git a/jquery.sketchable.js b/jquery.sketchable.js index c416581..e9bd1a3 100644 --- a/jquery.sketchable.js +++ b/jquery.sketchable.js @@ -17,7 +17,7 @@ */ ;(function($){ // Custom namespace ID. - var _ns = "sketchable"; + var _ns = 'sketchable'; /** * jQuery sketchable plugin API. * @namespace methods @@ -40,12 +40,12 @@ if (!data) { // Attach event listeners. if (options.interactive) { - elem.bind("mousedown", mousedownHandler); - elem.bind("mousemove", mousemoveHandler); - elem.bind("mouseup", mouseupHandler); - elem.bind("touchstart", touchdownHandler); - elem.bind("touchmove", touchmoveHandler); - elem.bind("touchend", touchupHandler); + elem.bind('mousedown', mousedownHandler); + elem.bind('mousemove', mousemoveHandler); + elem.bind('mouseup', mouseupHandler); + elem.bind('touchstart', touchdownHandler); + elem.bind('touchmove', touchmoveHandler); + elem.bind('touchend', touchupHandler); // Fix Chrome "bug". this.onselectstart = function(){ return false }; } @@ -174,12 +174,12 @@ return this.each(function(){ var elem = $(this), data = elem.data(_ns) || {}, options = data.options; if (options.interactive) { - elem.unbind("mouseup", mouseupHandler); - elem.unbind("mousemove", mousemoveHandler); - elem.unbind("mousedown", mousedownHandler); - elem.unbind("touchstart", touchdownHandler); - elem.unbind("touchmove", touchmoveHandler); - elem.unbind("touchend", touchupHandler); + elem.unbind('mouseup', mouseupHandler); + elem.unbind('mousemove', mousemoveHandler); + elem.unbind('mousedown', mousedownHandler); + elem.unbind('touchstart', touchdownHandler); + elem.unbind('touchmove', touchmoveHandler); + elem.unbind('touchend', touchupHandler); } elem.removeData(_ns); @@ -209,7 +209,7 @@ $.fn.sketchable = function(method) { // These "magic" keywords return internal plugin methods, // so that they can be easily extended/overriden. - if ("methods functions hooks".split(" ").indexOf(method) > -1) { + if ('methods functions hooks'.split(' ').indexOf(method) > -1) { return methods; } else if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); @@ -247,8 +247,8 @@ * lineWidth: 3, * strokeStyle: '#F0F', * fillStyle: '#F0F', - * lineCap: "round", - * lineJoin: "round", + * lineCap: 'round', + * lineJoin: 'round', * miterLimit: 10 * } * }); @@ -279,8 +279,8 @@ lineWidth: 3, strokeStyle: '#F0F', fillStyle: '#F0F', - lineCap: "round", - lineJoin: "round", + lineCap: 'round', + lineJoin: 'round', miterLimit: 10 } }; @@ -292,7 +292,7 @@ if (!options) options = elem.data(_ns).options; if (options.cssCursors) { // Visually indicate whether this element is interactive or not. - elem[0].style.cursor = options.interactive ? "pointer" : "not-allowed"; + elem[0].style.cursor = options.interactive ? 'pointer' : 'not-allowed'; } }; diff --git a/jquery.sketchable.memento.js b/jquery.sketchable.memento.js index f3d203b..9e4392e 100644 --- a/jquery.sketchable.memento.js +++ b/jquery.sketchable.memento.js @@ -140,8 +140,8 @@ * @memberOf MementoCanvas */ this.init = function() { - $(document).off("keypress", keyManager); - $(document).on("keypress", keyManager); + $(document).off('keypress', keyManager); + $(document).on('keypress', keyManager); }; /** * Destroy instance. @@ -149,14 +149,14 @@ * @memberOf MementoCanvas */ this.destroy = function() { - $(document).off("keypress", keyManager); + $(document).off('keypress', keyManager); this.reset(); }; }; // Bind plugin extension //////////////////////////////////////////////////// - var namespace = "sketchable"; + var namespace = 'sketchable'; var plugin = $.fn.sketchable; var availMethods = plugin('methods'); @@ -200,7 +200,7 @@ // Event order matters. // Init must go first, since it's called when instantiating the plugin. - var events = 'init mouseup clear destroy'.split(" "); + var events = 'init mouseup clear destroy'.split(' '); for (var i = 0; i < events.length; i++) { override(events[i]); } diff --git a/jsketch.js b/jsketch.js index cd7f555..e9334d9 100644 --- a/jsketch.js +++ b/jsketch.js @@ -1,5 +1,5 @@ /*! - * jSketch 0.8 | Luis A. Leiva | MIT license + * jSketch 0.9 | Luis A. Leiva | MIT license * A simple JavaScript library for drawing facilities on HTML5 canvas. */ /** @@ -8,8 +8,7 @@ * such as function chainability and old-school AS3-like notation. * @name jSketch * @class - * @version 0.8 - * @date 9 Jul 2014 + * @version 0.9 * @author Luis A. Leiva * @license MIT license * @example @@ -21,17 +20,17 @@ * // Switching between contexts removes the need of having to reinstantiate the jSketch class. * brush.context(canvas2).beginFill('#5F7').fillCircle(30,30,8).endFill(); */ -;(function(window){ +;(function(window) { /** * @constructor * @param {Object} elem - MUST be a DOM element * @param {Object} options - Configuration */ - var jSketch = function(elem, options){ + var jSketch = function(elem, options) { return new Sketch(elem, options); }; // Base class, private. - var Sketch = function(elem, options){ + var Sketch = function(elem, options) { // Although discouraged, we can instantiate the class without arguments. if (!elem) return; // Set drawing context first. @@ -60,10 +59,10 @@ * @memberof jSketch */ context: function(elem) { - if (elem === null) throw("No canvas element specified."); + if (elem === null) throw('No canvas element specified.'); // Save shortcuts: canvas (DOM elem) & graphics (2D canvas context). this.canvas = elem; - this.graphics = elem.getContext("2d"); + this.graphics = elem.getContext('2d'); // Always allow chainability. return this; }, @@ -100,7 +99,7 @@ * @return jSketch * @memberof jSketch */ - size: function(width,height) { + size: function(width, height) { this.stageWidth = width; this.stageHeight = height; this.canvas.width = width; @@ -117,7 +116,7 @@ */ background: function(color) { this.beginFill(color); - this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight); + this.graphics.fillRect(0,0, this.stageWidth,this.stageHeight); this.endFill(); return this; }, @@ -129,7 +128,7 @@ * @return jSketch * @memberof jSketch */ - stage: function(width,height,bgcolor) { + stage: function(width, height, bgcolor) { this.size(width,height).background(bgcolor); return this; }, @@ -163,7 +162,7 @@ * @return jSketch * @memberof jSketch */ - lineStyle: function(color,thickness,capStyle,joinStyle,miter) { + lineStyle: function(color, thickness, capStyle, joinStyle, miter) { var options = { strokeStyle: color || this.graphics.strokeStyle, lineWidth: thickness || this.graphics.lineWidth, @@ -182,7 +181,7 @@ * @return jSketch * @memberof jSketch */ - moveTo: function(x,y) { + moveTo: function(x, y) { this.graphics.moveTo(x,y); return this; }, @@ -193,7 +192,7 @@ * @return jSketch * @memberof jSketch */ - lineTo: function(x,y) { + lineTo: function(x, y) { this.graphics.lineTo(x,y); return this; }, @@ -206,7 +205,7 @@ * @return jSketch * @memberof jSketch */ - line: function(x1,y1,x2,y2) { + line: function(x1,y1, x2,y2) { this.graphics.moveTo(x1,y1); this.lineTo(x2,y2); return this; @@ -220,8 +219,8 @@ * @return jSketch * @memberof jSketch */ - curveTo: function(x,y,cpx,cpy) { - this.graphics.quadraticCurveTo(cpx,cpy,x,y); + curveTo: function(x,y, cpx,cpy) { + this.graphics.quadraticCurveTo(cpx,cpy, x,y); return this; }, /** @@ -235,9 +234,9 @@ * @return jSketch * @memberof jSketch */ - curve: function(x1,y1,x2,y2,cpx,cpy) { + curve: function(x1,y1, x2,y2, cpx,cpy) { this.graphics.moveTo(x1,y1); - this.curveTo(x2,y2,cpx,cpy); + this.curveTo(x2,y2, cpx,cpy); return this; }, /** @@ -258,9 +257,9 @@ * @return jSketch * @memberof jSketch */ - strokeRect: function(x,y,width,height) { + strokeRect: function(x,y, width,height) { this.graphics.beginPath(); - this.graphics.strokeRect(x,y,width,height); + this.graphics.strokeRect(x,y, width,height); this.graphics.closePath(); return this; }, @@ -273,9 +272,9 @@ * @return jSketch * @memberof jSketch */ - fillRect: function(x,y,width,height) { + fillRect: function(x,y, width,height) { this.graphics.beginPath(); - this.graphics.fillRect(x,y,width,height); + this.graphics.fillRect(x,y, width,height); this.graphics.closePath(); return this; }, @@ -287,9 +286,9 @@ * @return jSketch * @memberof jSketch */ - strokeCircle: function(x,y,radius) { + strokeCircle: function(x,y, radius) { this.graphics.beginPath(); - this.graphics.arc(x,y, radius, 0, Math.PI * 2, false); + this.graphics.arc(x,y, radius, 0, 2*Math.PI, false); this.graphics.stroke(); this.graphics.closePath(); return this; @@ -302,9 +301,9 @@ * @return jSketch * @memberof jSketch */ - fillCircle: function(x,y,radius) { + fillCircle: function(x,y, radius) { this.graphics.beginPath(); - this.graphics.arc(x,y, radius, 0, Math.PI * 2, false); + this.graphics.arc(x,y, radius, 0, 2*Math.PI, false); this.graphics.fill(); this.graphics.closePath(); return this; @@ -313,11 +312,17 @@ * Experimental. * @ignore */ - radialCircle: function(x,y,radius,glowSize,color1,color2) { - var g = this.graphics.createRadialGradient(x,y,radius,x,y, glowSize || 5); - g.addColorStop(0, color1 || this.graphics.fillStyle); - g.addColorStop(1, color2 || 'white'); - this.beginFill(g).fillCircle(x,y,radius).endFill(); + radialCircle: function(x,y, radius, glowSize, colors) { + var g = this.graphics.createRadialGradient(x,y, radius, x,y, glowSize || 5); + if (colors.constructor.name !== 'array') { + colors = [this.graphics.fillStyle, 'white']; + } else { + for (var s = 0; s < colors.length; s++) { + var color = colors[i]; + g.addColorStop(i, color); + } + } + this.beginFill(g).fillCircle(x,y, radius).endFill(); return this; }, /** @@ -348,7 +353,7 @@ */ eraser: function(brushSize) { if (typeof brushSize === 'undefined') brushSize = 15; - this.graphics.globalCompositeOperation = "destination-out"; + this.graphics.globalCompositeOperation = 'destination-out'; this.lineStyle(null, brushSize); return this; }, @@ -360,7 +365,7 @@ */ pencil: function(brushSize) { if (typeof brushSize === 'undefined') brushSize = 2; - this.graphics.globalCompositeOperation = "source-over"; + this.graphics.globalCompositeOperation = 'source-over'; this.lineStyle(null, brushSize); return this; }, diff --git a/sketchable.js b/sketchable.js index eb660d1..cf8cccb 100644 --- a/sketchable.js +++ b/sketchable.js @@ -8,7 +8,7 @@ */ ;(function(window){ // Custom namespace ID. - var _ns = "sketchable"; + var _ns = 'sketchable'; /** * Creates a sketchable instance. * This is a plugin for the jSketch drawing class. @@ -66,18 +66,18 @@ if (!data) { // Attach event listeners. if (options.interactive) { - Event.add(elem, "mousedown", mousedownHandler); - Event.add(elem, "mousemove", mousemoveHandler); - Event.add(elem, "mouseup", mouseupHandler); - Event.add(elem, "touchstart", touchdownHandler); - Event.add(elem, "touchmove", touchmoveHandler); - Event.add(elem, "touchend", touchupHandler); + Event.add(elem, 'mousedown', mousedownHandler); + Event.add(elem, 'mousemove', mousemoveHandler); + Event.add(elem, 'mouseup', mouseupHandler); + Event.add(elem, 'touchstart', touchdownHandler); + Event.add(elem, 'touchmove', touchmoveHandler); + Event.add(elem, 'touchend', touchupHandler); // Fix Chrome "bug". this.onselectstart = function(){ return false }; } if (options.cssCursors) { // Visually indicate whether this element is interactive or not. - elem.style.cursor = options.interactive ? "pointer" : "not-allowed"; + elem.style.cursor = options.interactive ? 'pointer' : 'not-allowed'; } } var sketch = new jSketch(elem, options.graphics); @@ -196,12 +196,12 @@ destroy: function() { var elem = this.elem, data = dataBind(elem)[_ns], options = data.options; if (options.interactive) { - Event.remove(elem, "mouseup", mouseupHandler); - Event.remove(elem, "mousemove", mousemoveHandler); - Event.remove(elem, "mousedown", mousedownHandler); - Event.remove(elem, "touchstart", touchdownHandler); - Event.remove(elem, "touchmove", touchmoveHandler); - Event.remove(elem, "touchend", touchupHandler); + Event.remove(elem, 'mouseup', mouseupHandler); + Event.remove(elem, 'mousemove', mousemoveHandler); + Event.remove(elem, 'mousedown', mousedownHandler); + Event.remove(elem, 'touchstart', touchdownHandler); + Event.remove(elem, 'touchmove', touchmoveHandler); + Event.remove(elem, 'touchend', touchupHandler); } dataBind(elem)[_ns] = null; @@ -239,8 +239,8 @@ * lineWidth: 3, * strokeStyle: '#F0F', * fillStyle: '#F0F', - * lineCap: "round", - * lineJoin: "round", + * lineCap: 'round', + * lineJoin: 'round', * miterLimit: 10 * } * }); @@ -271,8 +271,8 @@ lineWidth: 3, strokeStyle: '#F0F', fillStyle: '#F0F', - lineCap: "round", - lineJoin: "round", + lineCap: 'round', + lineJoin: 'round', miterLimit: 10 } }; diff --git a/sketchable.memento.js b/sketchable.memento.js index eeed477..68d6641 100644 --- a/sketchable.memento.js +++ b/sketchable.memento.js @@ -131,8 +131,8 @@ * @memberOf MementoCanvas */ this.init = function() { - Event.remove(document, "keypress", keyManager); - Event.add(document, "keypress", keyManager); + Event.remove(document, 'keypress', keyManager); + Event.add(document, 'keypress', keyManager); }; /** * Destroy instance. @@ -140,14 +140,14 @@ * @memberOf MementoCanvas */ this.destroy = function() { - Event.remove(document, "keypress", keyManager); + Event.remove(document, 'keypress', keyManager); this.reset(); }; }; // Bind plugin extension //////////////////////////////////////////////////// - var namespace = "sketchable"; + var namespace = 'sketchable'; var availMethods = Sketchable.fn; var defaults = Sketchable.fn.defaults; @@ -191,7 +191,7 @@ // Event order matters. // Init must go first, since it's called when instantiating the plugin. - var events = 'init mouseup clear destroy'.split(" "); + var events = 'init mouseup clear destroy'.split(' '); for (var i = 0; i < events.length; i++) { override(events[i]); }