Возможно вас это заинтересует

Интересный плагин который создает эффект стирательной резинки.

Для работы плагина нужно использовать 2 изображения одинакового размера, вторая картинка будет преобразована в canvas слой который можно стереть зажатой мышкой или касанием стилуса на сенсорных экранах. Так же есть возможность регулировать размер ластика и вызывать обратные функции например когда 50% слоя было стерто.

Использование

Для преобразования изображения в стираемый слой используем следующую функцию плагина:

1
$('#yourImage').eraser();

Что бы изменить размер кисти используем свойство(по умолчанию 40):

1
2
3
$('#yourImage').eraser( { size: 30 } );
// так же можно изменить размер кисти в любой момент:
// $('#yourImage').eraser( "size", 50 } );

Следующий код возвращает изображение в исходное состояние:

1
$('#yourImage').eraser('reset');

Можно быстро стереть весь слой функцией:

1
$('#yourImage').eraser('clear');

А следующий код вызывает пользовательскую функцию при условии что слой стерт на 50% и больше:

1
2
3
4
$('#yourImage').eraser( {
    completeRatio: .5,
    completeFunction: showResetButton
});

Возможно вас это заинтересует
comments powered by HyperComments