happyz
/
jsketch
mirror of https://github.com/luileito/jsketch.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved save/restore graphic options

This commit is contained in:
Luis Leiva 2015-07-27 10:48:07 +02:00
parent baaa5c100a
commit 81da3a4dd3
2 changed files with 21 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
jsketch.js
View File

@ -34,17 +34,15 @@
var Sketch = function(elem, options){ var Sketch = function(elem, options){
// Although discouraged, we can instantiate the class without arguments. // Although discouraged, we can instantiate the class without arguments.
if (!elem) return; if (!elem) return;
// We can pass default setup values.
if (typeof options === 'undefined') options = {};
// Set drawing context first. // Set drawing context first.
this.context(elem); this.context(elem);
// Scene defaults. // Scene defaults.
this.stageWidth = elem.width; this.stageWidth = elem.width;
this.stageHeight = elem.height; this.stageHeight = elem.height;
// Set drawing defaults.
this.drawingDefaults(options);
// Make room for storing some data such as brush type, colors, etc. // Make room for storing some data such as brush type, colors, etc.
this.data = {}; this.data = {};
// Set drawing defaults.
this.drawingDefaults(options);
// Make constructor chainable. // Make constructor chainable.
return this; return this;
}; };
@ -83,21 +81,16 @@
*/ */
drawingDefaults: function(options) { drawingDefaults: function(options) {
if (typeof options === 'undefined') options = {}; if (typeof options === 'undefined') options = {};
this.graphics.fillStyle = typeof options.fillStyle !== 'undefined' ? options.fillStyle : '#F00'; if (typeof options.fillStyle === 'undefined') options.fillStyle = '#F00';
this.graphics.strokeStyle = typeof options.strokeStyle !== 'undefined' ? options.strokeStyle : '#F0F'; if (typeof options.strokeStyle === 'undefined') options.strokeStyle = '#F0F';
this.graphics.lineWidth = typeof options.lineWidth !== 'undefined' ? options.lineWidth : 2; if (typeof options.lineWidth === 'undefined') options.lineWidth = 2;
this.graphics.lineCap = typeof options.lineCap !== 'undefined' ? options.lineCap : 'round'; if (typeof options.lineCap === 'undefined') options.lineCap = 'round';
this.graphics.lineJoin = typeof options.lineJoin !== 'undefined' ? options.lineJoin : 'round'; if (typeof options.lineJoin === 'undefined') options.lineJoin = 'round';
this.graphics.miterLimit = typeof options.miterLimit !== 'undefined' ? options.miterLimit : 10; if (typeof options.miterLimit === 'undefined') options.miterLimit = 10;
// Remember graphic options for later saveing/restoring drawing status. // Remember graphic options for later saving/restoring drawing status.
this.graphics.options = { this.saveGraphics(options);
fillStyle: this.graphics.fillStyle, // Apply defaults.
strokeStyle: this.graphics.strokeStyle, this.restoreGraphics(options);
lineWidth: this.graphics.lineWidth,
lineCap: this.graphics.lineCap,
lineJoin: this.graphics.lineJoin,
miterLimit: this.graphics.miterLimit
};
return this; return this;
}, },
/** /**
@ -112,7 +105,7 @@
this.stageHeight = height; this.stageHeight = height;
this.canvas.width = width; this.canvas.width = width;
this.canvas.height = height; this.canvas.height = height;
// On resizing we lost drawing options, so reset. // On resizing we lose drawing options, so restore them.
this.restoreGraphics(); this.restoreGraphics();
return this; return this;
}, },
@ -263,7 +256,6 @@
*/ */
strokeRect: function(x,y,width,height) { strokeRect: function(x,y,width,height) {
this.graphics.beginPath(); this.graphics.beginPath();
//this.moveTo(x,y).lineTo(x+width,y).lineTo(x+width,y+height).lineTo(y,y+height).lineTo(x,y);
this.graphics.strokeRect(x,y,width,height); this.graphics.strokeRect(x,y,width,height);
this.graphics.closePath(); this.graphics.closePath();
return this; return this;
@ -344,7 +336,7 @@
}, },
/** /**
* Sets brush to eraser mode. * Sets brush to eraser mode.
* @param {Number} brushSize - Brush size. * @param {Number} [brushSize] - Brush size.
* @return jSketch * @return jSketch
* @memberof jSketch * @memberof jSketch
*/ */
@ -356,7 +348,7 @@
}, },
/** /**
* Sets brush to pencil mode. * Sets brush to pencil mode.
* @param {Number} brushSize - Brush size. * @param {Number} [brushSize] - Brush size.
* @return jSketch * @return jSketch
* @memberof jSketch * @memberof jSketch
*/ */
@ -395,27 +387,23 @@
}, },
/** /**
* Saves given drawing settings. * Saves given drawing settings.
* @param propList {Array|String} propList - Array or space-separated String. * @param {Object} [options] - Graphics options.
* @return jSketch * @return jSketch
* @memberof jSketch * @memberof jSketch
*/ */
saveGraphics: function(options) { saveGraphics: function(options) {
if (typeof options === 'undefined') options = this.graphics.options; if (typeof options === 'undefined') options = this.data.options;
else this.graphics.options = options; this.data.options = options;
for (var opt in options) {
this.data[opt] = options[opt];
}
return this; return this;
}, },
/** /**
* Restores given drawing settings. * Restores given drawing settings.
* @param propList {Array|String} propList - Array or space-separated String. * @param {Object} [options] - Graphics options.
* @return jSketch * @return jSketch
* @memberof jSketch * @memberof jSketch
*/ */
restoreGraphics: function(options) { restoreGraphics: function(options) {
if (typeof options === 'undefined') options = this.graphics.options; if (typeof options === 'undefined') options = this.data.options;
else this.graphics.options = options;
for (var opt in options) { for (var opt in options) {
this.graphics[opt] = options[opt]; this.graphics[opt] = options[opt];
} }

6
jsketch.min.js vendored
View File

@ -1,5 +1 @@
/*! (function(window){var jSketch=function(elem,options){return new Sketch(elem,options)};var Sketch=function(elem,options){if(!elem)return;this.context(elem);this.stageWidth=elem.width;this.stageHeight=elem.height;this.data={};this.drawingDefaults(options);return this};jSketch.fn=Sketch.prototype={context:function(elem){if(elem===null)throw"No canvas element specified.";this.canvas=elem;this.graphics=elem.getContext("2d");return this},drawingDefaults:function(options){if(typeof options==="undefined")options={};if(typeof options.fillStyle==="undefined")options.fillStyle="#F00";if(typeof options.strokeStyle==="undefined")options.strokeStyle="#F0F";if(typeof options.lineWidth==="undefined")options.lineWidth=2;if(typeof options.lineCap==="undefined")options.lineCap="round";if(typeof options.lineJoin==="undefined")options.lineJoin="round";if(typeof options.miterLimit==="undefined")options.miterLimit=10;this.saveGraphics(options);this.restoreGraphics(options);return this},size:function(width,height){this.stageWidth=width;this.stageHeight=height;this.canvas.width=width;this.canvas.height=height;this.restoreGraphics();return this},background:function(color){this.beginFill(color);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.endFill();return this},stage:function(width,height,bgcolor){this.size(width,height).background(bgcolor);return this},beginFill:function(color){this.saveGraphics();this.graphics.fillStyle=color;return this},endFill:function(){this.restoreGraphics();return this},lineStyle:function(color,thickness,capStyle,joinStyle,miter){this.graphics.strokeStyle=color||this.graphics.strokeStyle;this.graphics.lineWidth=thickness||this.graphics.lineWidth;this.graphics.lineCap=capStyle||this.graphics.lineCap;this.graphics.lineJoin=joinStyle||this.graphics.lineJoin;this.graphics.miterLimit=miter||this.graphics.miterLimit;return this},moveTo:function(x,y){this.graphics.moveTo(x,y);return this},lineTo:function(x,y){this.graphics.lineTo(x,y);return this},line:function(x1,y1,x2,y2){this.graphics.moveTo(x1,y1);this.lineTo(x2,y2);return this},curveTo:function(x,y,cpx,cpy){this.graphics.quadraticCurveTo(cpx,cpy,x,y);return this},curve:function(x1,y1,x2,y2,cpx,cpy){this.graphics.moveTo(x1,y1);this.curveTo(x2,y2,cpx,cpy);return this},stroke:function(){this.graphics.stroke();return this},strokeRect:function(x,y,width,height){this.graphics.beginPath();this.graphics.strokeRect(x,y,width,height);this.graphics.closePath();return this},fillRect:function(x,y,width,height){this.graphics.beginPath();this.graphics.fillRect(x,y,width,height);this.graphics.closePath();return this},strokeCircle:function(x,y,radius){this.graphics.beginPath();this.graphics.arc(x,y,radius,0,Math.PI*2,false);this.graphics.stroke();this.graphics.closePath();return this},fillCircle:function(x,y,radius){this.graphics.beginPath();this.graphics.arc(x,y,radius,0,Math.PI*2,false);this.graphics.fill();this.graphics.closePath();return this},radialCircle:function(x,y,radius,color,glowSize){var g=this.graphics.createRadialGradient(x,y,radius,x,y,glowSize);g.addColorStop(0,color);g.addColorStop(1,"rgba(0,0,0,0)");this.graphics.fillStyle=g;this.fillCircle(x,y,radius);return this},beginPath:function(){this.saveGraphics();this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();this.restoreGraphics();return this},eraser:function(brushSize){if(typeof brushSize==="undefined")brushSize=15;this.graphics.globalCompositeOperation="destination-out";this.graphics.lineWidth=brushSize;return this},pencil:function(brushSize){if(typeof brushSize!=="undefined")this.graphics.lineWidth=brushSize;this.graphics.globalCompositeOperation="source-over";return this},clear:function(){this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight);return this},save:function(){this.graphics.save();return this},restore:function(){this.graphics.restore();return this},saveGraphics:function(options){if(typeof options==="undefined")options=this.data.options;this.data.options=options;return this},restoreGraphics:function(options){if(typeof options==="undefined")options=this.data.options;for(var opt in options){this.graphics[opt]=options[opt]}return this},drawImage:function(src,x,y){if(typeof x==="undefined")x=0;if(typeof y==="undefined")y=0;var self=this,img=new Image;img.src=src;img.onload=function(){self.graphics.drawImage(img,x,y)};return this}};window.jSketch=jSketch})(this);
* 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.width;this.stageHeight=e.height;this.drawingDefaults(d);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},drawingDefaults:function(d){if(typeof d==="undefined"){d={}}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.miterLimit=typeof d.miterLimit!=="undefined"?d.miterLimit:10;this.graphics.options=Object.keys(d);return this},size:function(e,d){this.stageWidth=e;this.stageHeight=d;this.canvas.width=e;this.canvas.height=d;this.drawingDefaults();return this},background:function(d){this.beginFill(d);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.endFill();return this},stage:function(f,d,e){this.size(f,d).background(e);return this},beginFill:function(d){this.saveGraphics();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.miterLimit=g||this.graphics.miterLimit;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.saveGraphics();this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();this.restoreGraphics();return this},eraser:function(d){if(typeof d==="undefined"){d=15}this.graphics.globalCompositeOperation="destination-out";this.graphics.lineWidth=d;return this},pencil:function(d){if(typeof d!=="undefined"){this.graphics.lineWidth=d}this.graphics.globalCompositeOperation="source-over";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==="undefined"){d=this.graphics.options}if(typeof d==="string"){d=d.split(" ")}for(var e=0;e<d.length;e++){var f=d[e];this.data[f]=this.graphics[f]}return this},restoreGraphics:function(d){if(typeof d==="undefined"){d=this.graphics.options}if(typeof d==="string"){d=d.split(" ")}for(var e=0;e<d.length;e++){var f=d[e];this.graphics[f]=this.data[f]}return this},drawImage:function(g,d,h){if(typeof d==="undefined"){d=0}if(typeof h==="undefined"){h=0}var f=this,e=new Image();e.src=g;e.onload=function(){f.graphics.drawImage(e,d,h)};return this}};a.jSketch=c})(this);