Як визначити силу натискання на пристрій.

У цій статті ми розглянемо бібліотеку, яка допоможе нам відслідковувати силу натискання на екран або тачпад пристрою користувача.

Як багато, напевно, знають, відносно недавно вийшов ноутбук від Apple, має тачпад, що підтримує ForceTouch - технологію, яка дозволяє відслідковувати силу натискання. Також вийшов новий iPhone, де використана технологія 3D Touch, яка робить те ж саме, але вже на сенсорному дисплеї пристрою. Технологія досить цікава, і в цій статті ми розглянемо Pressure - jаvascript бібліотеку, яка дозволить використовувати можливості цієї технології на сайтах.

Встановлення та налаштування

Скачайте потрібні файли на 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 як установку.

varPressure=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 
} 
}) -

Отже, на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі