About jquery.eraser.js


(wangwz) #1

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) #2

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


(wangwz) #3

thank you very much!


#4

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


(Freelancer) #5

It works anso on android devices .
tested today :smile:


(drewbullen) #6

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)


Help creating a scratch card simulation
Помогите с взаимодействием руки и телефона
(wangwz) #7

it‘s amazing!thankyou


#8

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


#9

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


(Lucky) #10

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


(wangwz) #11

thans!Can I change the circle to another shape?


(drewbullen) #12

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)


Tips and Tricks of the Month