mirror of https://github.com/luileito/jsketch.git
Remember previous drawing options after path drawing
This commit is contained in:
Luis Leiva
parent
65346a1a5f
commit
63f78899b7
26
jsketch.js
26
jsketch.js
|
|
@ -4,17 +4,17 @@
|
|||
*/
|
||||
/**
|
||||
* A simple JavaScript library for drawing facilities on HTML5 canvas.
|
||||
* This class is mostly a wrapper for the HTML5 canvas API with some syntactic sugar,
|
||||
* This class is mostly a wrapper for the HTML5 canvas API with some syntactic sugar,
|
||||
* such as function chainability and old-school AS3-like notation.
|
||||
* @name jSketch
|
||||
* @class
|
||||
* @version 0.8
|
||||
* @date 9 Jul 2014
|
||||
* @author Luis A. Leiva
|
||||
* @license MIT license
|
||||
* @license MIT license
|
||||
* @example
|
||||
* var canvas1 = document.getElementById('foo');
|
||||
* var canvas2 = document.getElementById('bar');
|
||||
* var canvas2 = document.getElementById('bar');
|
||||
* // Instantiate once, reuse everywhere.
|
||||
* var brush = new jSketch(canvas1).lineStyle('red').moveTo(50,50).lineTo(10,10).stroke();
|
||||
* // Actually, .moveTo(50,50).lineTo(10,10) can be just .line(50,50, 10,10)
|
||||
|
|
@ -48,12 +48,14 @@
|
|||
this.graphics.lineCap = typeof options.lineCap !== 'undefined' ? options.lineCap : 'round';
|
||||
this.graphics.lineJoin = typeof options.lineJoin !== 'undefined' ? options.lineJoin : 'round';
|
||||
this.graphics.mitterLimit = typeof options.mitterLimit !== 'undefined' ? options.mitterLimit : 10;
|
||||
// Remember graphic options for later saveing/restoring drawing status.
|
||||
this.graphics.options = Object.keys(options);
|
||||
// Make room for storing some data such as brush type, colors, etc.
|
||||
this.data = {};
|
||||
// Make constructor chainable.
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
/**
|
||||
* jSketch methods (publicly extensible).
|
||||
* @ignore
|
||||
* @memberof jSketch
|
||||
|
|
@ -104,7 +106,7 @@
|
|||
/**
|
||||
* Shortcut for setting the size + background color.
|
||||
* @param {Number} width - New canvas width.
|
||||
* @param {Number} height - New canvas width.
|
||||
* @param {Number} height - New canvas width.
|
||||
* @param {Number|String} bgcolor - An HTML color.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
|
|
@ -120,7 +122,7 @@
|
|||
* @memberof jSketch
|
||||
*/
|
||||
beginFill: function(color) {
|
||||
this.saveGraphics('fillStyle');
|
||||
this.saveGraphics();
|
||||
this.graphics.fillStyle = color;
|
||||
return this;
|
||||
},
|
||||
|
|
@ -239,7 +241,7 @@
|
|||
//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.closePath();
|
||||
return this;
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Draws a filled rectangle.
|
||||
|
|
@ -301,6 +303,7 @@
|
|||
* @memberof jSketch
|
||||
*/
|
||||
beginPath: function() {
|
||||
this.saveGraphics();
|
||||
this.graphics.beginPath();
|
||||
return this;
|
||||
},
|
||||
|
|
@ -311,6 +314,7 @@
|
|||
*/
|
||||
closePath: function() {
|
||||
this.graphics.closePath();
|
||||
this.restoreGraphics();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
|
|
@ -321,7 +325,7 @@
|
|||
*/
|
||||
eraser: function(brushSize) {
|
||||
if (typeof brushSize === 'undefined') brushSize = 15;
|
||||
if (typeof this.data.strokeStyle === 'undefined') this.saveGraphics('strokeStyle lineWidth');
|
||||
if (typeof this.data.strokeStyle === 'undefined') this.saveGraphics();
|
||||
this.graphics.globalCompositeOperation = "destination-out";
|
||||
this.graphics.strokeStyle = "rgba(0,0,0,1)";
|
||||
this.graphics.lineWidth = brushSize;
|
||||
|
|
@ -335,7 +339,7 @@
|
|||
*/
|
||||
pencil: function(brushSize) {
|
||||
this.graphics.globalCompositeOperation = "source-over";
|
||||
this.restoreGraphics('strokeStyle lineWidth');
|
||||
this.restoreGraphics();
|
||||
if (typeof brushSize !== 'undefined') this.graphics.lineWidth = brushSize;
|
||||
return this;
|
||||
},
|
||||
|
|
@ -376,6 +380,7 @@
|
|||
* @memberof jSketch
|
||||
*/
|
||||
saveGraphics: function(propList) {
|
||||
if (typeof propList === 'undefined') propList = this.graphics.options;
|
||||
if (typeof propList === 'string') propList = propList.split(" ");
|
||||
for (var p = 0; p < propList.length; p++) {
|
||||
var prop = propList[p];
|
||||
|
|
@ -390,6 +395,7 @@
|
|||
* @memberof jSketch
|
||||
*/
|
||||
restoreGraphics: function(propList) {
|
||||
if (typeof propList === 'undefined') propList = this.graphics.options;
|
||||
if (typeof propList === 'string') propList = propList.split(" ");
|
||||
for (var p = 0; p < propList.length; p++) {
|
||||
var prop = propList[p];
|
||||
|
|
@ -417,5 +423,5 @@
|
|||
|
||||
// Expose.
|
||||
window.jSketch = jSketch;
|
||||
|
||||
|
||||
})(this);
|
||||
|
|
|
|||
|
|
@ -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(d){this.graphics.globalCompositeOperation="source-over";this.restoreGraphics("strokeStyle lineWidth");if(typeof d!=="undefined"){this.graphics.lineWidth=d}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<d.length;e++){var f=d[e];this.data[f]=this.graphics[f]}return this},restoreGraphics:function(d){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){var f=this,e=new Image();e.src=g;e.onload=function(){f.graphics.drawImage(e,d,h)};return this}};a.jSketch=c})(this);
|
||||
(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.graphics.options=Object.keys(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},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();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.saveGraphics();this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();this.restoreGraphics();return this},eraser:function(d){if(typeof d==="undefined"){d=15}if(typeof this.data.strokeStyle==="undefined"){this.saveGraphics()}this.graphics.globalCompositeOperation="destination-out";this.graphics.strokeStyle="rgba(0,0,0,1)";this.graphics.lineWidth=d;return this},pencil:function(d){this.graphics.globalCompositeOperation="source-over";this.restoreGraphics();if(typeof d!=="undefined"){this.graphics.lineWidth=d}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){var f=this,e=new Image();e.src=g;e.onload=function(){f.graphics.drawImage(e,d,h)};return this}};a.jSketch=c})(this);
|
||||
Loading…
Reference in New Issue