≡×ՄԵՆՈՒ

• Windows 10
• Ինտերնետ, WiFi
• Օգտակար
• Windows 7
• Սխալներ

Ոլորել էջը՝ ձեր մատը էկրանի վրա շարժելով: Ինչ է ժեստուրան, հպում, հպում, սահում, սահում, սահում, սեղմում, ձգում, պտտում՝ սմարթֆոնի և iPhone-ի համար: Ժեստեր երկու մատներով

Android սարքերը օգտագործում են սենսորային էկրան: Օգտատերերի համար, ովքեր սովոր են կոճակով կառավարել, կարող է դժվար լինել սենսորային էկրանով աշխատելու անցնելը:

Կոճակի կառավարումն օգտագործում է ստեղնաշար և մկնիկ, մինչդեռ սենսորային էկրանով կառավարումն իրականացվում է մատների կամ ստիլուսի միջոցով:

Մի կողմից, ժեստերի վերահսկումը մի փոքր պարզունակ է թվում: Մյուս կողմից, Android-ի ժեստերը նոր հորիզոններ են բացում տարբեր ծրագրերի համար, որոնք շատ դժվար կամ անհնար կլիներ իրականացնել կոճակային տարբերակով:

Սենսորային էկրանի կառավարումն այն է, որ այն արձագանքում է մատների կամ ստիլուսի հպմանը և, անհրաժեշտության դեպքում, կրկնում է հենց այս շարժումները: Եթե ​​սարքը ճանաչում է հպումները կամ շարժումները որպես հրամաններ, ապա դրանք կատարվում են ճիշտ որպես հրամաններ: Օգտատիրոջ խնդիրը պարզ է՝ տիրապետել սենսորային էկրանին սեղմելուն, որպեսզի դրանք հանգեցնեն այն հրամանների կատարմանը, որոնք հասկանալի կլինեն սարքին և որոնք կարիք ունեն օգտատիրոջը:

Եկեք տեսնենք սենսորային էկրանների վրա օգտագործվող լավագույն յոթ տեխնիկան: Android-ի ժեստերը կարող են լինել հետևյալը.

1. Հպեք (սեղմեք)

Հպումը (կամ թակելը) հիմնական գործողությունն է, որն առավել հաճախ օգտագործվում է սենսորային էկրանին:

Հպումը անհրաժեշտ է շատ դեպքերում.

• հնարավորությունները միացնելու համար,
• գործարկել ցանկացած հավելված,
• այս կամ այն ​​պարամետրի, տարրի ակտիվացում,
• ցանկից ընտրելու ցանկալի պատկերակը կամ համապատասխան տարբերակը,
• տեքստ մուտքագրելու համար
• և այլն:

Հպումը պարզ է. Բավականին հեշտ է դիպչել ձեր մատով կամ գրիչով էկրանի պահանջվող տեղում, օրինակ՝ դիպչել ցանկալի հավելվածի պատկերակին:

Տեքստ մուտքագրելու համար պարզապես հպեք ցանկալի դաշտին, ինքնաբերաբար կհայտնվի վիրտուալ ստեղնաշար, կարող եք մուտքագրել տեքստ՝ հպելով ցանկալի նիշերով ստեղներին։

Ակամա հիշում եմ, թե քանի տարի առաջ գնացի տերմինալ, սեղմեցի տերմինալի կոճակները, որ փող դնեմ. Բջջային հեռախոս. Ընդհանուր առմամբ, ես ամեն ինչ արեցի սովորականի պես, բայց տերմինալում ոչինչ տեղի չունեցավ, տերմինալը չէր արձագանքում կոճակներին: Այսպիսով, ես տարբեր օրերի տերմինալին 3 կամ 4 մոտեցում արեցի զրոյական արդյունքով: Մի լավ օր մի երիտասարդ, ով իմ հետևում կանգնած էր տերմինալի մոտ, ասաց. «Իսկ եթե մատդ սեղմես էկրանին»: Եվ ահա երջանկությունը. ես սեղմեցի մատս էկրանին, և տերմինալը սկսեց արձագանքել սեղմմանը, ամեն ինչ ստացվեց: Այսպիսով, ես առաջին անգամ հանդիպեցի սենսորային էկրանով:

2. Կրկնակի հպեք

Կրկնակի հպումը (կամ կրկնակի հպումը) օգտագործվում է արագ խոշորացնելու, որոշ հավելվածներ և այլ գործողություններ գործարկելու համար:

Սանդղակը փոխելու համար, օրինակ, վեբ էջ դիտելիս անհրաժեշտ է նվազագույն ընդմիջումով 2 անգամ արագ հպել էկրանին: Նախկին վիճակին վերադառնալու համար կրկին պետք է կրկնակի հպեք էկրանին:

Մեկ կրկնակի հպումը միացնում է համապատասխան տարբերակը, երկրորդ կրկնակի հպումը չեղարկում է նույն տարբերակը:

Եթե ​​Android-ը համեմատում եք Windows-ի հետ, ապա Android-ում կրկնակի հպումը որոշ չափով նման է Windows-ի ձախ կոճակի կրկնակի սեղմմանը:

3. Հպեք և պահեք

Պահելու միջոցով սեղմելը (դիպչելը) օգտագործվում է լրացուցիչ ընտրանքներ բացելու համար, եթե այդպիսիք կան:

Դուք պետք է դիպչեք էկրանի ցանկալի հատվածին և պահեք ձեր մատը մի քանի վայրկյան: Հպվելու և պահելու պահին ոչինչ չի պատահում, և դա սկզբում կարող է ինչ-որ չափով զարմանալի լինել։ Բայց հենց մատդ բաց ես թողնում, անմիջապես կհայտնվի լրացուցիչ ընտրացանկ կամ հպում-պահելու արդյունքում կկատարվի մեկ այլ գործողություն:

Այս գործողությունը շատ նման է Windows-ում աջ սեղմելուն, երբ օբյեկտի վրա աջ սեղմելուց հետո հայտնվում է այսպես կոչված համատեքստային մենյու՝ օբյեկտի համար լրացուցիչ ընտրանքներով։

4. Սահեցրեք (սահեցրեք)

Սահը կարելի է անվանել նաև սահելը կամ ոլորելը: Թեթև դիպչելով էկրանին, առանց մատը բաց թողնելու, սահեցրեք ձեր մատը վերևից ներքև, ներքևից վերև, ձախից աջ կամ աջից ձախ, այսինքն՝ կարծես թեթևակի մաքրեք «էկրանից փոշին»: ճիշտ ուղղությամբ:

Սահահարվածը (սահեցնելը) օգտագործվում է աշխատասեղանի էջերի միջև անցնելու, տարբեր ցուցակների միջով ոլորելու համար և այլն: Կախված Android-ի կողպէկրանի կարգավորումից, կարող է լինել, որ անկյունագծով (անկյունագծով) սահեցնելը նշանակում է էկրանի ապակողպում. այս սահեցումը նույնպես կիրառվում է, և ոչ միայն ներքևից վերև կամ աջից ձախ սահեցնելը:

Երբ առաջին անգամ անհրաժեշտ եղավ իմ սմարթֆոնով ռուսերեն հաղորդագրություն ուղարկել, դրա համար ես ստիպված էի վիրտուալ ստեղնաշարի դասավորությունը անգլերենից ռուսերեն փոխել: Ես փորձեցի բոլոր տարբերակները, նույնիսկ մտա լեզվի կարգավորումներ, դա ոչ մի կերպ չստացվեց. Ինձ ասացին, որ ես պարզապես պետք է թեթևակի թափահարեմ մատս ձախից աջ տարածության վրա: Ի դեպ, վիրտուալ ստեղնաշարի «Space» տողի վրա «անգլերեն» մակագրությունը տեսա, սեղմեցի, բայց ապարդյուն։ Եվ հենց որ նա մատը թափահարեց տարածության վրա, դասավորությունը անմիջապես փոխվեց ռուսերենի։ Այստեղ այն սահում է, այն աշխատում է:

5. Քաշել և թողնել (քաշել և թողնել)

Քարշելը (կամ քաշելը) պահանջվում է հավելվածները էկրանի վրա տեղափոխելու, ինչպես նաև թղթապանակներ, պատկերակներ և այլն տեղափոխելու համար:

Անհրաժեշտ է դիպչել պահանջվող տարրին, սպասել, որ այն ընտրվի, ապա առանց մատը բաց թողնելու, տեղափոխել այս տարրը (թղթապանակ, ֆայլ, պատկերակ և այլն) սենսորային էկրանի ցանկալի կետը։

6. Մատներ բերելը և տարածելը

Պարզ և օգտակար գործառույթ՝ էկրանին ցուցադրվողի մասշտաբները փոխելու համար՝ նկար, տեքստ, քարտեզ, դիագրամ և այլն: Անհրաժեշտության դեպքում կարող եք կրկին մեծացնել և փոքրացնել:

Դա անելու համար հարկավոր է միանգամից երկու մատով (կամ մի քանի) դիպչել էկրանին և առանց մատները էկրանից հեռացնելու, դրանք իրարից բաժանել։ Սանդղակը համամասնորեն կավելանա.

Եթե ​​երկու մատով (կամ մի քանի) դիպչեք էկրանին և առանց դրանք էկրանից հանելու, միացնեք, ապա մասշտաբը կնվազի։

7. Փոխել էկրանի կողմնորոշումը

Դիմանկարային (ուղղահայաց) կողմնորոշումը հարմար է գրքեր կարդալու համար։ Լանդշաֆտային (հորիզոնական) կողմնորոշումը լավ է տեսանյութեր և տարբեր քարտեզներ դիտելու համար: Այս ամենը, իհարկե, բոլորի համար չէ, ամեն մեկն ինքն է ընտրում, թե այս կամ այն ​​դեպքում որ կողմնորոշումն է ավելի լավ։

Կողմնորոշումը մեկից մյուսը փոխելու համար պարզապես անհրաժեշտ է շրջել սմարթֆոնը: Այս դեպքում էկրանի պարամետրերում պետք է ակտիվացվի Էկրանի պտտման գործառույթը: Եթե ​​ֆունկցիան անջատված է, ապա պատկերը չի պտտվի:

Սրանք բոլոր հնարավոր ժեստերի տարբերակները չեն, բայց, թերևս, ամենահիմնական և հաճախ օգտագործվող տարբերակները: Այլ ժեստեր, ինչպիսիք են շրջանագծի մեջ շրջվելը և այլն: օգտագործվում են ավելի քիչ հաճախ, և այդ ժեստերը կարող են չաշխատել յուրաքանչյուր ծրագրում: Որպես կանոն, թվարկված ժեստերը բավարար են բոլոր առիթների կամ գրեթե ամեն ինչի համար։

Դրանք յուրացվում են հեշտությամբ և արագ, բայց նախ պետք է մի փոքր պարապել։ Ժեստերը տրամաբանորեն պարզ են, դուք հենց այս գործողությունն եք ակնկալում նրանցից։ Արդյո՞ք այդ հպումը պահելու միջոցով է, դա մի փոքր անբնական է: Մնացած ժեստերը ինտուիտիվ են: Դրա համար էլ հեշտ է հիշել:

P.S. Դիտեք այլ բովանդակություն.

Ստացեք համակարգչային գրագիտության արդի հոդվածներ անմիջապես ձեր մուտքի արկղում:
Արդեն ավելի քան 3000 բաժանորդ

.

Սիրելի ընկերներ, ովքեր սկսում են տիրապետել սմարթֆոնին:

Եթե ​​սովորական կոճակով բջջային հեռախոսից անցել եք սենսորային էկրանով սմարթֆոնի (սենսորային էկրան), ապա ձեզնից ոմանք սկզբում դժվարանում են տիրապետել սենսորային էկրանին: Ձեզ համար այնքան էլ պարզ չէ, թե ինչպես կարելի է դիպչել էկրանին, որքան ժամանակ պահել հպումը, ինչպես նավարկել էջը և այլն։ Այս հոդվածում ես կփորձեմ համառոտ նկարագրել սմարթֆոնների կառավարման հիմնական առանձնահատկությունները:

Անմիջապես պետք է ասեմ, որ մեխանիկական կոճակներից վիրտուալին անցնելը հսկայական առաջընթաց է շարժական սարքերի զարգացման գործում։ Այն թույլ է տալիս մեծացնել էկրանի մակերեսը սմարթֆոնի գրեթե ողջ առջևի մակերեսին և հեշտացնել այն կառավարելը։ Բայց միևնույն ժամանակ սկզբում որոշակի անհարմարություններ են ի հայտ գալիս։ Սովորական հեռախոսդուք կարող եք վերցնել այն ձեր ձեռքում, ինչպես ցանկանում եք և դիպչել առջևի վահանակի և էկրանի ցանկացած մասի: Սմարթֆոնների դեպքում պետք է ավելի զգույշ լինել, քանի որ ցանկացած պատահական հպում էկրանի մակերեսին կարող է անցանկալի գործողություն առաջացնել։ Պետք է զարգացնել սմարթֆոնը ձեռքում առանց էկրանին անհարկի դիպչելու սովորություն, գոնե այն ապակողպված վիճակում։

Այսպիսով, ահա սենսորային էկրանի հիմնական հսկիչները.

Մեկ հպում (հպում)

Սա արագ (գրեթե առանց ուշացման) հպում է էկրանին մեկ մատով: Հետաձգումը չպետք է գերազանցի 0,5 վայրկյանը: Ցանկացած հպում բավական հեշտ է անել, քանի որ այսօրվա կոնդենսիվ սենսորային էկրանները շատ զգայուն են (ի տարբերություն դիմադրողականների, որոնք անցել են ճանապարհին):

Հիմնական էկրանին (և ցանկացած աշխատասեղանի էկրանին) հավելվածի պատկերակի վրա մեկ հպումով գործարկվում է հավելվածը: Սա նման է սովորական համակարգչի վրա մկնիկի ձախ կոճակը սեղմելուն: Այլ դեպքերում, հավելվածի ներսում, դա կարող է լինել մի քանի տարբերակներից ընտրություն, կոնտակտների ցանկում կոնտակտի ընտրություն, գործողության հաստատում և այլն:

Տեքստային դաշտերում մեկ հպումով կուրսորը տեղադրվում է հպված վայրում:

Երկար հպում

Սա մեկ մատով հպում է 1 վայրկյանից ավելի ուշացումով (մինչև արդյունքի հայտնվելը): Արդյունքը կարող է տարբեր լինել՝ կախված իրավիճակից։ Շատ դեպքերում այս գործողությունը հանգեցնում է համատեքստի մենյուի (նման աջ կոճակմկներ):

Հիմնական էկրանին պատկերակի հետաձգված հպումը հանգեցնում է այս պատկերակի մատին «կպչելուն», ինչը հնարավորություն է տալիս այն տեղափոխել էկրանի շուրջը, ներառյալ հարակից հիմնական էկրանին, ինչպես նաև ջնջել պատկերակը (ոչ թե հավելվածը: ) էկրանին երևացող զամբյուղին:

Տեքստային դաշտերում ուշացումը հանգեցնում է մատի տակ գտնվող տեքստի ընտրությանը՝ ստացված վերջի նշաններով ընտրությունը հետագայում ընդլայնելու հնարավորությամբ, միևնույն ժամանակ հայտնվում է ընտրացանկը։ Պատճենել, ընտրել բոլորը, կտրել, տեղադրել. Կուրսորի պիտակի վրա կանգ առնելը հանգեցնում է ցանկի հայտնվելուն Ներդիր(վերջին clipboard բովանդակությունը), Կպցնել սեղմատախտակից(վերջին 20 clipboard բովանդակությունից որևէ մեկը):

Կրկնակի հպում (կրկնակի հպում)

Կրկնակի հպեք մեկ մատով` հպումների միջև կարճ ընդմիջումով (ոչ ավելի, քան 0,2 վրկ): Օգտագործվում է զննարկիչում վեբ էջը, պատկերասրահում պատկերը և այլն մեծացնելու և փոքրացնելու համար: Դուք պետք է սեղմեք հենց էկրանի այն տարածքի վրա, որը ցանկանում եք դիտել ավելի մեծ և ավելի մանրամասն:

Հպեք շարժումով (հպեք և քաշեք)

Սա մեկ մատով հպում է՝ մատն էկրանով առանց մատը բաց թողնելու ակնթարթային (0,2 վայրկյանից ոչ ավելի ուշացումով) հպումով: Շարժման մեկնարկից հետո մեկ վայրում հետագա ուշացումը դեր չի խաղում. էկրանի պարունակությունը կարծես կպչում է մատին, մինչև այն ազատ արձակվի: Այսպես եք պտտվում աշխատասեղանների (էկրանների), բրաուզերի էջերի միջով ցանկացած ուղղությամբ, ոլորել ցուցակների միջով (օրինակ՝ կոնտակտներ) և այլն։ Այս ժեստը նաև ծառայում է տարբեր վիրտուալ կառավարիչների (օրինակ՝ ծավալը, պայծառությունը և այլն) սահիկները տեղափոխելու համար։

Սահեցրեք

Մեկ մատով այս գործողությունը նման է նախորդին, բայց այն արվում է առանց էկրանի շուրջ երկար շարժվելու՝ հիշեցնելով թղթի վրա վրձնի արագ հարվածը։ Միևնույն ժամանակ, էկրանի բովանդակությունը շարունակում է շարժվել նույնիսկ այն բանից հետո, երբ ձեր մատը էկրանից հանելուց հետո «հարվածի» գործընթացում աստիճանաբար դանդաղում է: Հիշում եմ, որ Սթիվ Ջոբսի այս էֆեկտի առաջին ցուցադրման տեսանյութը 2007 թվականին Apple iPhone 2G-ի թողարկման ժամանակ արժանացավ բուռն ծափահարությունների:

Այժմ դիտարկենք երկու մատով հպման տեխնիկան: Այս դեպքում մատները կարող են լինել մի ձեռքի վրա կամ տարբեր, դա նշանակություն չունի։

Երկու մատների կոնվերգենցիա (կծկել) և բազմացում (կտրուկ, խոշորացում)

Այս տեխնիկան օգտագործվում է սահուն կերպով նվազեցնելու և, համապատասխանաբար, էկրանին պատկերի մասշտաբը մեծացնելու համար (նկարներ, վեբ էջեր): Դուք երկու մատները դնում եք էկրանին գրեթե միաժամանակ, այնուհետև շարժում եք անում՝ ձեր մատներն իրար մոտեցնելու (կմչելու) կամ դրանք իրարից բաժանելու համար: Մատների շարժման ուղղությունը (աջ-ձախ, վերև-ներքև կամ միջանկյալ շարժումներ) դեր չի խաղում։

Պտտում երկու մատով (պտտել)

Սա ևս մեկ տեխնիկա է, որն օգտագործվում է էկրանին պատկերը պտտելու համար: Էկրանին հպվելուց հետո երկու մատները շարժվում են շրջանաձև աղեղով նույն ուղղությամբ (ժամացույցի սլաքի ուղղությամբ կամ հակառակ ուղղությամբ): Կամ մի մատը կանգնած է անշարժ պտտման կենտրոնում, իսկ մյուսը շարժվում է այս կենտրոնի շուրջը աղեղով: Այս մեթոդը հազվադեպ է օգտագործվում: Օրինակ, ես այն օգտագործել եմ MDScan հավելվածում պատկեր խմբագրելիս՝ փաստաթղթերի սկանավորված պատճեններ ստանալու համար:

Իմացեք նոր տերմինների իմաստը: Ստուգեք արագ բառարան iPhone-ների, սմարթֆոնների և պլանշետների սեփականատերերի համար:

Բոլորը գիտեն.

Սեղմեք (սեղմեք) - սեղմեք մկնիկի կոճակի վրա, կարճ սեղմեք:

Կրկնակի սեղմում, կրկնակի սեղմում (կրկնակի սեղմում) - երկու արագ սեղմում մկնիկի կոճակի վրա:

Ինտերֆեյսն այն է, թե ինչպես է սարքը կամ հավելվածը «շփվում» ձեզ հետ:

Ոլորել - ոլորել էկրանը:

Սքրինշոթ - էկրանի պատկեր («լուսանկար»):

Շատերին հայտնի է.

Քաշել և թողնել, քաշել և թողնել (քաշել և թողնել) - «քաշել և թողնել» - սեղմել մի տեղ, այնուհետև տեղափոխել և բաց թողնել մեկ այլ վայրում:

Ժեստեր, ժեստեր (ժեստեր) - մկնիկի, մատի կամ այլ ցուցիչ սարքի շարժման տարբեր ձևեր: Կարող է ծրագրավորվել որոշակի գործողություններ կատարելու համար: Օրինակ՝ մատը վերևից ներքև շարժելով էկրանին շարժական սարքըվերաբեռնում է էջը:

Touchpad, touchpad (touch pad) - դաշտ նոութբուքի ստեղնաշարի վրա մատներով սեղմելու և ժեստերի համար:

Սենսորային էկրան (սենսորային էկրան) - սենսորային էկրան. ընկալում է մատի ճնշումը: Օրինակ՝ պլանշետի կամ բանկոմատի էկրան։

Պարզ շարժումներ հպման սարքերի համար.

Հպեք, թակեք (հպեք) - կարճ սեղմում մատով, որը նման է սեղմման:

Կրկնակի հպում, Կրկնակի հպում, կրկնակի հպում (կրկնակի հպում) - երկու կարճ սեղմում ձեր մատով, կրկնակի սեղմման նման:

Երկար հպում, հպում (հպում) - սեղմելով ավելի երկար, քան «Թակել»:

Հպեք և պահեք (հպեք և պահեք) - սեղմեք և պահեք:

Նոր շարժումներ սենսորային սարքերի համար.

Flick (flick) - էկրանի վրա թեք կտտացրեք էկրանի պատկերի ապագա շարժման ուղղությամբ, շարժումից հետո պատկերը շարունակում է շարժվել իներցիայով:

Swipe (swipe), Slide (slide) - մատի երկար սահում էկրանի վրայով:

Pinch (pinch) - պտղունց, սեղմելով երկու մատների շարժումը միաժամանակ էկրանի վրա, պատկերը նվազեցնելու համար:

Spread / Spread (spread), Stretch (stretch: Microsoft-ի համար), Pinch-it-open (pinch it open: Apple-ի համար) - երկու մատներով միաժամանակ ձգվող շարժումներ էկրանի վրա՝ պատկերը մեծացնելու համար:

Pan, pan (pan) - մատի դանդաղ շարժում էկրանով շարժվելու և ընդլայնված նկարին նայելու համար:

Եթե ​​ինչ-որ կարևոր բան բացակայում է կամ համաձայն չեք ձևակերպման հետ, գրեք մեզ՝ այս հասցեն Էլպաշտպանված է սպամ-բոթերից: Դիտելու համար պետք է միացված լինի JavaScript-ը:

Android-ի և iPhone-ի համար iPad-ով (IOS) հավելվածներ մշակելիս՝ օգտագործելով միայն վեբ տեխնոլոգիաները, վաղ թե ուշ յուրաքանչյուր ծրագրավորող բախվում է իր խաղում կամ հավելվածում բարդ բազմաշերտ գործողություններ իրականացնելու և օգտագործելու խնդրին, ինչպիսիք են՝ սահելը, սեղմելը, ինչպես նաև մշակումը: երկար թակել (երկար հպում մեկ մատով առանց շարժվելու) և քաշել «n» կաթիլը:

Այս հոդվածում մենք կդիտարկենք Javascript-ի իրադարձությունների վրա տարբեր բարդության հպման իրադարձությունների մշակման ուղիները, առանց երրորդ կողմի գրադարանների (մենք պարզապես կվերցնենք jQuery րոպե):

Անմիջապես վերապահում կանեմ, որ կօգտագործեմ միայն jQuery՝ միջոցառման վրա բրաուզերի լռելյայն վարքագիծն անջատելու համար: Ինձ դուր չի գալիս այս գրադարանը, ուստի ամեն ինչ գրվելու է Vanilla JS-ով:

Այսպիսով, եկեք սկսենք տեսությունից և իրականում անդրադառնանք, թե ինչ իրադարձություններ պետք է օգտագործվեն հավելված կամ խաղ ստեղծելիս:

Ընդհանուր առմամբ, օգտագործվում են 3 հիմնական իրադարձություն.

touchstart - Հպվել է էկրանին

touchend - Մատը հանվեց

touchmove - Տեղափոխեք ձեր մատը

Եթե ​​այն տարրը ստանալու համար, որով մկնիկը ներս է մտել կամ դուրս է եկել, բավական է զանգահարել event.target, ապա հպումային իրադարձությունների դեպքում ամեն ինչ այնքան էլ պարզ չէ:

Յուրաքանչյուր հպում պետք է նույնականացվի: Եվ դրա համար օգտագործվում են ցուցակներ.

հպումներ - Բոլոր մատները, որոնք ներկայումս շփվում են էկրանի հետ («դիպչել» են էկրանին)

targetTouches - մատների ցանկ, որոնք փոխազդում են տարրի հետ

changeTouches - մատների ցանկ, որոնք մասնակցում են ընթացիկ իրադարձությանը: Եթե, օրինակ, դա հուզիչ իրադարձություն է, ապա ցանկը կպարունակի հեռացված մատը (Նույնիսկ եթե մյուս 4 մատները դեռ էկրանին են):

Որպեսզի ավելի հեշտ լինի հասկանալ, ահա իրավիճակը.

Ես մեկ մատը դրեցի էկրանին և բոլոր 3 ցուցակներն ունեն մեկ տարր։

Ես դրեցի երկրորդ մատը և հիմա touchs-ն ունի 2 տարր, targetTouches-ը կունենա 2 տարր, եթե երկրորդ մատը դնեմ նույն HTML տարրի վրա, ինչ առաջինը, իսկ փոխված Touches-ն իր հերթին կունենա միայն երկրորդ մատը, քանի որ հենց նա է գործարկել: իրադարձություն.

Եթե ​​ես միաժամանակ 2 մատ դնեմ էկրանին, ապա changeTouches-ը կունենա 2 տարր (յուրաքանչյուր մատը):

Եթե ​​ես սկսեմ մատներս շարժել էկրանի վրայով, կփոխվի միայն փոփոխված հպումների ցանկը: Այն տարրերի քանակը, որոնք այն կպարունակի, հավասար կլինի շարժման մեջ ներգրավված մատների թվին (առնվազն 1):

Եթե ​​ես հանեմ իմ մատը, ապա ցուցակները հպվում են, targetTouches-ը մեկ տարր դատարկ կլինի, իսկ փոխված Touches-ը կպարունակի մատը, քանի որ այն գործարկել է իրադարձությունը (հպում)

Երբ ես հանում եմ վերջին մատը, ցուցակները հպվում են, targetTouches-ը ոչինչ չի պարունակի, իսկ changeTouches-ը տեղեկատվություն կունենա հենց այս մատի մասին:

Հիմա ժամանակն է պարզելու, թե կոնկրետ ինչ տեղեկատվություն կարող ենք ստանալ մատի մասին.

նույնացուցիչ - հպման եզակի ID

թիրախ - Օբյեկտն ինքնին, որին մենք շոշափել ենք

PageX,PageY - Էջի վրա հպեք կոորդինատներին

Դուք կարող եք դիտել եզակի ID-ն մեկ հպումով՝ զանգահարելով event.touches.identifier, իսկ IOS-ում, եթե չեմ սխալվում, պետք է դա անել event.originalEvent.touches.identifier.

Դե, այն, ինչ ես արդեն սովորեցրել եմ ձեզ, և այժմ ժամանակն է անցնել պրակտիկայի:

Նախքան սկսելը, կան մի քանի բաներ, որոնք դուք պետք է հասկանաք: Յուրաքանչյուր խաղում, հավելվածում, որը դուք կստեղծեք Android-ում և IOS-ում, դուք պետք է անջատեք WebView բաղադրիչի ստանդարտ արձագանքը իրադարձություններին: Դա անելու համար մենք միացրինք jQuery-ն (ես չկարողացա Pure JS-ում անել այն, ինչ անում են գործառույթները event.preventDefault()Եվ event.stopPropagation()).

Այսպիսով, դուք պետք է ձեր JS կոդում տեղադրեք հետևյալը.

event.preventDefault();
event.stopPropagation();

), կեղծ);

event.preventDefault();
event.stopPropagation();
/* Ահա ձեր իրադարձությունների մշակման կոդը */
), կեղծ);

event.preventDefault();
event.stopPropagation();
/* Ահա ձեր իրադարձությունների մշակման կոդը */
), կեղծ);

Դա պետք է արվի, քանի որ առանց դրա շատ սարքեր ունեն զգալի արգելակներ, խափանումներ և ցնցող անիմացիա:

Շեղված. Մենք շարունակում ենք.

Նկարագրենք էկրանի և տարրերի հետ հպման բոլոր հիմնական փոխազդեցությունները՝ ունենալով ձեռք բերված գիտելիքներ։

Հպեք

Այս իրադարձությունը կատարվում է պարզապես, երբ մենք մատով հպում ենք էկրանին և հեռացնում այն։

var myclick=event.targetTouches; /*ձեր կոդը*/
}
), կեղծ);

Օրինակ փոփոխականում myclickկպարունակի ձեր հպումը:

Երկար հպում

Չնայած հազվադեպ, կան իրավիճակներ, երբ բջջային հավելվածում կամ խաղում պետք է որսալ առարկայի երկար հպումը: Եկեք նայենք, թե ինչպես կարելի է Javascript-ի երկար հպում կատարել սենսորային էկրանների համար: բջջային սմարթֆոններԴե, իհարկե, պլանշետներ:

Իրականացում 1:

var ldelay;
var betw=();
document.addEventListener(«touchstart», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
ldelay=նոր ամսաթիվ();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
), կեղծ);
/*Բռնել մատի արձակումը*/
document.addEventListener(«touchend», ֆունկցիա(իրադարձություն) (
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)(
/*Ահա ձեր կոդը*/
}
), կեղծ);

Սա Long Tap-ի առաջին Javascript իրականացումն է: Տրամաբանությունը սա է. մենք բռնում ենք հպումը, չափում ենք այս իրադարձության ժամանակը, բռնում ենք արձակումը, չափում ենք արձակման ժամանակը, առաջին անգամը հանում ենք երկրորդից և ստուգում, թե արդյոք մատի դիրքը էկրանին փոխվել է։ Եթե ​​մատով նույն վայրում և ժամին անցել է ավելի քան 800 միլիվայրկյան, մենք կատարում ենք Long Tap գործողությունները:

Հիմա եկեք նայենք երկրորդ իրականացմանը մի փոքր այլ տրամաբանությամբ.

Իրականացում 2:

varlttimer;
document.addEventListener(«touchstart», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
), կեղծ);
document.addEventListener(«touchmove», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
clearTimeout (lttimer);
), կեղծ);
document.addEventListener(«touchend», ֆունկցիա(իրադարձություն) (
clearTimeout (lttimer);
), կեղծ);
գործառույթը longTouch()(/*ձեր կոդը*/)

Long Tap միջոցառման վերը նշված իրականացումը Javascript-ում ավելի ճիշտ է և առավել հաճախ օգտագործվում է բջջային հավելվածներում: Դրա հիմնական տարբերությունը նախորդ ներդրումից այն է, որ այն չի սպասում, որ մատն ազատվի, իսկ այն դեպքում, երբ մատը չի շարժվում, գործարկում է Long Tap միջոցառումը, որը դուք պետք է տեղադրեք longTouch ֆունկցիայի մեջ։ երկար հպում.

Սահեցրեք

Ժամանակն է խոսել սմարթֆոնի կամ պլանշետի էկրանին փեյջինգի մասին: Սահեցրեք - առաջին հերթին բավականին տարածված է շինարարության մեջ բջջային հավելվածներ, ուստի վաղ թե ուշ յուրաքանչյուր հավելված ստեղծող պետք է զբաղվի դրա հետ:

Եթե ​​դուք չեք ցանկանում անհանգստանալ և միայն բջջային հավելվածում անհրաժեշտ է «Swipe» գործառույթը, կարող եք կարդալ դրա մասին էջի ամենաներքևում:

Եթե ​​դուք հարդքոր ծրագրավորող եք, եկեք գնանք:

Իրականացում 1:

var սկզբնական կետ;
var finalPoint;
document.addEventListener(«touchstart», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
), կեղծ);
document.addEventListener(«touchend», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs (initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs (initialPoint.pageY - finalPoint.pageY);
եթե (xAbs > 20 || yAbs > 20) (
եթե (xAbs > yAbs) (
եթե (finalPoint.pageX< initialPoint.pageX){
/*ՍԱՀՄԱՆԱՑԵԼ ՁԱԽ*/)
ուրիշ (
/*Սահեցրե՛ք աջ*/)
}
ուրիշ (
եթե (finalPoint.pageY< initialPoint.pageY){
/*Սահեցրեք վերև*/)
ուրիշ (
/*Սահեցրեք ներքև*/)
}
}
), կեղծ);

Սա մեր առաջին Javascript swipe իրականացումն է: Այս իրականացման առանձնահատկությունն այն է, որ իրադարձությունը հաշվվում է որպես սահեցում, երբ բաց եք թողնում իրադարձության մեջ ներգրավված մատը: Այս սահեցումը կարող է օգտագործվել որոշ առաջադրանքներում: Մի մոռացեք այս և շատ այլ օրինակներում անջատել զննարկչի ստանդարտ պահվածքը հպման իրադարձությունների վրա (այս մասին գրել եմ վերևում), ես սովորաբար դրանք չեմ գրում տրված օրինակներում, բայց մի մոռացեք:

Եվ հիմա եկեք տեսնենք մեկ այլ՝ դասական իրականացում, երբ swipe-ը պետք է հաշվարկվի իրական ժամանակում, օրինակ՝ էջը շրջելիս.

var startPoint=();
var nowPoint;
var ldelay;
document.addEventListener(«touchstart», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
startPoint.x=event.changedTouches.pageX;
startPoint.y=event.changedTouches.pageY;
ldelay=նոր ամսաթիվ();
), կեղծ);
/*Մատով բռնիր շարժումը*/
document.addEventListener(«touchmove», ֆունկցիա(իրադարձություն) (
event.preventDefault();
event.stopPropagation();
var otk=();

otk.x=nowPoint.pageX-startPoint.x;
/*Տվյալների մշակում*/
/*Օրինակ*/
if(Math.abs(otk.x)>200)(
if(otk.x0)(/*Սահեցրեք աջ (ՀԱՋՈՐԴ ԷՋ)*/)
startPoint=(x:nowPoint.pageX,y:nowPoint.pageY);
}
), կեղծ);
/*Բռնել մատի արձակումը*/
document.addEventListener(«touchend», ֆունկցիա(իրադարձություն) (
var pdelay=new Date();
nowPoint=event.changedTouches;
var xAbs = Math.abs (startPoint.x - nowPoint.pageX);
var yAbs = Math.abs (startPoint.y - nowPoint.pageY);
եթե ((xAbs > 20 || yAbs > 20) && (pdelay.getTime()-ldelay.getTime()) yAbs) (
եթե (nowPoint.pageX< startPoint.x){/*СВАЙП ВЛЕВО*/}
else (/*Սահեցրեք աջ*/)
}
ուրիշ (
եթե (այժմPoint.pageY< startPoint.y){/*СВАЙП ВВЕРХ*/}
else (/*Սահեցրեք ներքև*/)
}
}
), կեղծ);

Այս մեթոդով մենք մի փոքր այլ ճանապարհ անցանք և մասամբ օգտագործեցինք առաջին իրականացման սկզբունքը։ Տրամաբանորեն սա մի փոքր ավելի բարդ սահեցում է: Այնտեղ, որտեղ /*Գործընթացի տվյալները*/ մեկնաբանվում է, դուք պետք է օգտագործեք սահեցրեք մատի կոորդինատները: Օրինակ, դա կարող է լինել էջը շրջելու անիմացիա, և որքան մատը ձախ է, այնքան էջը շրջվում է։ Օրինակ՝ մենք գտնվում ենք իրադարձության ունկնդիրի այդ հատվածում հպման շարժումհետևել է միայն x-կոորդինատը, y - պտուտակված է նույն ձևով: Փոփոխականի մեջ otk.xպահել մատի ներկայիս դիրքը այն կետի համեմատ, որտեղ այն առաջին անգամ դիպել է երանին: Եթե ​​մատը գտնվում է այս կետից ձախ կողմում, ապա փոփոխականն ունի բացասական արժեք, եթե դեպի աջ՝ դրական:

Օրինակ, մենք այնտեղ պայման ենք դնում, երբ մատը 200 պիքսելից ավելի շարժվում է հպման կետից դեպի ձախ կամ աջ՝ մենք հաշվում ենք սահումը: Ինչի համար է դա? Օրինակ, հենց որ օգտատերը դիպչում է և սկսում շարժել իր մատը, դուք կարող եք նրան ցույց տալ սահուն էջի շրջում, որը հետևում է նրա մատին, և հենց որ մատը անցնում է 200 պիքսելից, կատարում է վերջնական անիմացիան և էջը շրջում։ Դա նման է մեկը հնարավոր ճանապարհնման սայթաքման օգտագործումը.

Բայց ինչու այդ դեպքում իրադարձությունը հպումԴուք հարցնում եք... Երբեմն օգտատերը չի ցանկանում իր մատը սահեցնել որոշ հեռավորության վրա, և շատ հավելվածներ օգտագործում են սահը որպես արձագանք՝ կարճ հեռավորության վրա մատը էկրանով արագ տեղափոխելու համար: Սա հենց այն է, ինչ մենք կիրառեցինք վերջին միջոցառման ունկնդիրում:

Քաշել «n» Drop (Քաշել տարր)

Հաճախ հավելվածների ինտերֆեյսներում և խաղերում պետք է տարրերից մեկը մատով քաշել որոշակի տեղ։ Եկեք այն դարձնենք սենսորային էկրանով հարմար javascript: Եկ սկսենք:

var obj = document.getElementById("sat");
/*Բռնել հպում*/
obj.addEventListener("touchstart", ֆունկցիա(իրադարձություն) (
եթե (event.targetTouches.length == 1) (
var touch=event.targetTouches;
touchOffsetX = touch.pageX - touch.target.offsetLeft;
touchOffsetY = touch.pageY - touch.target.offsetTop;
}
), կեղծ);
/*Տեղափոխեք օբյեկտը*/
obj.addEventListener("touchmove", ֆունկցիա(իրադարձություն) (
եթե (event.targetTouches.length == 1) (
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + «px»;
obj.style.top = touch.pageY-touchOffsetY + «px»;
}
), կեղծ);

Ինչպես տեսնում եք, սա ամբողջ կոդը չէ, մինչ այժմ մենք ստացել ենք քաշել առանց անկման, բայց դուք հավանաբար արդեն նկատել եք, որ տարրի շարժումը, ի վերջո, կատարվում է css պարամետրերով: ձախԵվ գագաթ. Այս երկու տողերի փոխարեն, որոնք պատասխանատու են օբյեկտը էկրանի շուրջ շարժելու համար, կարող եք տեղադրել.

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

Նրանք. օգտագործել CSS3, բայց իմ դեպքում ես չեմ նկատել կատարողականի աճ, ուստի ավելի լավ է գագաթԵվ ձախ. Այս կոդով դուք կարող եք որևէ տարր տեղափոխել դաշտում, սակայն այն որոշակի վայրում բաց թողնելը չի ​​հաշվվի: Դա իրագործելու համար օբյեկտին ավելացրեք հպման կարգավորիչ՝ ներսում համապատասխան կոդով.

var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", ֆունկցիա(իրադարձություն) (
եթե (event.changedTouches.length == 1) (
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
եթե (
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/*Տարոբջ օբյեկտից վեր ենք*/
}
}
), կեղծ);

Որպեսզի ամեն ինչ աշխատի, ձեր օբյեկտը ուղղեք փոփոխականին տարոբջև դու երջանիկ կլինես:

Բարձրություն (պտղունց)

Ժամանակն է հիշել հայտնի պտղունցը, որն առաջին անգամ ցուցադրեց Սթիվ Ջոբսը, երբ նա ներկայացրեց առաջին iPhone-ը։ Երկու մատների այս շարժումն է դեպի միմյանց կամ միմյանցից հեռու, որը կոչվում է պտղունց: Սովորաբար այս ժեստն օգտագործվում է ինչ-որ բան ավելացնելու կամ նվազեցնելու համար:

Ստորև բերված օրինակում հիմնական կետերը նշվում են մեկնաբանություններով (այնպես, որ ծածկագիրը չմիաձուլվի ամբողջական ցորենի շիլա).

/*Սահմանել որոշ փոփոխականներ*/
var objzoom = document.getElementById("dro");
var scaling = կեղծ;
var dist = 0;
varscale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*Գրել ֆունկցիա, որը որոշում է մատների միջև հեռավորությունը*/
ֆունկցիայի հեռավորությունը (p1, p2) (
վերադարձ (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Բռնել շեղի սկիզբը*/
objzoom.addEventListener("touchstart", ֆունկցիա(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
եթե (tt.length >= 2) (
dist = հեռավորություն (tt, tt);
scaling = ճշմարիտ;
) ուրիշ (
scaling = կեղծ;
}
), կեղծ);
/*Բռնել խոշորացումը*/
objzoom.addEventListener("touchmove", ֆունկցիա(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
եթե (մեծացում) (
curr_scale = հեռավորություն (tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
), կեղծ);
/*Բռնել շեղի վերջը*/
objzoom.addEventListener("touchend", ֆունկցիա(evt) (
vartt = evt.targetTouches;
եթե (տտ. երկարություն< 2) {
scaling = կեղծ;
եթե (curr_scale< min_zoom) {
scale_factor = min_zoom;
) ուրիշ (
եթե (curr_scale > max_zoom) (
scale_factor = max_zoom;
) ուրիշ (
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
) ուրիշ (
scaling = ճշմարիտ;
}
), կեղծ);

Օրինակում թեստի համար մենք օգտագործում ենք id ունեցող օբյեկտ դրո, կարող եք օգտագործել ձեր օբյեկտը՝ այն վերագրելով փոփոխականին objzoom. Փոփոխականների մեջ կարող եք փոխել տվյալները, օրինակ՝ առավելագույն խոշորացումը կամ նվազագույնը:

Լոգարիթմական պատկերներ և HTML

Մենք արդեն նկարագրել ենք վերևում, թե ինչպես կարելի է սահել, որի հիման վրա կարող եք սահեցնել պատկերները կամ ձեր տվյալները HTML կոդով: Այնուամենայնիվ, սա կարող է չհամապատասխանել ոմանց, և եթե դուք նրանց թվում եք, ովքեր ցանկանում են ավելի հեշտ և արագ արդյունք ստանալ առանց մանրամասների մեջ մտնելու, այս ենթաբաժինը ձեզ համար է:

Առաջին հերթին, մենք նշում ենք անվճար JS մշակում, որը կոչվում է Fotorama, որը շատ ֆունկցիոնալ և օգտակար է բջջային հավելվածների մշակողների համար, ովքեր ցանկանում են օգտագործել սահող:

Կա նաև գեղեցիկ պատկերի սլայդեր:

Հավելվածի կամ խաղի համար հպման կեղևի նման ձեռքով ստեղծումից բացի, կարող եք օգտագործել շրջանակ: Ահա այս թեմայում տարածված Sencha Touch, jQ Touch, jQuery Mobile շրջանակների ցանկը:

Վերջին հարցը բջջային հարթակների հետ այս ամենի համատեղելիության հարցն է։ Դե, հպումը աջակցում է Android 2.3-4.X և IOS: Բայց մուլտիհպումն ապահովվում է ամեն ինչով, բացի Android 2.3-ից:

Մի մոռացեք, որ դուք պետք է նշանակեք կարգավորիչներ HTML օբյեկտներին, երբ դրանք արդեն հայտնի են, այսինքն. միջոցառմանը window.onloadկամ DOMContentLoaded.

Եթե ​​հոդվածին ավելացնելու բան ունեք, գրեք մեկնաբանություններում:

Ժեստ տերմինը էկրանի վրայով մատների շարժումները համատեղելու միջոց է՝ ինչ-որ գործողություն սկսելու համար. մատների շարժումն այս դեպքում օգտագործվում է պարզապես հպվելու կամ սեղմելու փոխարեն: Լրիվ հպում (ամբողջական հպում) կամ մկնիկ՝ շարժման ֆիքսման գործառույթ, անհրաժեշտ է, որպեսզի ժեստերը գրանցվեն և լինեն բացարձակ ճիշտ: Այսօր միայն Safari-ի և Android-ի բրաուզերներն ունեն լավ աջակցություն այս ֆունկցիայի համար:

Եթե ​​ձեր վեբ հավելվածը օգտատերից պահանջում է ժեստերի օգտագործում, ապա կարևոր է նրան սովորեցնել ճիշտ գործողությունները՝ օգտագործելով օգնություն, անիմացիոն օրինակներ կամ որևէ այլ տեսակի հուշում (Նկար 8.5):

Բրինձ. 8.5. Google Fast Flip-ը նոր դիտող է, որն օգտագործում է ժեստերը iPhone-ում և Android սարքեր. Ձախ կողմում դուք կտեսնեք նախազգուշացման երկխոսություն այն օգտագործելու հրահանգներով: Դուք միայն մեկ անգամ կտեսնեք հրահանգները:

Սահեցրեք ժեստը

Սահահարման ժեստը (նաև հայտնի է որպես մատով խփել) հպումով դիտարկիչի տեխնոլոգիա է, որը սովորաբար օգտագործվում է բովանդակությունը ետ և առաջ տեղափոխելու համար: Այս ժեստը օգտագործվում է, օրինակ, շատ ֆոտոցուցասրահներում՝ ցուցադրվող պատկերը փոխելու համար, իսկ ներկայացումներում՝ սլայդները թերթելու համար: Ժեստի էությունը մատի պարզ շարժումն է X առանցքի երկայնքով ձախից աջ (հորիզոնական սահեցրեք) կամ Y առանցքի երկայնքով վերևից ներքև (ուղղահայաց սահեցրեք): Սահեցման ժեստը աջակցվում է գրեթե բոլոր հպման սարքերում, քանի որ այն կատարվում է մեկ մատով:

Չկա հատուկ ստանդարտ իրադարձություն, որը կարող է ընդհատել սահեցման գործողությունը, այնպես որ մենք այն կկրկնօրինակենք՝ օգտագործելով հասանելի ստանդարտ իրադարձությունները

Symbian 5-րդ սերնդի սարքերում, եթե դուք օգտագործում եք ձեր մատը կուրսորի փոխարեն, մկնիկը վար, տեղափոխեք և վերև իրադարձությունները բավականին տարօրինակ արդյունքներ են ստանում: Միջոցառումը բացվում է միայն մեկ անգամ մատը քաշելու գործողության ժամանակ, և իրադարձությունն ընդհանրապես չի արձակվում, եթե մատը տեղափոխվում է մկնիկի ներքևի սկզբնական կոորդինատներից: Հետևաբար, որոշ իրավիճակներում սահումը հայտնաբերելու համար անհրաժեշտ են տարբեր մոտեցումներ:

Հաջորդականություն:

Ընդհատեք իրադարձությունը (կամ ontouchstart-ը iPhone-ում և այլ համատեղելի բրաուզերներում) և սկսեք ձայնագրել ժեստը:

Ընդհատեք (կամ շարժվեք iPhone-ում և բրաուզերներում՝ անհրաժեշտ աջակցությամբ) և շարունակեք ձայնագրել ժեստը, եթե x (կամ y) շարժումը տեղի է ունենում որոշակի շեմի սահմաններում: Չեղարկում է ժեստը, եթե շարժումը այլ առանցքի վրա է:

Intercept onmouseup-ը (կամ ontouchend-ը iPhone-ում և բրաուզերներում՝ անհրաժեշտ աջակցությամբ) և եթե այդ պահին ժեստը շարունակվում էր (ակտիվ էր), և սկզբնական և վերջնական կոորդինատների միջև տարբերությունը ավելի մեծ է, քան որոշակի հաստատուն, սահմանեք սահեցրեք մեկ ուղղությամբ:

Վերջին կետը կարող է փոխարինվել on-the-fly ժեստերի թեստով onmousemove միջոցառման ներսում:

Եթե ​​ձեր աշխատանքում օգտագործում եք jQuery, կարող եք օգտագործել անվճար փլագին http://plugins.jquery.com/project/swipe-ից՝ iPhone սարքերում սահահարման հորիզոնական ժեստը հայտնաբերելու համար:

Հետևյալ կոդի օգնությամբ մենք կարող ենք ստեղծել օբյեկտի վրա հիմնված գրադարան՝ սահը հայտնաբերելու համար (համատեղելի է iPhone-ի, Android-ի և այլ սարքերի հետ).

/** Ստեղծում է սահահարման իրադարձության ժեստերի մշակիչ */ MobiSwipe(id) ֆունկցիան ( // հաստատում է սա. HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // Օգտագործողը սա չի սահմանի կատարյալ տող: GESTURE_DELTA = 60; // ժեստը արձակելու համար առանցքի նվազագույն դելտան // Հանրային անդամներ this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null ;this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Մասնավոր անդամներ this._originalX = 0 this._originalY = 0 var _this = this; // Դարձնում է տարրը սեղմելի iPhone-ում this.element: onclick = function() (void(0)); var mousedown = ֆունկցիա (իրադարձություն) ( // Finger press event.preventDefault(); _this.inGesture = true; _this._originalX = (event.touches) ? event.touches: pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Միայն iPhone-ի համար, եթե (event.touches && event.touches.length!=1) ( _this.inGesture = կեղծ; // Չեղարկել ժեստը բազմակի հպումով) ); var mousemove = ֆունկցիա (իրադարձություն) ( // Finger moved event.preventDefault(); var delta = 0; // Ստացեք կոորդինատներ iPhone-ի կամ ստանդարտ տեխնիկայի միջոցով var currentX = (event.touches) ? event.touches.pageX: event.pageX ; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Ստուգեք, արդյոք օգտվողը դեռ համահունչ է առանցքի, եթե (_this.inGesture) ( if ((_this.direction==_this. ՀՈՐԻԶՈՆՏԱԼ)) (դելտա = մաթ. abs(currentY-_this._originalY); ) else (delta = Math. abs(currentX-_this._originalX); ) if (delta >_this.AXIS_THRESHOLD) ( // Չեղարկել ժեստը, օգտվողը շարժվում է մյուս առանցքով _this.inGesture = false; ) ) // Ստուգեք, արդյոք մենք կարող ենք դա համարել սահեցում, եթե (_this.inGesture) ( if (_this.direction==_this.HORIZONTAL) ( delta = Math.abs( ընթացիկX-_this._originalX);եթե (currentX>_this._originalX) (ուղղություն = 0;) ուրիշ (ուղղություն = 1;)) ուրիշ (դելտա = մաթ. abs(currentY-_this._originalY); if (currentY>_this. _originalY) ( ուղղություն = 2; ) else (ուղղություն = 3; ) ) if (delta >= _this.GESTURE_DELTA) ( // Ժեստը հայտնաբերվել է: var handler = null; անջատիչ (ուղղություն) (պատյան 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; ) if (handler!=null) ( // Զանգահարել դեպի հետ կանչը կամընտիր delta handler(delta); ) _this.inGesture = false; ))); // iPhone-ի և Android-ի իրադարձությունները this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", ֆունկցիա( ) ( _this.inGesture = false; ), false); // Մենք պետք է նաև վերագրենք մեր մկնիկի իջեցման և մկնիկի տեղափոխման գործառույթները // ստանդարտ իրադարձություններին համատեղելի սարքերում)

Ահա մի պարզ օրինակ՝ օգտագործելով մեր swipe.js գրադարանը հորիզոնական հայտնաբերման սահեցմամբ և մեկ այլ՝ ուղղահայաց հայտնաբերմամբ.

Սահեցրեք ժեստերի հայտնաբերում window.onload = ֆունկցիա () ( var swipev = նոր MobiSwipe («ուղղահայաց»); swipev.direction = swipev.VERTICAL; swipev.onswipedown = ֆունկցիա () ( զգուշացում («ներքև»); ); swipev.onswipeup = function() ( alert («վերև»); ); var swipeh = նոր MobiSwipe («հորիզոնական»); swipeh.direction = swipeh.HORIZONTAL; swipeh.onswiperight = ֆունկցիա () ( զգուշացում («աջ»); ); swipeh.onswipeleft = ֆունկցիա () ( զգուշացում («ձախ»); ) Ուղղահայաց սահեցում Հորիզոնական սահում

Շատ հպման սարքերում քաշելու ժեստն օգտագործվում է էջի բովանդակությունը ոլորելու համար, և, միևնույն ժամանակ, preventDefault ֆունկցիան չի աջակցվում (մենք խոսեցինք այս գլխում ավելի վաղ վարքագծի կանխարգելման լռելյայն ֆունկցիայի մասին): Այդ իսկ պատճառով, բացի սայթաքման ժեստից, մենք պետք է հաշվի առնենք մյուսները մատչելի ուղիներնավարկություն.

Մեծացնել և պտտել ժեստերը

Երբ iPhone-ն առաջին անգամ դուրս եկավ, ամենաթեժ առանձնահատկությունները խոշորացումն ու պտտվող ժեստերն էին: Օգտագործելով կծկելու ժեստը (երկու մատը սեղմելով և տարածելով), օգտատերը կարող է մեծացնել կամ փոքրացնել բովանդակությունը, որը սովորաբար պատկեր է էջի վրա, և երկու մատը շրջանագծի մեջ պտտելով՝ պատկերը կարող է պտտվել։ .

Այն սարքերում, որտեղ չկա մի քանի հպման աջակցություն, խոշորացման գործառույթները պետք է իրականացվեն սովորական լողացող կոճակների և սահիկների միջոցով:

Բարեբախտաբար, սկսած iOS 2.0-ից, այս ժեստերը կարելի է հայտնաբերել առանց հպման իրադարձությունների ցածր մակարդակի մաթեմատիկայի դիմելու: Աղյուսակ 8.35-ում ներկայացված են երեք WebKit ընդլայնումներ, որոնք հասանելի են որպես իրադարձություններ: Android բրաուզերը նույնպես ավելացրել է աջակցություն այս իրադարձությունների համար:

Նույն իրադարձությունները օգտագործվում են մասշտաբի և ռոտացիայի համար: Երեքն էլ ստանում են GestureEvent պարամետր: Այս պարամետրն ունի իրադարձության բնորոշ հատկություններ, ինչպես նաև լրացուցիչ մասշտաբի և պտտման հատկություններ:

Սանդղակի հատկությունը սահմանում է երկու մատների միջև եղած հեռավորությունը՝ որպես լողացող կետի բազմապատկիչ այն հեռավորության սկզբից, որտեղ սկսվել է ժեստը: Եթե ​​արժեքը 1.0-ից մեծ է, ապա դա բաց պտղունց է (բարձրացում), իսկ եթե արժեքը 1.0 է, նշանակում է փակ պտղունց (նվազում):

ռոտացիան տալիս է սկզբնական կետից պտույտի դելտայի (հեռավորության) արժեքը (աստիճաններով): Եթե ​​օգտատերը պտտում է օբյեկտը ժամացույցի սլաքի ուղղությամբ, ապա մենք ստանում ենք դրական արժեք, իսկ եթե հակառակը, ապա արժեքը բացասական կլինի։

Ես գիտեմ, թե ինչ եք մտածում հենց հիմա. «Պտտելը և մասշտաբելը հիանալի է, բայց ի՞նչ օգուտ, եթե մենք աշխատում ենք HTML-ի հետ»: Սա այն վայրն է, որտեղ օգնության են հասնում iOS-ի Safari-ի (և աջակցությամբ այլ բրաուզերների) CSS ընդլայնումները՝ մեկ հատկությամբ և դրա արժեքը վերահսկելու երկու գործառույթով՝ պտտել և չափել:

Պտտման ֆունկցիան ընդունում է պարամետրը աստիճաններով, և մենք պետք է թվից հետո սահմանենք deg միավորը (օր. rotate(90deg)): Մենք դա կարող ենք սովորել սկրիպտից՝ օգտագործելով element.style.webkitTransform:

Դիտարկենք մի պարզ օրինակ.

Ժեստերի կառավարման ֆունկցիայի ժեստ (իրադարձություն) ( // Մենք կլորացնում ենք արժեքները երկու տասնորդականներով event.target.innerHTML = "Rotation: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round (իրադարձություն .scale*100)/100; // Մենք կիրառում ենք փոխակերպման գործառույթները տարրի վրա event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + "scale(" + event. .scale + ")";)

Ինչպես է աշխատում օրինակը, կարելի է տեսնել Նկար 8-6-ում: Համատեղելի սարքերում կարող եք երկու մատով պտտել և խոշորացնել (բոլոր բովանդակության հետ մեկտեղ): Բայց ո՞րն է այստեղ խնդիրը։ Փոխակերպման ոճը միշտ կիրառվում է սկզբնական տարրի վրա: Այսպիսով, եթե տարրի վրա կիրառենք 2.0 սանդղակ, այնուհետև նորից մեծացնենք այն 0.5-ով, ապա նոր արժեքը կլինի 0.5, ոչ թե 1.0, ինչպես կարող էինք ակնկալել:

Բրինձ. 8.6. Համատեղելով հպումային իրադարձությունները CSS-ի փոխակերպումների հետ՝ դուք կարող եք պտտել և չափել տարրերը ձեր կայքում:

Տիպիկ խոշորացում-պտտման պահվածքի համար մենք պետք է փոխարինենք ֆունկցիան հետևյալով.

var ռոտացիա = 0; var սանդղակ = 1; ֆունկցիայի ժեստ (իրադարձություն) ( event.target.innerHTML = "Rotation: " + Math.round((event.rotation+rotation)*100)/100 + " Scale: " + Math.round ((event.scale*scale) *100)/100; event.target.style.webkitTransform = "rotate(" + (event.rotation+rotation)%360 + "deg)" + "scale(" + event.scale*scale + ")"; ) ֆունկցիա gestureend(իրադարձություն) (պտտում = իրադարձություն.պտտում+պտույտ; սանդղակ = իրադարձություն.մասշտաբ*սանդղակ;)