mirror of https://github.com/luileito/jsketch.git
Updated jsketch API
This commit is contained in:
Luis Leiva
parent
737679b97e
commit
1a2328cc9f
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
!function(a){function b(b){function c(a,c){b.sketchable("handler",function(b,d){d.sketch.clear(),d.sketch.graphics.drawImage(a,0,0),d.strokes=c.slice()})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore()),this},this.redo=function(){return f<e.length-1&&(f++,this.restore()),this},this.reset=function(){return e=[],f=-1,this.save()},this.save=function(a){return b.sketchable("handler",function(b,c){a&&a.identifier>0?e[f].strokes=c.strokes.slice():(e.push({image:b[0].toDataURL(),strokes:c.strokes.slice()}),f++)}),this},this.state=function(){return JSON.parse(JSON.stringify(e[f]))},this.restore=function(a){a||(a=e[f]);var b=new Image;b.src=a.image,b.onload=function(){c(this,a.strokes)}},this.init=function(){return a(document).off("keypress",d),a(document).on("keypress",d),this.save()},this.destroy=function(){return a(document).off("keypress",d),this.reset()}}var c="sketchable";a.fn.sketchable.plugins.memento=function(d){function e(a){if(!f.options["_bound$"+a])if(f.options["_bound$"+a]=!0,f.options.events&&"function"==typeof f.options.events[a]){var b=f.options.events[a];f.options.events[a]=function(){b.apply(d,arguments),g[a].apply(d,arguments)}}else f.options.events[a]=g[a]}for(var f=d.sketchable("config"),g={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},h="mouseup clear destroy".split(" "),i=0;i<h.length;i++)e(h[i]);a.extend(a.fn.sketchable.api,{memento:{undo:function(){var b=a(this).data(c);return b.memento.undo()},redo:function(){var b=a(this).data(c);return b.memento.redo()},save:function(){var b=a(this).data(c);return b.memento.save()},state:function(){var b=a(this).data(c);return b.memento.state()},restore:function(b){var d=a(this).data(c);return d.memento.restore(b)}}}),f.memento=new b(d),f.memento.init()}}(jQuery);
|
||||
!function(a){function b(b){function c(a,c){b.sketchable("handler",function(b,d){d.sketch.clear(),d.sketch.context.drawImage(a,0,0),d.strokes=c.slice()})}function d(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?g.redo():g.undo();break;case 25:g.redo()}}var e=[],f=-1,g=this;this.undo=function(){return f>0&&(f--,this.restore()),this},this.redo=function(){return f<e.length-1&&(f++,this.restore()),this},this.reset=function(){return e=[],f=-1,this.save()},this.save=function(a){return b.sketchable("handler",function(b,c){a&&a.identifier>0?e[f].strokes=c.strokes.slice():(e.push({image:b[0].toDataURL(),strokes:c.strokes.slice()}),f++)}),this},this.state=function(){return JSON.parse(JSON.stringify(e[f]))},this.restore=function(a){a||(a=e[f]);var b=new Image;b.src=a.image,b.onload=function(){c(this,a.strokes)}},this.init=function(){return a(document).off("keypress",d),a(document).on("keypress",d),this.save()},this.destroy=function(){return a(document).off("keypress",d),this.reset()}}var c="sketchable";a.fn.sketchable.plugins.memento=function(d){function e(a){if(!f.options["_bound$"+a])if(f.options["_bound$"+a]=!0,f.options.events&&"function"==typeof f.options.events[a]){var b=f.options.events[a];f.options.events[a]=function(){b.apply(d,arguments),g[a].apply(d,arguments)}}else f.options.events[a]=g[a]}for(var f=d.sketchable("config"),g={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},h="mouseup clear destroy".split(" "),i=0;i<h.length;i++)e(h[i]);a.extend(a.fn.sketchable.api,{memento:{undo:function(){var b=a(this).data(c);return b.memento.undo()},redo:function(){var b=a(this).data(c);return b.memento.redo()},save:function(){var b=a(this).data(c);return b.memento.save()},state:function(){var b=a(this).data(c);return b.memento.state()},restore:function(b){var d=a(this).data(c);return d.memento.restore(b)}}}),f.memento=new b(d),f.memento.init()}}(jQuery);
|
||||
|
|
@ -1 +1 @@
|
|||
!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.width,this.stageHeight=a.height,this.data={},this.setDefaults(b)}b.prototype={setContext:function(a){if(!a)throw new Error("No canvas element specified.");return this.canvas=a,this.context=a.getContext("2d"),this},setDefaults:function(a){return this.saveGraphics({fillStyle:a.fillStyle||"#F00",strokeStyle:a.strokeStyle||"#F0F",lineWidth:a.lineWidth||2,lineCap:a.lineCap||"round",lineJoin:a.lineJoin||"round",miterLimit:a.miterLimit||10}).restoreGraphics()},size:function(a,b){return this.stageWidth=a,this.stageHeight=b,this.canvas.width=a,this.canvas.height=b,this.restoreGraphics(),this},background:function(a){return this.beginFill(a),this.context.fillRect(0,0,this.stageWidth,this.stageHeight),this.endFill(),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics(),this.context.fillStyle=a,this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){return this.saveGraphics({strokeStyle:a||this.data.strokeStyle,lineWidth:b||this.data.lineWidth,lineCap:c||this.data.lineCap,lineJoin:d||this.data.lineJoin,miterLimit:e||this.data.miterLimit}).restoreGraphics()},moveTo:function(a,b){return this.context.moveTo(a,b),this},lineTo:function(a,b){return this.context.lineTo(a,b),this},line:function(a,b,c,d){return this.context.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){return this.context.quadraticCurveTo(c,d,a,b),this},curve:function(a,b,c,d,e,f){return this.context.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this},strokeRect:function(a,b,c,d){return this.context.beginPath(),this.context.strokeRect(a,b,c,d),this.context.closePath(),this},fillRect:function(a,b,c,d){return this.context.beginPath(),this.context.fillRect(a,b,c,d),this.context.closePath(),this},strokeCircle:function(a,b,c){return this.context.beginPath(),this.context.arc(a,b,c,0,2*Math.PI,!1),this.context.stroke(),this.context.closePath(),this},fillCircle:function(a,b,c){return this.context.beginPath(),this.context.arc(a,b,c,0,2*Math.PI,!1),this.context.fill(),this.context.closePath(),this},radialCircle:function(a,b,c,d,e){var f=this.context.createRadialGradient(a,b,c,a,b,d||5);e&&"array"===e.constructor.name||(e=[this.context.fillStyle,"white"]);for(var g=0;g<e.length;g++){var h=e[g];f.addColorStop(g,h)}return this.beginFill(f).fillCircle(a,b,c).endFill(),this},beginPath:function(){return this.saveGraphics(),this.context.beginPath(),this},closePath:function(){return this.context.closePath(),this.restoreGraphics(),this},eraser:function(){return this.context.globalCompositeOperation="destination-out",this},pencil:function(){return this.context.globalCompositeOperation="source-over",this},clear:function(){return this.context.clearRect(0,0,this.stageWidth,this.stageHeight),this},save:function(){return this.context.save(),this},restore:function(){return this.context.restore(),this},saveGraphics:function(a){for(var b in a)this.data[b]=a[b];return this},restoreGraphics:function(){for(var a in this.data)this.context[a]=this.data[a];return this},drawImage:function(a,b,c){"undefined"==typeof b&&(b=0),"undefined"==typeof c&&(c=0);var d=this,e=new Image;return e.src=a,e.onload=function(){d.context.drawImage(e,b,c)},this}},a.jSketch=b}(this);
|
||||
!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.width,this.stageHeight=a.height,this.data=b,this.setDefaults()}b.prototype={setContext:function(a){if(!a)throw new Error("No canvas element specified.");return this.canvas=a,this.context=a.getContext("2d"),this},setDefaults:function(){return this.saveGraphics({fillStyle:this.data.fillStyle||"#F00",strokeStyle:this.data.strokeStyle||"#F0F",lineWidth:this.data.lineWidth||2,lineCap:this.data.lineCap||"round",lineJoin:this.data.lineJoin||"round",miterLimit:this.data.miterLimit||10}).restoreGraphics()},size:function(a,b){return this.stageWidth=a,this.stageHeight=b,this.canvas.width=a,this.canvas.height=b,this.restoreGraphics(),this},background:function(a){return this.beginFill(a),this.context.fillRect(0,0,this.stageWidth,this.stageHeight),this.endFill(),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics(),this.context.fillStyle=a,this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){return this.saveGraphics({strokeStyle:a||this.data.strokeStyle,lineWidth:b||this.data.lineWidth,lineCap:c||this.data.lineCap,lineJoin:d||this.data.lineJoin,miterLimit:e||this.data.miterLimit}).restoreGraphics()},moveTo:function(a,b){return this.context.moveTo(a,b),this},lineTo:function(a,b){return this.context.lineTo(a,b),this},line:function(a,b,c,d){return this.context.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){return this.context.quadraticCurveTo(c,d,a,b),this},curve:function(a,b,c,d,e,f){return this.context.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this},strokeRect:function(a,b,c,d){return this.context.beginPath(),this.context.strokeRect(a,b,c,d),this.context.closePath(),this},fillRect:function(a,b,c,d){return this.context.beginPath(),this.context.fillRect(a,b,c,d),this.context.closePath(),this},strokeCircle:function(a,b,c){return this.context.beginPath(),this.context.arc(a,b,c,0,2*Math.PI,!1),this.context.stroke(),this.context.closePath(),this},fillCircle:function(a,b,c){return this.context.beginPath(),this.context.arc(a,b,c,0,2*Math.PI,!1),this.context.fill(),this.context.closePath(),this},radialCircle:function(a,b,c,d,e){var f=this.context.createRadialGradient(a,b,c,a,b,d||5);e&&"array"===e.constructor.name||(e=[this.context.fillStyle,"white"]);for(var g=0;g<e.length;g++){var h=e[g];f.addColorStop(g,h)}return this.beginFill(f).fillCircle(a,b,c).endFill(),this},beginPath:function(){return this.saveGraphics(),this.context.beginPath(),this},closePath:function(){return this.context.closePath(),this.restoreGraphics(),this},eraser:function(){return this.context.globalCompositeOperation="destination-out",this},pencil:function(){return this.context.globalCompositeOperation="source-over",this},clear:function(){return this.context.clearRect(0,0,this.stageWidth,this.stageHeight),this},save:function(){return this.context.save(),this},restore:function(){return this.context.restore(),this},saveGraphics:function(a){for(var b in a)this.data[b]=a[b];return this},restoreGraphics:function(){for(var a in this.data)this.context[a]=this.data[a];return this},drawImage:function(a,b,c){"undefined"==typeof b&&(b=0),"undefined"==typeof c&&(c=0);var d=this,e=new Image;return e.src=a,e.onload=function(){d.context.drawImage(e,b,c)},this}},a.jSketch=b}(this);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
!function(a){function b(a){function b(b,c){a.handler(function(a,d){d.sketch.clear(),d.sketch.graphics.drawImage(b,0,0),d.strokes=c.slice()})}function c(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?f.redo():f.undo();break;case 25:f.redo()}}var d=[],e=-1,f=this;this.undo=function(){return e>0&&(e--,this.restore()),this},this.redo=function(){return e<d.length-1&&(e++,this.restore()),this},this.reset=function(){return d=[],e=-1,this.save()},this.save=function(b){return a.handler(function(a,c){b&&b.identifier>0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.slice()}),e++)}),this},this.state=function(){return JSON.parse(JSON.stringify(d[e]))},this.restore=function(a){a||(a=d[e]);var c=new Image;c.src=a.image,c.onload=function(){b(this,a.strokes)}},this.init=function(){return Event.remove(document,"keypress",c),Event.add(document,"keypress",c),this.save()},this.destroy=function(){return Event.remove(document,"keypress",c),this.reset()}}var c="sketchable";Sketchable.prototype.plugins.memento=function(a){function d(b){if(!e.options["_bound$"+b])if(e.options["_bound$"+b]=!0,e.options.events&&"function"==typeof e.options.events[b]){var c=e.options.events[b];e.options.events[b]=function(){c.apply(a,arguments),f[b].apply(a,arguments)}}else e.options.events[b]=f[b]}for(var e=a.config(),f={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},g="mouseup clear destroy".split(" "),h=0;h<g.length;h++)d(g[h]);deepExtend(a,{memento:{undo:function(){var b=dataBind(a.elem)[c];return b.memento.undo()},redo:function(){var b=dataBind(a.elem)[c];return b.memento.redo()},save:function(){var b=dataBind(a.elem)[c];return b.memento.save()},state:function(){var b=dataBind(a.elem)[c];return b.memento.state()},restore:function(b){var d=dataBind(a.elem)[c];return d.memento.restore(b)}}}),e.memento=new b(a),e.memento.init()}}(this);
|
||||
!function(a){function b(a){function b(b,c){a.handler(function(a,d){d.sketch.clear(),d.sketch.context.drawImage(b,0,0),d.strokes=c.slice()})}function c(a){if(a.ctrlKey)switch(a.which){case 26:a.shiftKey?f.redo():f.undo();break;case 25:f.redo()}}var d=[],e=-1,f=this;this.undo=function(){return e>0&&(e--,this.restore()),this},this.redo=function(){return e<d.length-1&&(e++,this.restore()),this},this.reset=function(){return d=[],e=-1,this.save()},this.save=function(b){return a.handler(function(a,c){b&&b.identifier>0?d[e].strokes=c.strokes.slice():(d.push({image:a.toDataURL(),strokes:c.strokes.slice()}),e++)}),this},this.state=function(){return JSON.parse(JSON.stringify(d[e]))},this.restore=function(a){a||(a=d[e]);var c=new Image;c.src=a.image,c.onload=function(){b(this,a.strokes)}},this.init=function(){return Event.remove(document,"keypress",c),Event.add(document,"keypress",c),this.save()},this.destroy=function(){return Event.remove(document,"keypress",c),this.reset()}}var c="sketchable";Sketchable.prototype.plugins.memento=function(a){function d(b){if(!e.options["_bound$"+b])if(e.options["_bound$"+b]=!0,e.options.events&&"function"==typeof e.options.events[b]){var c=e.options.events[b];e.options.events[b]=function(){c.apply(a,arguments),f[b].apply(a,arguments)}}else e.options.events[b]=f[b]}for(var e=a.config(),f={clear:function(a,b){b.memento.reset()},mouseup:function(a,b,c){b.memento.save(c)},destroy:function(a,b){b.memento.destroy()}},g="mouseup clear destroy".split(" "),h=0;h<g.length;h++)d(g[h]);deepExtend(a,{memento:{undo:function(){var b=dataBind(a.elem)[c];return b.memento.undo()},redo:function(){var b=dataBind(a.elem)[c];return b.memento.redo()},save:function(){var b=dataBind(a.elem)[c];return b.memento.save()},state:function(){var b=dataBind(a.elem)[c];return b.memento.state()},restore:function(b){var d=dataBind(a.elem)[c];return d.memento.restore(b)}}}),e.memento=new b(a),e.memento.init()}}(this);
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
// Note: jSketch.drawImage after clear creates some flickering,
|
||||
// so use the native HTMLCanvasElement.drawImage method instead.
|
||||
data.sketch.clear();
|
||||
data.sketch.graphics.drawImage(snapshot, 0,0);
|
||||
data.sketch.context.drawImage(snapshot, 0,0);
|
||||
// Update strokes.
|
||||
data.strokes = strokes.slice();
|
||||
});
|
||||
|
|
|
|||
135
jsketch.js
135
jsketch.js
|
|
@ -24,8 +24,8 @@
|
|||
;(function(window) {
|
||||
/**
|
||||
* @constructor
|
||||
* @param {Object|Strig} elem - DOM element or selector.
|
||||
* @param {Object} [options] - Configuration (default: {@link Sketchable#defaults}).
|
||||
* @param {Object|Strig} elem DOM element or selector.
|
||||
* @param {Object} [options] Configuration (default: {@link Sketchable#defaults}).
|
||||
*/
|
||||
function jSketch(elem, options) {
|
||||
if (!elem) throw new Error('Sketchable requires a DOM element.');
|
||||
|
|
@ -36,10 +36,10 @@
|
|||
this.stageWidth = elem.width;
|
||||
this.stageHeight = elem.height;
|
||||
// Make room for storing some data such as line type, colors, etc.
|
||||
this.data = {};
|
||||
this.data = options;
|
||||
// Set drawing defaults.
|
||||
// All methods are chainable.
|
||||
return this.setDefaults(options);
|
||||
return this.setDefaults();
|
||||
};
|
||||
/**
|
||||
* jSketch methods (publicly extensible).
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
jSketch.prototype = {
|
||||
/**
|
||||
* Allows to change the drawing context at runtime.
|
||||
* @param {Object} elem - DOM element.
|
||||
* @param {Object} elem DOM element.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -63,31 +63,30 @@
|
|||
return this;
|
||||
},
|
||||
/**
|
||||
* Sets drawing defaults.
|
||||
* @param {Object} [options] - Drawing options.
|
||||
* @param {String} options.fillStyle - Fill style color (default: '#F00').
|
||||
* @param {String} options.strokeStyle - Stroke style color (default: '#F0F').
|
||||
* @param {Number} options.lineWidth - Line width (default: 2).
|
||||
* @param {String} options.lineCap - Line cap (default: 'round').
|
||||
* @param {String} options.lineJoin - Line join (default: 'round').
|
||||
* @param {Number} options.miterLimit - Line miter (default: 10). Works only if the lineJoin attribute is "miter".
|
||||
* Sets drawing defaults:
|
||||
* - fillStyle: Fill style color ('#F00').
|
||||
* - strokeStyle: Stroke style color ('#F0F').
|
||||
* - lineWidth: Line width (2).
|
||||
* - lineCap: Line cap ('round').
|
||||
* - lineJoin: Line join ('round').
|
||||
* - miterLimit: Line miter (10). Works only if the lineJoin attribute is "miter".
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
setDefaults: function(options) {
|
||||
setDefaults: function() {
|
||||
return this.saveGraphics({
|
||||
fillStyle: options.fillStyle || '#F00',
|
||||
strokeStyle: options.strokeStyle || '#F0F',
|
||||
lineWidth: options.lineWidth || 2,
|
||||
lineCap: options.lineCap || 'round',
|
||||
lineJoin: options.lineJoin || 'round',
|
||||
miterLimit: options.miterLimit || 10
|
||||
fillStyle: this.data.fillStyle || '#F00',
|
||||
strokeStyle: this.data.strokeStyle || '#F0F',
|
||||
lineWidth: this.data.lineWidth || 2,
|
||||
lineCap: this.data.lineCap || 'round',
|
||||
lineJoin: this.data.lineJoin || 'round',
|
||||
miterLimit: this.data.miterLimit || 10
|
||||
}).restoreGraphics();
|
||||
},
|
||||
/**
|
||||
* Sets the dimensions of canvas.
|
||||
* @param {Number} width - New canvas width.
|
||||
* @param {Number} height - New canvas width.
|
||||
* @param {Number} width New canvas width.
|
||||
* @param {Number} height New canvas width.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -102,7 +101,7 @@
|
|||
},
|
||||
/**
|
||||
* Sets the background color of canvas.
|
||||
* @param {String} color - An HTML color.
|
||||
* @param {String} color An HTML color.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -114,9 +113,9 @@
|
|||
},
|
||||
/**
|
||||
* Shortcut for setting the size + background color.
|
||||
* @param {Number} width - New canvas width.
|
||||
* @param {Number} height - New canvas width.
|
||||
* @param {String} bgcolor - An HTML color.
|
||||
* @param {Number} width New canvas width.
|
||||
* @param {Number} height New canvas width.
|
||||
* @param {String} bgcolor An HTML color.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -126,7 +125,7 @@
|
|||
},
|
||||
/**
|
||||
* Sets the fill color.
|
||||
* @param {String} color - An HTML color.
|
||||
* @param {String} color An HTML color.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -146,11 +145,11 @@
|
|||
},
|
||||
/**
|
||||
* Sets the line style.
|
||||
* @param {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} miter - Style of line miter. Only works if capStyle is "miter".
|
||||
* @param {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} miter Style of line miter. Only works if capStyle is "miter".
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -165,8 +164,8 @@
|
|||
},
|
||||
/**
|
||||
* Move brush to a coordinate in canvas.
|
||||
* @param {Number} x - Horizontal coordinate.
|
||||
* @param {Number} y - Vertical coordinate.
|
||||
* @param {Number} x Horizontal coordinate.
|
||||
* @param {Number} y Vertical coordinate.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -176,8 +175,8 @@
|
|||
},
|
||||
/**
|
||||
* Draws line to given coordinate.
|
||||
* @param {Number} x - Horizontal coordinate.
|
||||
* @param {Number} y - Vertical coordinate.
|
||||
* @param {Number} x Horizontal coordinate.
|
||||
* @param {Number} y Vertical coordinate.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -187,10 +186,10 @@
|
|||
},
|
||||
/**
|
||||
* 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.
|
||||
* @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
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -201,10 +200,10 @@
|
|||
},
|
||||
/**
|
||||
* Draws curve to given coordinate.
|
||||
* @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.
|
||||
* @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
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -214,12 +213,12 @@
|
|||
},
|
||||
/**
|
||||
* Draws curve from coordinate 1 to coordinate 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.
|
||||
* @param {Number} cpx - Horizontal coordinate of control point.
|
||||
* @param {Number} cpy - Vertical 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
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -239,10 +238,10 @@
|
|||
},
|
||||
/**
|
||||
* Draws a stroke-only rectangle.
|
||||
* @param {Number} x - Horizontal coordinate.
|
||||
* @param {Number} y - Vertical coordinate.
|
||||
* @param {Number} width - Rectangle width.
|
||||
* @param {Number} height - Rectangle height.
|
||||
* @param {Number} x Horizontal coordinate.
|
||||
* @param {Number} y Vertical coordinate.
|
||||
* @param {Number} width Rectangle width.
|
||||
* @param {Number} height Rectangle height.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -254,10 +253,10 @@
|
|||
},
|
||||
/**
|
||||
* Draws a filled rectangle.
|
||||
* @param {Number} x - Horizontal coordinate.
|
||||
* @param {Number} y - Vertical coordinate.
|
||||
* @param {Number} width - Rectangle width.
|
||||
* @param {Number} height - Rectangle height.
|
||||
* @param {Number} x Horizontal coordinate.
|
||||
* @param {Number} y Vertical coordinate.
|
||||
* @param {Number} width Rectangle width.
|
||||
* @param {Number} height Rectangle height.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -269,9 +268,9 @@
|
|||
},
|
||||
/**
|
||||
* Draws a stroke-only circle.
|
||||
* @param {Number} x - Horizontal coordinate.
|
||||
* @param {Number} y - Vertical coordinate.
|
||||
* @param {Number} radius - Circle radius.
|
||||
* @param {Number} x Horizontal coordinate.
|
||||
* @param {Number} y Vertical coordinate.
|
||||
* @param {Number} radius Circle radius.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -284,9 +283,9 @@
|
|||
},
|
||||
/**
|
||||
* Draws a filled circle.
|
||||
* @param {Number} x - Horizontal coordinate.
|
||||
* @param {Number} y - Vertical coordinate.
|
||||
* @param {Number} radius - Circle radius.
|
||||
* @param {Number} x Horizontal coordinate.
|
||||
* @param {Number} y Vertical coordinate.
|
||||
* @param {Number} radius Circle radius.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -381,7 +380,7 @@
|
|||
},
|
||||
/**
|
||||
* Saves given drawing settings.
|
||||
* @param {Object} [options] - Graphics options.
|
||||
* @param {Object} [options] Graphics options.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
@ -404,9 +403,9 @@
|
|||
},
|
||||
/**
|
||||
* Draws an image.
|
||||
* @param {String} src - Image source path.
|
||||
* @param {Number} [x] - Horizontal coordinate.
|
||||
* @param {Number} [y] - Vertical coordinate.
|
||||
* @param {String} src Image source path.
|
||||
* @param {Number} [x] Horizontal coordinate.
|
||||
* @param {Number} [y] Vertical coordinate.
|
||||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
// Note: jSketch.drawImage after clear creates some flickering,
|
||||
// so use the native HTMLCanvasElement.drawImage method instead.
|
||||
data.sketch.clear();
|
||||
data.sketch.graphics.drawImage(snapshot, 0,0);
|
||||
data.sketch.context.drawImage(snapshot, 0,0);
|
||||
// Update strokes.
|
||||
data.strokes = strokes.slice();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue