Permalink
Browse files

added callback ability when a certain ratio is reacher.

  • Loading branch information...
1 parent bb30266 commit 101c98be3ca848229368374f1f6a9c297ea01569 @boblemarin boblemarin committed Jan 13, 2012
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,12 +1,12 @@
-jQuery.eraser
+#jQuery.eraser
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
using touch ou mouse moves.
-Check this :
+#Check this :
This plug-in works with image or canvas elements.
The images must be fully loaded before calling eraser().
@@ -24,7 +24,7 @@ addEventListener( "load", init, false );
-Usage :
+#Usage :
To transform an image or canvas into an erasable canvas, just use this syntax :
@@ -47,9 +47,16 @@ And you can erase all the canvas' content by calling :
$('#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
* http://minimal.be/lab/jQuery.eraser/
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
View
@@ -76,17 +76,18 @@
<h1>jQuery.eraser()</h1>
<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>
- <p><code>$("#myImage").eraser();</code></p>
+ <p><code id="percent">$("#myImage").eraser();</code></p>
<span class="container">
- <img id="robot" src="robot.jpg" />
- <img id="redux" src="robot_redux.png" />
+ <img id="robot" src="img/robot.jpg" />
+ <img id="redux" src="img/robot_redux.png" />
</span>
<p>
<a href="#" onclick="reset(event);" class="box"> RESET </a>
<a href="#" onclick="remove(event);" class="box"> CLEAR </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></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.eraser.js' type='text/javascript'></script>
View
Binary file not shown.
View
@@ -1,5 +1,5 @@
/*
-* jQuery.eraser
+* jQuery.eraser v0.2
* makes any image or canvas user-erasable
*
* Usage:
@@ -53,6 +53,11 @@
pos = $this.offset(),
$canvas = $("<canvas/>"),
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");
// replace target with canvas
@@ -67,7 +72,7 @@
// prepare context for drawing operations
ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = 'rgba(255,0,0,255)';
- ctx.lineWidth = ( options && options.size )?options.size:40;
+ ctx.lineWidth = size;
ctx.lineCap = "round";
// bind events
@@ -76,6 +81,9 @@
$canvas.bind('touchmove.eraser', methods.touchMove);
$canvas.bind('touchend.eraser', methods.touchEnd);
+ // reset parts
+ while( n-- ) parts.push(1);
+
// store values
data = {
posX:pos.left,
@@ -90,7 +98,12 @@
ctx: ctx,
w:width,
h:height,
- source: this
+ source: this,
+ size: size,
+ parts: parts,
+ colParts: colParts,
+ numParts: numParts,
+ ratio: 0
};
$canvas.data('eraser', data);
@@ -108,11 +121,16 @@
data = $this.data('eraser');
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.touchID = t.identifier;
- data.touchX = t.pageX - data.posX;
- data.touchY = t.pageY - data.posY;
+ data.touchX = tx;
+ data.touchY = ty;
+ data.ratio += data.parts[p];
+ data.parts[p] = 0;
event.preventDefault();
}
},
@@ -125,10 +143,13 @@
n = ta.length;
while( n-- )
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.moveTo( data.touchX, data.touchY );
- data.touchX = ta[n].pageX - data.posX;
- data.touchY = ta[n].pageY - data.posY;
+ data.touchX = tx;
+ data.touchY = ty;
data.ctx.lineTo( data.touchX, data.touchY );
data.ctx.stroke();
event.preventDefault();
@@ -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 ) {
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.touchX = event.pageX - data.posX;
- data.touchY = event.pageY - data.posY;
+ data.touchX = tx;
+ data.touchY = ty;
data.ctx.beginPath();
data.ctx.moveTo( data.touchX-1, data.touchY );
data.ctx.lineTo( data.touchX, data.touchY );
@@ -171,12 +203,14 @@
mouseMove: function( event ) {
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.moveTo( data.touchX, data.touchY );
- data.touchX = event.pageX - data.posX;
- data.touchY = event.pageY - data.posY;
+ data.touchX = tx;
+ data.touchY = ty;
data.ctx.lineTo( data.touchX, data.touchY );
data.ctx.stroke();
event.preventDefault();
@@ -198,6 +232,9 @@
if ( data )
{
data.ctx.clearRect( 0, 0, data.w, data.h );
+ var n = data.numParts;
+ while( n-- ) data.parts[n] = 0;
+ data.ratio = data.numParts;
}
},
@@ -209,6 +246,9 @@
data.ctx.globalCompositeOperation = "source-over";
data.ctx.drawImage( data.source, 0, 0 );
data.ctx.globalCompositeOperation = "destination-out";
+ var n = data.numParts;
+ while( n-- ) data.parts[n] = 1;
+ data.ratio = 0;
}
}
@@ -220,7 +260,7 @@
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
- $.error( 'Method ' + method + ' does not exist on jQuery.eraser' );
+ $.error( 'Method ' + method + ' does not yet exist on jQuery.eraser' );
}
};
})( jQuery );
View
@@ -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.