Skip to content

Commit

Permalink
added callback ability when a certain ratio is reacher.
Browse files Browse the repository at this point in the history
  • Loading branch information
@boblemarin
boblemarin committed Jan 13, 2012
1 parent bb30266 commit 101c98b
Show file tree
Hide file tree
Showing 10 changed files with 192 additions and 25 deletions.
Binary file added P1090702.JPG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 11 additions & 4 deletions README
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,12 +1,12 @@
jQuery.eraser #jQuery.eraser
jQuery plugin that makes an image erasable (with mouse or touch movements) jQuery plugin that makes an image erasable (with mouse or touch movements)


this plugin replaces the targeted image by an interactive canvas that can be erased this plugin replaces the targeted image by an interactive canvas that can be erased
using touch ou mouse moves. using touch ou mouse moves.






Check this : #Check this :


This plug-in works with image or canvas elements. This plug-in works with image or canvas elements.
The images must be fully loaded before calling eraser(). The images must be fully loaded before calling eraser().
Expand All @@ -24,7 +24,7 @@ addEventListener( "load", init, false );






Usage : #Usage :




To transform an image or canvas into an erasable canvas, just use this syntax : To transform an image or canvas into an erasable canvas, just use this syntax :
Expand All @@ -47,9 +47,16 @@ And you can erase all the canvas' content by calling :
$('#yourImage').eraser('clear'); $('#yourImage').eraser('clear');




To get a callback when 50% of the image has been erased, use this :

$('#yourImage').eraser( {
completeRatio: .5,
completeFunction: showResetButton
});





URLs : #URLs :


* https://github.com/boblemarin/jQuery.eraser * https://github.com/boblemarin/jQuery.eraser
* http://minimal.be/lab/jQuery.eraser/ * http://minimal.be/lab/jQuery.eraser/
Expand Down
Binary file added img/overlay.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/please.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 robot.jpg → img/robot.jpg
View file
File renamed without changes
0 robot_redux.png → img/robot_redux.png
View file
File renamed without changes
9 changes: 5 additions & 4 deletions index.htm
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -76,17 +76,18 @@
<h1>jQuery.eraser()</h1> <h1>jQuery.eraser()</h1>
<p>a plugin that replaces the targeted image by an interactive canvas <br/>that can be erased <p>a plugin that replaces the targeted image by an interactive canvas <br/>that can be erased
using touch ou mouse moves.<br/><b>try by yourself below...</b></p> using touch ou mouse moves.<br/><b>try by yourself below...</b></p>
<p><code>$("#myImage").eraser();</code></p> <p><code id="percent">$("#myImage").eraser();</code></p>
<span class="container"> <span class="container">
<img id="robot" src="robot.jpg" /> <img id="robot" src="img/robot.jpg" />
<img id="redux" src="robot_redux.png" /> <img id="redux" src="img/robot_redux.png" />
</span> </span>
<p> <p>
<a href="#" onclick="reset(event);" class="box"> RESET </a> <a href="#" onclick="reset(event);" class="box"> RESET </a>
<a href="#" onclick="remove(event);" class="box"> CLEAR </a> <a href="#" onclick="remove(event);" class="box"> CLEAR </a>
</p> </p>


<p><a href="https://github.com/boblemarin/jQuery.eraser" class="big">Download on github</a><br/> ... and <a href="http://minimal.be/@">follow boblemarin</a></p> <p><a href="https://github.com/boblemarin/jQuery.eraser" class="big">Download on github</a><br/> ... and <a href="http://minimal.be/@">follow boblemarin</a><br/>
<a href="teeth.htm">or brush his teeth</a>.</p>


<script src='js/jquery-1.6.2.min.js' type='text/javascript'></script> <script src='js/jquery-1.6.2.min.js' type='text/javascript'></script>
<script src='js/jquery.eraser.js' type='text/javascript'></script> <script src='js/jquery.eraser.js' type='text/javascript'></script>
Expand Down
Binary file added js/.DS_Store
View file
Binary file not shown.
74 changes: 57 additions & 17 deletions js/jquery.eraser.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
/* /*
* jQuery.eraser * jQuery.eraser v0.2
* makes any image or canvas user-erasable * makes any image or canvas user-erasable
* *
* Usage: * Usage:
Expand Down Expand Up @@ -53,6 +53,11 @@
pos = $this.offset(), pos = $this.offset(),
$canvas = $("<canvas/>"), $canvas = $("<canvas/>"),
canvas = $canvas.get(0), canvas = $canvas.get(0),
size = ( options && options.size )?options.size:40,
parts = [],
colParts = Math.floor( width / size ),
numParts = colParts * Math.floor( height / size ),
n = numParts,
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");


// replace target with canvas // replace target with canvas
Expand All @@ -67,7 +72,7 @@
// prepare context for drawing operations // prepare context for drawing operations
ctx.globalCompositeOperation = "destination-out"; ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = 'rgba(255,0,0,255)'; ctx.strokeStyle = 'rgba(255,0,0,255)';
ctx.lineWidth = ( options && options.size )?options.size:40; ctx.lineWidth = size;


ctx.lineCap = "round"; ctx.lineCap = "round";
// bind events // bind events
Expand All @@ -76,6 +81,9 @@
$canvas.bind('touchmove.eraser', methods.touchMove); $canvas.bind('touchmove.eraser', methods.touchMove);
$canvas.bind('touchend.eraser', methods.touchEnd); $canvas.bind('touchend.eraser', methods.touchEnd);


// reset parts
while( n-- ) parts.push(1);

// store values // store values
data = { data = {
posX:pos.left, posX:pos.left,
Expand All @@ -90,7 +98,12 @@
ctx: ctx, ctx: ctx,
w:width, w:width,
h:height, h:height,
source: this source: this,
size: size,
parts: parts,
colParts: colParts,
numParts: numParts,
ratio: 0
}; };
$canvas.data('eraser', data); $canvas.data('eraser', data);


Expand All @@ -108,11 +121,16 @@
data = $this.data('eraser'); data = $this.data('eraser');


if ( !data.touchDown ) { if ( !data.touchDown ) {
var t = event.originalEvent.changedTouches[0]; var t = event.originalEvent.changedTouches[0],
tx = t.pageX - data.posX,
ty = t.pageY - data.posY;
methods.evaluatePoint( data, tx, ty );
data.touchDown = true; data.touchDown = true;
data.touchID = t.identifier; data.touchID = t.identifier;
data.touchX = t.pageX - data.posX; data.touchX = tx;
data.touchY = t.pageY - data.posY; data.touchY = ty;
data.ratio += data.parts[p];
data.parts[p] = 0;
event.preventDefault(); event.preventDefault();
} }
}, },
Expand All @@ -125,10 +143,13 @@
n = ta.length; n = ta.length;
while( n-- ) while( n-- )
if ( ta[n].identifier == data.touchID ) { if ( ta[n].identifier == data.touchID ) {
var tx = ta[n].pageX - data.posX,
ty = ta[n].pageY - data.posY;
methods.evaluatePoint( data, tx, ty );
data.ctx.beginPath(); data.ctx.beginPath();
data.ctx.moveTo( data.touchX, data.touchY ); data.ctx.moveTo( data.touchX, data.touchY );
data.touchX = ta[n].pageX - data.posX; data.touchX = tx;
data.touchY = ta[n].pageY - data.posY; data.touchY = ty;
data.ctx.lineTo( data.touchX, data.touchY ); data.ctx.lineTo( data.touchX, data.touchY );
data.ctx.stroke(); data.ctx.stroke();
event.preventDefault(); event.preventDefault();
Expand All @@ -152,14 +173,25 @@
} }
}, },


evaluatePoint: function( data, tx, ty ) {
var p = Math.floor(tx/data.size) + Math.floor( ty / data.size ) * data.colParts;
if ( p >= 0 && p < data.numParts ) {
data.ratio += data.parts[p];
data.parts[p] = 0;
document.getElementById("percent").innerHTML = Math.round(data.ratio/data.numParts*100)+"%";
}

},


mouseDown: function( event ) { mouseDown: function( event ) {
var $this = $(this), var $this = $(this),
data = $this.data('eraser'); data = $this.data('eraser'),

tx = event.pageX - data.posX,
ty = event.pageY - data.posY;
methods.evaluatePoint( data, tx, ty );
data.touchDown = true; data.touchDown = true;
data.touchX = event.pageX - data.posX; data.touchX = tx;
data.touchY = event.pageY - data.posY; data.touchY = ty;
data.ctx.beginPath(); data.ctx.beginPath();
data.ctx.moveTo( data.touchX-1, data.touchY ); data.ctx.moveTo( data.touchX-1, data.touchY );
data.ctx.lineTo( data.touchX, data.touchY ); data.ctx.lineTo( data.touchX, data.touchY );
Expand All @@ -171,12 +203,14 @@


mouseMove: function( event ) { mouseMove: function( event ) {
var $this = $(this), var $this = $(this),
data = $this.data('eraser'); data = $this.data('eraser'),

tx = event.pageX - data.posX,
ty = event.pageY - data.posY;
methods.evaluatePoint( data, tx, ty );
data.ctx.beginPath(); data.ctx.beginPath();
data.ctx.moveTo( data.touchX, data.touchY ); data.ctx.moveTo( data.touchX, data.touchY );
data.touchX = event.pageX - data.posX; data.touchX = tx;
data.touchY = event.pageY - data.posY; data.touchY = ty;
data.ctx.lineTo( data.touchX, data.touchY ); data.ctx.lineTo( data.touchX, data.touchY );
data.ctx.stroke(); data.ctx.stroke();
event.preventDefault(); event.preventDefault();
Expand All @@ -198,6 +232,9 @@
if ( data ) if ( data )
{ {
data.ctx.clearRect( 0, 0, data.w, data.h ); data.ctx.clearRect( 0, 0, data.w, data.h );
var n = data.numParts;
while( n-- ) data.parts[n] = 0;
data.ratio = data.numParts;
} }
}, },


Expand All @@ -209,6 +246,9 @@
data.ctx.globalCompositeOperation = "source-over"; data.ctx.globalCompositeOperation = "source-over";
data.ctx.drawImage( data.source, 0, 0 ); data.ctx.drawImage( data.source, 0, 0 );
data.ctx.globalCompositeOperation = "destination-out"; data.ctx.globalCompositeOperation = "destination-out";
var n = data.numParts;
while( n-- ) data.parts[n] = 1;
data.ratio = 0;
} }


} }
Expand All @@ -220,7 +260,7 @@
} else if ( typeof method === 'object' || ! method ) { } else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments ); return methods.init.apply( this, arguments );
} else { } else {
$.error( 'Method ' + method + ' does not exist on jQuery.eraser' ); $.error( 'Method ' + method + ' does not yet exist on jQuery.eraser' );
} }
}; };
})( jQuery ); })( jQuery );
119 changes: 119 additions & 0 deletions teeth.htm
View file
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name='HandheldFriendly' content='True' />
<!--<meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />-->
<meta name='viewport' content='user-scalable=0' />
<meta name="viewport" content="width=device-width" />
<title>PLEASE BRUSH MY TEETH ! jQuery.eraser demo</title>

<style type="text/css">

body {
background: #FFF;
color: #FFF;
margin: 5px;
padding: 0px;
margin-bottom: 45px;
text-align: center;
font-family: Helvetica, Arial;
}

a {
color: #000;
}

a.box {
text-decoration: none;
display: inline-block;
color: #000;
background: #DDD;
padding: 10px;
margin: 10px;
}

.big {
font-size: 2em;
display: inline-block;
margin: 10px;
}
.container {
position: relative;
display: inline-block;
width: 675px;
height: 850px;
}

#robot {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

#redux {
position: absolute;
top: 444px;
left: 208px;
z-index: 2;
}

</style>
</head>
<body>
<span class="container">
<img id="robot" src="img/please.jpg" />
<img id="redux" src="img/overlay.jpg" />
</span>
<p>
<a href="#" onclick="reset(event);" class="box"> RESET </a>
<a href="#" onclick="remove(event);" class="box"> CLEAR </a>
</p>

<script src='js/jquery-1.6.2.min.js' type='text/javascript'></script>
<script src='js/jquery.eraser.js' type='text/javascript'></script>
<script type = "text/javascript">

addEventListener( "load", init, false );

function init( event ) {
$("#redux").eraser( { size: 10 } );

// you can alse specify the brush size (in pixel) by using options :
// $("#redux").eraser({size: 20});
}

function remove(event) {
$("#redux").eraser('clear');
event.preventDefault();
}

function reset(event) {
$("#redux").eraser('reset');
event.preventDefault();
}

</script>

<p><a href="index.htm">Made with jQuery.eraser()</a></p>

<p>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="boblemarin">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=221981371170477&amp;href=http%3A%2F%2Fminimal.be%2Flab%2FjQuery.eraser%2Fteeth.htm&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:160px; height:21px;" allowTransparency="true"></iframe>
</p>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9528692-4");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>

</html>

0 comments on commit 101c98b

Please sign in to comment.