Erase/rubber Tool

36 views
Skip to first unread message

Ismael Gómez

unread,
Mar 15, 2021, 8:01:49 PMMar 15
to Paper.js
hi, how i can do a erase/rubber tool?, not only delete path, i want to do a rubber  tool like photoshop, it's possible? thanks for any help for all.
i don't know how begin. thanks

asensi...@gmail.com

unread,
Mar 16, 2021, 1:38:17 AMMar 16
to Paper.js
Hi,

you can play with blend modes, and especially destination-out which can be usefull in your case. Here is a simple sketch demonstrating the idea.

let path;

function onMouseDrag(event) {
    if (!path) {
        path = new Path({
            strokeColor: 'black',
            strokeWidth: 20,
            blendMode: event.modifiers.shift ? 'destination-out' : 'normal'
        });
    }
    path.add(event.point);
}

function onMouseUp() {
    path = null;
}


Ismael Gómez

unread,
Mar 16, 2021, 6:18:08 AMMar 16
to Paper.js
Thanks for your fast reply.

Ismael Gómez

unread,
Mar 16, 2021, 8:38:06 PMMar 16
to Paper.js
when I use destination-out , blendmode of the path, when export the canvas to svg document the path in blendmode destination-out  show in color of the strokeColor, not erase the original path, i would say when export the canvas in a document svg, the path in blendmode shows as a normal blendmode.
I use this  exportSVG([options]) asstring = true, can i help me?


i can see this style="mix-blend-mode: destination-out"/> inside of document svg

but when i load the document in edge browser or chrome browser i see the destination-out blendmode paths in normal blendmode



can you  send me a sample lo load the document svg with importSVG whith this importSVG(svg[, options])

thanks another time...

Ismael Gómez

unread,
Mar 18, 2021, 5:22:30 AMMar 18
to Paper.js

hi can you help me? thanks

Ismael Gómez

unread,
Mar 22, 2021, 10:15:57 AMMar 22
to Paper.js
Finally, i use this


and works more or less, thanks
Reply all
Reply to author
Forward
0 new messages