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

Improved drawing

This commit is contained in:
Luis Leiva 2014-07-08 13:41:59 +02:00
parent a604021b40
commit 570c68485e
3 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
jquery.sketchable.js
View File

@ -314,9 +314,10 @@
saveMousePos(data, p);
// Flag drawing state.
data.sketch.isDrawing = true;
data.sketch.beginPath();
// Mark visually 1st point of stroke.
if (options.graphics.firstPointSize > 0) {
data.sketch.beginPath().fillCircle(p.x, p.y, options.graphics.firstPointSize).closePath();
data.sketch.fillCircle(p.x, p.y, options.graphics.firstPointSize);
}
// Trigger mousedown event, if need be.
if (typeof options.events.mousedown === 'function') {
@ -328,6 +329,7 @@
var elem = $(e.target), data = elem.data(_ns), options = data.options;
// Reset state.
data.sketch.isDrawing = false;
data.sketch.closePath();
data.strokes.push(data.coords);
data.coords = [];
// Trigger mouseup event, if need be.

2
jquery.sketchable.min.js vendored
View File

@ -2,4 +2,4 @@
* jQuery sketchable | v1.7 | Luis A. Leiva | MIT license
* This is a jQuery plugin for the jSketch drawing class.
*/
;(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,l){var k=(new Date).getTime();if(j.options.relTimestamps){if(j.strokes.length===0&&j.coords.length===0){j.timestamp=k}k-=j.timestamp}j.coords.push([l.x,l.y,k,+j.sketch.isDrawing])}function f(n){var k=g(n.target),l=k.data(e),j=l.options;if((!j.mouseupMovements||l.strokes.length===0)&&!l.sketch.isDrawing){return}var m=c(n);if(l.sketch.isDrawing){l.sketch.lineTo(m.x,m.y)}a(l,m);if(typeof j.events.mousemove==="function"){j.events.mousemove(k,l,n)}}function h(n){var k=g(n.target),l=k.data(e),j=l.options;l.sketch.isDrawing=true;var m=c(n);l.sketch.beginPath();if(j.graphics.firstPointSize>0){l.sketch.fillCircle(m.x,m.y,j.graphics.firstPointSize)}if(l.coords.length>0){l.strokes.push(l.coords);l.coords=[]}a(l,m);if(typeof j.events.mousedown==="function"){j.events.mousedown(k,l,n)}}function i(m){var k=g(m.target),l=k.data(e),j=l.options;l.sketch.isDrawing=false;l.sketch.closePath();l.strokes.push(l.coords);l.coords=[];if(typeof j.events.mouseup==="function"){j.events.mouseup(k,l,m)}}function d(k){k.preventDefault();var j=g(k.target);var m=k.originalEvent.changedTouches[0];for(var l in k){m[l]=k[l]}switch(k.type){case"touchstart":j.unbind(k.type,h);h(m);break;case"touchmove":j.unbind(k.type,f);f(m);break;case"touchend":j.unbind(k.type,i);i(m);break;default:return}}})(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,l){var k=(new Date).getTime();if(j.options.relTimestamps){if(j.strokes.length===0&&j.coords.length===0){j.timestamp=k}k-=j.timestamp}j.coords.push([l.x,l.y,k,+j.sketch.isDrawing])}function f(n){var k=g(n.target),l=k.data(e),j=l.options;if((!j.mouseupMovements||l.strokes.length===0)&&!l.sketch.isDrawing){return}var m=c(n);a(l,m);if(l.sketch.isDrawing){l.sketch.lineTo(m.x,m.y).stroke()}if(typeof j.events.mousemove==="function"){j.events.mousemove(k,l,n)}}function h(n){var k=g(n.target),l=k.data(e),j=l.options;var m=c(n);if(l.coords.length>0){l.strokes.push(l.coords);l.coords=[]}a(l,m);l.sketch.isDrawing=true;l.sketch.beginPath();if(j.graphics.firstPointSize>0){l.sketch.fillCircle(m.x,m.y,j.graphics.firstPointSize)}if(typeof j.events.mousedown==="function"){j.events.mousedown(k,l,n)}}function i(m){var k=g(m.target),l=k.data(e),j=l.options;l.sketch.isDrawing=false;l.sketch.closePath();l.strokes.push(l.coords);l.coords=[];if(typeof j.events.mouseup==="function"){j.events.mouseup(k,l,m)}}function d(k){k.preventDefault();var j=g(k.target);var m=k.originalEvent.changedTouches[0];for(var l in k){m[l]=k[l]}switch(k.type){case"touchstart":j.unbind(k.type,h);h(m);break;case"touchmove":j.unbind(k.type,f);f(m);break;case"touchend":j.unbind(k.type,i);i(m);break;default:return}}})(jQuery);

2
jsketch.min.js vendored
View File

@ -2,4 +2,4 @@
* jSketch 0.7 | 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.data.fillStyle=this.graphics.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);this.graphics.stroke();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);this.graphics.stroke();return this},curve:function(f,i,d,h,g,e){this.graphics.moveTo(f,i);this.curveTo(d,h,g,e);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(){this.data.strokeStyle=this.graphics.strokeStyle;this.graphics.globalCompositeOperation="copy";this.graphics.strokeStyle="rgba(0,0,0,0)"},pencil:function(){this.graphics.globalCompositeOperation="source-over";this.graphics.strokeStyle=this.data.strokeStyle},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}};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.data.fillStyle=this.graphics.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(){this.data.strokeStyle=this.graphics.strokeStyle;this.graphics.globalCompositeOperation="copy";this.graphics.strokeStyle="rgba(0,0,0,0)";return this},pencil:function(){this.graphics.globalCompositeOperation="source-over";this.graphics.strokeStyle=this.data.strokeStyle;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},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);