About jquery.eraser.js

woat1314 · August 13, 2015, 1:26am

Sorry, I am a beginner in JS, I have encountered problems in using jquery.eraser.js, the image can not be erased, please help me

eraser.zip (508.0 KB)

drewbullen · August 13, 2015, 4:11am

Hype does not export canvas elements (which jQuery.eraser.js uses) so I think you need to find an alternative method.

Others here have had some success with: http://codecanyon.net/item/html5-scratch-card/8721110

woat1314 · August 13, 2015, 4:36am

thank you very much！

Olav · August 13, 2015, 7:36am

You might also wanna check this thread: Help creating a scratch card simulation

michelangelo · August 13, 2015, 6:52pm

It works anso on android devices .
tested today

drewbullen · August 20, 2015, 1:04am

Here is a demo file that demonstrates how the eraser.js effect can be achieved in two ways: SVG interactivity or natively in Hype with one line of javascript.

Neither of these methods require jQuery or any external libraries but the SVG method requires that you insert the SVG code “inline” (i.e. directly into a blank Hype element).

The pixel size can be varied to suit your own taste.

AutoRevealDemo.hype.zip (31.8 KB)

woat1314 · August 20, 2015, 3:21am

it‘s amazing！thankyou

DBear · August 20, 2015, 12:31pm

Hi Drew,

Great idea!!

unfortunately SVG isn’t working on Safari (latest 8.0.7) and no mobile support but good use of Hype

D

Olav · August 20, 2015, 12:48pm

Ok, so that was Safari why it didn’t work for me. Good to know.
But the single line Hype-alone option is great.

Luckyde · August 20, 2015, 10:13pm

Try using my scratch card script and see if it helps
scratchcard_v2.zip (354.2 KB)

woat1314 · August 21, 2015, 5:13am

thans！Can I change the circle to another shape？

drewbullen · August 22, 2015, 2:00am

I have refactored the SVG code so that it works on Safari now (and all other browsers I tested).

I am still working on how to use either of these methods on touch devices.

AutoRevealDemoImproved.hype.zip (31.7 KB)