Как реализовать такой функционал?

Question

[Дмитрий Локшин]

Друзья, привет!

Сделал вот такую штуку: https://jsfiddle.net/lokdmt/cjj6b5x7/13/

В данный момент грязь стирать можно мышью, а на touch устройствах пальцем. Также можно передвигать губку. Должно же работать все таким образом, что пользователь хватает губку и начинает стирать ей.
Уже мозг себе поломал, но не могу связать два эти элемента.
Предполагаю, что получаю координаты мыши, также при хватании губки начинаю передавать движение губке и маске. Но это только в голове у меня, а реализовать не получается.

Заранее спасибо большое!

Comments

[DTX]

Предполагаю, что получаю координаты мыши, также при хватании губки начинаю передавать движение губке и маске. Но это только в голове у меня, а реализовать не получается.

И в каком месте возникают проблемы?

[Дмитрий Локшин]

Вот в этом месте и возникают) Не пойму, как eraser'у вместо координат мыши передать координаты губки и стирать именно ей.
Вот тут https://jsfiddle.net/lokdmt/cjj6b5x7/13/ уже вывел все события мыши, разобрал весь плагин eraser.
Так-то обычно все получается сделать, но с этой задачей я уже несколько дней потерял.

[DTX]

Разобрали весь eraser и всё равно нет?)
Там же даже примеры сверху есть. Передавать нужно события mouseUp, mouseMove, mouseDown. Передача происходит следующим методом:
$('#image').eraser( 'mouseDown', параметр1, параметр2 и тд);
Параметр там один - event.

[Дмитрий Локшин]

DTX: Да, спасибо. Я уже сделал всё как надо.

Answer 1

[Кирилл]

Решал через костыль, если ничего другого не предложат, то может будет полезно:
https://jsfiddle.net/ayLr7zkx/

При наведении на определенный блок прячем губку и заменяем курсор на картинку губки. В моем коде курсор заменяется в стилях в самом низу, но не работает видимо из-за абсолютного пути к картинке. Локально при относительном урле у меня всё работает.

Comments

[Дмитрий Локшин]

Спасибо большое Вам за ответ и за потраченное время, но такое, к сожалению, не подходит, т.к. сразу это предлагал клиенту. Да и на touch устройствах таким способом не заработает.

[Виктор Л]

Ну а если сразу просто поменять курсор?

cursor: url("https://image.ibb.co/kbkBLv/heart.png"), auto;

тынц

[Дмитрий Локшин]

Виктор: Я б с радостью, только уже писал, что клиента это не устраивает. Может даже и к лучшему, что никто не помог - перебрал каждую строчку в коде и в итоге сделал как надо, в итоге и душевная радость и опыт в копилку=)

[Виктор Л]

Дмитрий Локшин: Показывай мы тоже порадуемся :)