mirror of https://github.com/luileito/jsketch.git
Documented code with JSDoc 3.3
This commit is contained in:
Luis Leiva
parent
516fe1f56b
commit
70aa9e51b7
|
|
@ -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
|
||||
* @ignore
|
||||
* @description This just documents the method that is added to jQuery by this plugin.
|
||||
* See <a href="http://jquery.com/">the jQuery library</a> for full details.
|
||||
* This just documents the method that is added to jQuery by this plugin.
|
||||
*/
|
||||
/**
|
||||
* @name $.fn
|
||||
* @class
|
||||
* @memberof $
|
||||
* @description This just documents the method that is added to jQuery by this plugin.
|
||||
* See <a href="http://jquery.com/">the jQuery library</a> 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
|
||||
|
|
@ -118,9 +110,10 @@
|
|||
},
|
||||
/**
|
||||
* Clears canvas (together with strokes data).
|
||||
* If you need to clear canvas only, just invoke <tt>data.sketch.clear()</tt> via <tt>$(selector).sketchable('handler')</tt>.
|
||||
* @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 <tt>jQuery.sketchable</tt> instance.
|
||||
* This is a jQuery plugin for the <tt>jSketch</tt> 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 <tt>interactive</tt> is set to <tt>true</tt>.
|
||||
* @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) {
|
||||
|
|
@ -284,6 +285,9 @@
|
|||
data.coords[idx].push([ pt.x, pt.y, time, +data.sketch.isDrawing ]);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function mousemoveHandler(e, idx) {
|
||||
if (typeof idx === 'undefined') idx = 0;
|
||||
|
||||
|
|
@ -303,6 +307,9 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function mousedownHandler(e, idx) {
|
||||
if (typeof idx === 'undefined') idx = 0;
|
||||
|
||||
|
|
@ -329,6 +336,9 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function mouseupHandler(e, idx) {
|
||||
if (typeof idx === 'undefined') idx = 0;
|
||||
|
||||
|
|
@ -341,29 +351,32 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<p.length;k++){for(var n in m){j[n]=m[n]}h(j,j.identifier)}break;case"touchmove":l.unbind(m.type,f);for(var k=0,j=p[k];k<p.length;k++){for(var n in m){j[n]=m[n]}f(j,j.identifier)}break;case"touchend":l.unbind(m.type,i);for(var k=0,j=p[k];k<p.length;k++){for(var n in m){j[n]=m[n]}i(j,j.identifier)}break;default:return}return false}})(jQuery);
|
||||
(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(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];k<m.length;k++){for(var p in n){j[p]=n[p]}h(j,j.identifier)}break;case"touchmove":l.unbind(n.type,f);for(var k=0,j=m[k];k<m.length;k++){for(var p in n){j[p]=n[p]}f(j,j.identifier)}break;case"touchend":l.unbind(n.type,i);for(var k=0,j=m[k];k<m.length;k++){for(var p in n){j[p]=n[p]}i(j,j.identifier)}break;default:return}return false}})(jQuery);
|
||||
233
jsketch.js
233
jsketch.js
|
|
@ -4,81 +4,82 @@
|
|||
*/
|
||||
/**
|
||||
* A simple JavaScript library for drawing facilities on HTML5 canvas.
|
||||
* This class is mostly a wrapper for the HTML5 canvas API with some sugar,
|
||||
* such as object chainability and old-school AS3-like notation.
|
||||
* 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
|
||||
* @version 0.7
|
||||
* @date 8 Apr 2014
|
||||
* @license MIT license
|
||||
* @example
|
||||
* var canvas1 = document.getElementById('foo');
|
||||
* var canvas2 = document.getElementById('bar');
|
||||
* // instantiate once, reuse everywhere
|
||||
* // 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)
|
||||
* // 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){
|
||||
/**
|
||||
* @constructor
|
||||
* @param {Object} elem MUST be a DOM element
|
||||
* @param {Object} options configuration
|
||||
* @param {Object} elem - MUST be a DOM element
|
||||
* @param {Object} options - Configuration
|
||||
*/
|
||||
var jSketch = function(elem, options){
|
||||
return new Sketch(elem, options);
|
||||
};
|
||||
// base class (private)
|
||||
// Base class, private.
|
||||
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;
|
||||
// one can pass default setup values
|
||||
// We can pass default setup values.
|
||||
if (typeof options === 'undefined') options = {};
|
||||
// set drawing context first
|
||||
// Set drawing context first.
|
||||
this.context(elem);
|
||||
// scene defaults
|
||||
// Scene defaults.
|
||||
this.stageWidth = elem.getAttribute("width");
|
||||
this.stageHeight = elem.getAttribute("height");
|
||||
// drawing defaults
|
||||
// Drawing defaults.
|
||||
this.graphics.fillStyle = typeof options.fillStyle !== 'undefined' ? options.fillStyle : '#F00';
|
||||
this.graphics.strokeStyle = typeof options.strokeStyle !== 'undefined' ? options.strokeStyle : '#F0F';
|
||||
this.graphics.lineWidth = typeof options.lineWidth !== 'undefined' ? options.lineWidth : 2;
|
||||
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;
|
||||
// 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 = {};
|
||||
// make constructor chainable
|
||||
// Make constructor chainable.
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* jSketch methods (publicly extensible).
|
||||
* @class
|
||||
* @memberOf jSketch
|
||||
* @ignore
|
||||
* @memberof jSketch
|
||||
* @see jSketch
|
||||
*/
|
||||
jSketch.fn = Sketch.prototype = {
|
||||
/**
|
||||
* Allows to change the drawing context at runtime.
|
||||
* @param {Object} elem DOM element
|
||||
* @param {Object} elem - DOM element.
|
||||
* @return jSketch
|
||||
* @name context
|
||||
* @methodOf jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
context: function(elem) {
|
||||
if (elem == null) throw("No canvas element specified.");
|
||||
// save shortcuts: canvas (DOM elem) & graphics (2D canvas context)
|
||||
// Save shortcuts: canvas (DOM elem) & graphics (2D canvas context).
|
||||
this.canvas = elem;
|
||||
this.graphics = elem.getContext("2d");
|
||||
// allow chainability
|
||||
// Always allow chainability.
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Sets the dimensions of canvas.
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
* @param {Number} width - New canvas width.
|
||||
* @param {Number} height - New canvas width.
|
||||
* @return jSketch
|
||||
* @name size
|
||||
* @methodOf jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
size: function(width,height) {
|
||||
this.stageWidth = width;
|
||||
|
|
@ -89,26 +90,24 @@
|
|||
},
|
||||
/**
|
||||
* Sets the background color of canvas.
|
||||
* @param {Number|String} color an HTML color
|
||||
* @param {Number|String} color - An HTML color.
|
||||
* @return jSketch
|
||||
* @name background
|
||||
* @methodOf jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
background: function(color) {
|
||||
var oldFill = this.graphics.fillStyle;
|
||||
this.beginFill(color);
|
||||
this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);
|
||||
this.beginFill(oldFill); // restore old fill
|
||||
this.beginFill(oldFill); // Restore old fill
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Shortcut for setting the size + background color.
|
||||
* @param {Number} width
|
||||
* @param {Number} height
|
||||
* @param {Number|String} color an HTML color
|
||||
* @param {Number} width - New canvas width.
|
||||
* @param {Number} height - New canvas width.
|
||||
* @param {Number|String} bgcolor - An HTML color.
|
||||
* @return jSketch
|
||||
* @name stage
|
||||
* @methodOf jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
stage: function(width,height,bgcolor) {
|
||||
this.size(width,height).background(bgcolor);
|
||||
|
|
@ -116,10 +115,9 @@
|
|||
},
|
||||
/**
|
||||
* Sets the fill color.
|
||||
* @param {Number|String} color an HTML color
|
||||
* @param {Number|String} color - An HTML color.
|
||||
* @return jSketch
|
||||
* @name beginFill
|
||||
* @methodOf jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
beginFill: function(color) {
|
||||
this.saveGraphics('fillStyle');
|
||||
|
|
@ -129,8 +127,7 @@
|
|||
/**
|
||||
* Recovers the fill color that was set before <code>beginFill()</code>.
|
||||
* @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,13 +227,12 @@
|
|||
},
|
||||
/**
|
||||
* 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();
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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<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.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);
|
||||
Loading…
Reference in New Issue