Как определить силу нажатия на устройство.
В этой статье мы рассмотрим библиотеку, которая поможет нам отслеживать силу нажатия на экран или тачпад устройства пользователя.
Как многие, наверное, знают, относительно недавно вышел ноутбук от Apple, имеющий тачпад, поддерживающий ForceTouch – технологию, которая позволяет отслеживать силу нажатия. Также вышел новый iPhone, где использована технология 3D Touch, которая делает то же самое, но уже на сенсорном дисплее устройства. Технология достаточно интересная, и в этой статье мы рассмотрим Pressure – javascript библиотеку, которая позволит использовать возможности этой технологии на сайтах.
Установка и настройка
Скачайте нужные файлы на GitHub, либо используйте npm или bower:
npm install pressure --save // npm
bower install pressure --save // bower
Используйте pressure в глобальной области видимости:
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
Или с browserify или CommonJS как установку.
var Pressure = require('pressure');
Pressure.set('#id-name', {
change: function(force){
this.innerHTML = force;
}
});
Использование
Заметьте, что ключевое слово this в каждом методе обратного вызова будет самостоятельным элементом, к которому применена сила.
Pressure.set('#element', {
start: function(){
// this вызван в начале
},
end: function(){
// this вызван в конце
},
startDeepPress: function(){
// this вызван на "сильное нажатие" / "глубокое нажатие", когда сила больше 0.5
},
endDeepPress: function(){
// this вызван в конце "сильного нажатия" / "глубокого нажатия"
},
change: function(force, event){
// this вызывается каждый раз, когда происходит изменение силы нажатия
// значение силы будет всегда в диапазоне от 0 до 1 на мобильных и настольных устройствах
},
unsupported: function(){
// this вызывается однажды, когда произведено нажатие на экран, но устройство или браузер не поддерживает технологию ForceTouch / 3D Touch
}
});
Итак, на этом все. Спасибо за внимание!
-
Создано 26.01.2016 22:42:02
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.