Sivun vierittäminen pyyhkäisemällä näyttöä. Mitä on ele, napautus, kosketus, pyyhkäisy, pyyhkäisy, liu'uttaminen, nipistäminen, venyttely, panorointi: älypuhelimelle ja iPhonelle. Eleet kahdella sormella
Android-laitteet käyttävät kosketusnäyttöä. Käyttäjille, jotka ovat tottuneet painonäppäimiin, voi olla vaikeaa siirtyä kosketusnäytön käyttöön.
Painikeohjaus käyttää näppäimistöä ja hiirtä, kun taas kosketusnäytön ohjaus tapahtuu sormilla tai kynällä.
Toisaalta eleohjaus vaikuttaa hieman primitiiviseltä. Toisaalta Android-eleet avaavat uusia näköaloja erilaisille ohjelmille, joiden toteuttaminen painikeversiossa olisi erittäin vaikeaa tai mahdotonta.
Kosketusnäytön ohjaus tarkoittaa sitä, että se reagoi kosketukseen sormilla tai kynällä ja toistaa tarvittaessa täsmälleen nämä liikkeet. Jos laite tunnistaa kosketukset tai liikkeet komennoiksi, ne suoritetaan täsmälleen komentoina. Käyttäjän tehtävä on yksinkertainen - hallita kosketusnäytön painallus niin, että ne johtavat niiden komentojen suorittamiseen, jotka ovat laitteelle ymmärrettäviä ja joita käyttäjä tarvitsee.
Katsotaanpa seitsemää parasta kosketusnäytöissä käytettyä tekniikkaa. Android-eleet voivat olla seuraavat:
1. Kosketa (paina)Napauttaminen (tai napauttaminen) on ensisijainen toiminto, jota käytetään yleisimmin kosketusnäytössä.
Kosketus on välttämätöntä monissa tapauksissa:
- ottaa käyttöön ominaisuuksia,
- käynnistääksesi minkä tahansa sovelluksen,
- yhden tai toisen parametrin, elementin aktivointi,
- valitaksesi haluamasi kuvakkeen tai vastaavan vaihtoehdon luettelosta,
- kirjoittaaksesi tekstiä
- jne.
Kosketus on yksinkertaista. On riittävän helppoa koskettaa sormella tai kynällä haluamaasi kohtaan näytöllä, esimerkiksi koskettamalla halutun sovelluksen kuvaketta.
Kirjoita tekstiä koskettamalla vain haluamaasi kenttää, virtuaalinen näppäimistö tulee automaattisesti näkyviin, voit kirjoittaa tekstiä koskettamalla näppäimiä, joissa on haluamasi merkit.
Muistan tahattomasti kuinka monta vuotta sitten menin terminaaliin, painoin terminaalin painikkeita laittaakseni rahaa kännykkä. Yleensä tein kaiken tavalliseen tapaan, mutta terminaalissa ei tapahtunut mitään, pääte ei vastannut painikkeisiin. Joten tein 3 tai 4 lähestymistä terminaaliin eri päivinä ilman tuloksia. Eräänä hyväna päivänä terminaalissa jonossa seisonut nuori mies sanoi takanani: "Entä jos painat sormella näyttöä?". Ja tässä se on, onnea: painoin sormella ruutua ja pääte alkoi reagoida painallukseen, kaikki toimi. Joten tapasin ensin kosketusnäytön.
2. KaksoisnapautaKaksoisnapautus (tai kaksoisnapautus) käytetään nopeaan zoomaukseen, joidenkin sovellusten käynnistämiseen ja muihin toimiin.
Jos haluat muuttaa mittakaavaa, esimerkiksi katsellessasi verkkosivua, sinun on kosketettava näyttöä nopeasti 2 kertaa vähimmäisvälillä. Voit palata edelliseen tilaan kaksoisnapauttamalla näyttöä uudelleen.
Yksi kaksoisnapautus ottaa vastaavan vaihtoehdon käyttöön, toinen kaksoisnapautus peruuttaa saman vaihtoehdon.
Jos vertaat Androidia Windowsiin, kaksoisnapautus Androidissa on jossain määrin samanlainen kuin vasemman painikkeen kaksoisnapsauttaminen Windowsissa.
3. Kosketa ja pidä painettuna
Painamalla (koskettamalla) samalla pitämällä avataan lisävaihtoehtoja, jos sellaisia on.
Sinun on kosketettava haluamaasi aluetta näytöllä ja pidettävä sormeasi muutaman sekunnin ajan. Kosketuksen ja pitämisen hetkellä ei tapahdu mitään, ja tämä voi olla aluksi hieman yllättävää. Mutta heti kun vapautat sormesi, ylimääräinen valikko tulee välittömästi näkyviin tai tapahtuu jokin muu toiminto kosketuksen ja pidon seurauksena.
Tämä toiminto on hyvin samanlainen kuin hiiren kakkospainikkeella napsauttaminen Windowsissa, kun hiiren oikealla napsautuksella objektia tulee näkyviin niin sanottu kontekstivalikko, jossa on objektin lisäasetuksia.
4. Pyyhkäise (pyyhkäise)
Pyyhkäisemistä voidaan kutsua myös pyyhkäisemiseksi tai vierittämiseksi. Kosketa kevyesti näyttöä, vapauttamatta sormeasi, liu'uta sormeasi ylhäältä alas, alhaalta ylös, vasemmalta oikealle tai oikealta vasemmalle, eli ikään kuin harjaisit hieman "pölyä näytöltä" oikeaan suuntaan.
Pyyhkäisemistä (pyyhkäisemistä) käytetään siirtymään työpöydän sivujen välillä, selaamaan erilaisia luetteloita jne. Android-lukitusnäytön asetuksista riippuen voi olla, että pyyhkäiseminen vinottain (diagonaalisesti) tarkoittaa näytön lukituksen avaamista – tämä pyyhkäisy koskee myös pyyhkäisyä, ei vain pyyhkäisyä alhaalta ylös tai oikealta vasemmalle.
Kun minun oli ensin lähetettävä venäjänkielinen viesti älypuhelimellani, jouduin tätä varten muuttamaan asettelun englannista venäjäksi virtuaalinäppäimistöllä. Kokeilin kaikkia vaihtoehtoja, menin jopa kieliasetuksiin - se ei toiminut millään tavalla: englanninkielinen asettelu "seisoi raiteillaan". Minulle kerrottiin, että minun täytyy vain heiluttaa sormellani kevyesti tilan yli vasemmalta oikealle. Muuten, näin virtuaalisen näppäimistön välilyönnissä merkinnän "English", painoin sitä, mutta turhaan. Ja heti kun hän heilutti sormellaan tilaa, ulkoasu muuttui heti venäjäksi. Tässä se pyyhkäisee, se toimii!
5. Vedä ja pudota (vedä ja pudota)Vetämistä (tai vetämistä) tarvitaan sovellusten siirtämiseen näytöllä sekä kansioiden, kuvakkeiden ja vastaavien siirtämiseen.
Sinun on kosketettava vaadittua elementtiä, odotettava, että se valitaan, ja siirrä sitten tämä elementti (kansio, tiedosto, kuvake jne.) haluamaasi kohtaan kosketusnäytöllä vapauttamatta sormea.
6. Sormien tuominen ja levittäminen
Yksinkertainen ja hyödyllinen toiminto näytöllä näytettävän mittakaavan muuttamiseen: kuva, teksti, kartta, kaavio jne. Voit lähentää ja loitontaa tarvittaessa uudelleen.
Voit tehdä tämän koskettamalla näyttöä kahdella sormella (tai usealla) kerralla ja levittämällä niitä erilleen nostamatta sormiasi näytöltä. Mittakaava kasvaa samassa suhteessa.
Jos kosketat näyttöä kahdella sormella (tai usealla) ja nostamatta niitä näytöltä, tuot ne yhteen, skaala pienenee.
7. Muuta näytön suuntaa
Pysty (pysty) suunta on kätevä kirjojen lukemiseen. Vaakasuuntainen (vaakasuora) on hyvä videoiden ja erilaisten karttojen katseluun. Kaikki tämä ei tietenkään ole kaikille, jokainen valitsee itse, mikä suunta on parempi tässä tai tuossa tapauksessa.
Jos haluat muuttaa suuntaa toiseen, sinun tarvitsee vain kääntää älypuhelinta. Tässä tapauksessa näytön kiertotoiminto on aktivoitava näytön parametreissa. Jos toiminto on poistettu käytöstä, kuvaa ei käännetä.
Nämä eivät ole kaikki mahdollisia elevaihtoehtoja, mutta ehkä alkeellisimmat ja useimmin käytetyt. Muut eleet, kuten ympyrässä kääntyminen jne. käytetään harvemmin, eivätkä nämä eleet välttämättä toimi kaikissa ohjelmissa. Yleensä luetellut eleet riittävät kaikkiin tilanteisiin tai melkein kaikkeen.
Ne hallitaan helposti ja nopeasti, mutta ensin sinun on harjoiteltava vähän. Eleet ovat loogisesti selkeitä, odotat heiltä juuri tätä toimintaa. Onko tuo kosketus pitoa - se on vähän luonnotonta. Loput eleet ovat intuitiivisia. Siksi se on helppo muistaa.
P.S. Tutustu muuhun sisältöön:
Vastaanota ajantasaisia tietokonelukutaitoa käsitteleviä artikkeleita suoraan sähköpostiisi.
Jo yli 3000 tilaajaa
Hyvät ystävät, jotka olette aloittamassa älypuhelimen hallintaa!
Jos olet vaihtanut perinteisestä painonäppäinmatkapuhelimesta kosketusnäyttöälypuhelimeen (kosketusnäyttö), joillain teistä on aluksi vaikeuksia hallita kosketusnäyttöä. Sinulle ei ole kovin selvää, kuinka näyttöä kosketetaan, kuinka kauan kosketusta pidetään painettuna, kuinka sivua navigoidaan jne. Tässä artikkelissa yritän kuvailla lyhyesti älypuhelimen hallinnan pääpiirteitä.
Minun on heti sanottava, että siirtyminen mekaanisista painikkeista virtuaalisiin painikkeisiin on valtava askel eteenpäin mobiililaitteiden kehityksessä. Sen avulla voit kasvattaa näytön aluetta lähes koko älypuhelimen etupinnalle ja helpottaa sen hallintaa. Mutta samaan aikaan, aluksi ilmenee jonkin verran vaivaa. Tavallinen puhelin Voit ottaa sen käteesi haluamallasi tavalla ja koskettaa mitä tahansa etupaneelin ja näytön osaa. Älypuhelimien kanssa sinun on oltava varovaisempi, koska mikä tahansa vahingossa tapahtuva kosketus näytön pintaan voi aiheuttaa ei-toivotun toiminnan. Sinun on kehitettävä tapa pitää älypuhelinta kädessäsi koskematta näyttöön tarpeettomasti, ainakin sen ollessa lukitsemattomassa tilassa.
Joten tässä ovat kosketusnäytön perusohjaimet:
Yksi kosketus (napautus)Tämä on nopea (lähes ilman viivettä) kosketus näyttöön yhdellä sormella. Viive ei saa ylittää 0,5 sekuntia. Mikä tahansa kosketus on riittävän helppoa, sillä nykypäivän kapasitiiviset kosketusnäytöt ovat erittäin herkkiä (toisin kuin resistiiviset, jotka ovat menneet sivuun).
Aloitusnäytössä (ja missä tahansa työpöydän näytössä) yksi sovelluskuvakkeen napauttaminen käynnistää sovelluksen. Tämä vastaa hiiren vasemman painikkeen painamista tavallisessa tietokoneessa. Muissa tapauksissa sovelluksen sisällä tämä voi olla valinta useista vaihtoehdoista, yhteyshenkilön valitseminen yhteystietoluettelosta, toiminnon vahvistaminen jne.
Yksi kosketus tekstikentissä lisää kohdistimen kosketettuun kohtaan.
Pitkä napautusTämä on kosketus yhdellä sormella yli 1 sekunnin viiveellä (kunnes tulos tulee näkyviin). Tulos voi vaihdella tilanteen mukaan. Useimmissa tapauksissa tämä toiminto johtaa kontekstivalikon ilmestymiseen (samanlainen kuin oikea painike hiiret).
Kuvakkeen viivästetty napauttaminen päänäytöllä johtaa "tarttumiseen" tämän kuvakkeen sormeen, mikä mahdollistaa sen siirtämisen näytöllä, mukaan lukien viereiselle aloitusnäytölle, sekä kuvakkeen (ei itse sovelluksen) poistamisen. ) näytölle ilmestyvään koriin.
Tekstikentissä viive johtaa tekstin valintaan sormen alla, jolloin valintaa voidaan laajentaa edelleen tuloksena olevilla loppumerkeillä, samalla kun valikko tulee näkyviin Kopioi, Valitse kaikki, Leikkaa, Liitä. Kohdistimen otsikon pysäyttäminen saa valikon näkyviin Lisää(viimeinen leikepöydän sisältö), Liitä leikepöydältä(mikä tahansa 20 viimeisestä leikepöydän sisällöstä).
Kaksoisnapautus (kaksoisnapautus)Kaksoisnapauta yhdellä sormella lyhyellä napautusvälillä (enintään 0,2 sekuntia). Käytetään vuorotellen lähentämään ja loitontamaan web-sivua selaimessa, kuvaa galleriassa jne. Sinun on napsautettava tarkasti sitä näytön aluetta, jonka haluat nähdä suurempana ja yksityiskohtaisemmin.
Kosketa liikkeellä (napauta ja vedä)Tämä on kosketus yhdellä sormella, jonka välitön (enintään 0,2 sekunnin viive) alkaa sormen siirtämisestä näytöllä vapauttamatta sormea. Lisäviivästyminen yhdessä paikassa liikkeen alkamisen jälkeen ei näytä merkitystä: näytön sisältö näyttää tarttuvan sormeen, kunnes se vapautetaan. Näin voit selata työpöytiä (näyttöjä), selaimen sivuja mihin tahansa suuntaan, selata luetteloita (esimerkiksi yhteystietoja) jne. Tällä eleellä liikutetaan myös erilaisten virtuaalisten säätimien liukusäätimiä (esim. äänenvoimakkuus, kirkkaus jne.).
PyyhkäiseTämä yhdellä sormella suoritettava toiminto on samanlainen kuin edellinen, mutta se tehdään ilman pitkää liikettä näytön ympäri, mikä muistuttaa nopeaa siveltimen vetoa paperille. Samanaikaisesti näytön sisältö jatkaa liikkumista senkin jälkeen, kun sormi on otettu pois näytöltä asteittaisella hidastumisella tapahtuvan "iskun" aikana. Muistan videon Steve Jobsin ensimmäisestä esittelystä tästä vaikutuksesta Applen iPhone 2G:n lanseerauksessa vuonna 2007, ja se sai suosionosoitukset.
Katsotaanpa nyt kahden sormen kosketustekniikoita. Tässä tapauksessa sormet voivat olla yhdellä kädellä tai eri, sillä ei ole väliä.
Kahden sormen lähentyminen (nipistäminen) ja lisääntyminen (nipistys, zoomaus)Tätä tekniikkaa käytetään sujuvasti pienentämään ja vastaavasti lisäämään kuvan mittakaavaa näytöllä (kuvat, verkkosivut). Asetat molemmat sormet näytölle melkein samaan aikaan ja yhdistät sormesi liikkeellä (nipistä) tai levität niitä erilleen. Sormien liikesuunnalla (oikea-vasen, ylös-alas tai väliliikkeet) ei ole merkitystä.
Pyöritä kahdella sormella (kierrä)Tämä on toinen tekniikka, jota käytetään kuvan kiertämiseen näytöllä. Kun olet koskettanut näyttöä, kaksi sormea liikkuu kumpikin ympyrän kaarella samaan suuntaan (myötäpäivään tai vastapäivään). Tai yksi sormi seisoo liikkumattomana pyörimiskeskuksessa, kun taas toinen liikkuu kaaressa tämän keskuksen ympärillä. Tätä menetelmää käytetään harvoin. Käytin sitä esimerkiksi muokattaessa kuvaa MDScan-sovelluksessa saadakseni skannatut kopiot asiakirjoista.
Opi uusien termien merkitys! Katso nopea sanasto iPhonen, älypuhelimien ja tablettien omistajille.
Kaikki tietävät:Napsauta (napsauta) - napsauta hiiren painiketta, paina lyhyesti.
Kaksoisnapsautus, kaksoisnapsautus (kaksoisnapsautus) - kaksi nopeaa napsautusta hiiren painikkeella.
Käyttöliittymä on tapa, jolla laite tai sovellus "kommunikoi" kanssasi.
Vieritys - näytön vierittäminen.
Screenshot - tilannekuva ("valokuva") näytöstä.
Monelle tuttu:Vedä ja pudota, vedä ja pudota (vedä ja pudota) - "vedä ja pudota" - paina yhdessä paikassa, siirrä ja vapauta toisessa paikassa.
Eleet, eleet (eleet) - hiiren, sormen tai muun osoitinlaitteen erilaiset liikkeet. Voidaan ohjelmoida suorittamaan tiettyjä toimintoja. Esimerkiksi liikuttamalla sormea ylhäältä alas näytöllä mobiililaite lataa sivun uudelleen.
Kosketuslevy, kosketuslevy (kosketuslevy) - kannettavan tietokoneen näppäimistön kenttä sormilla painamista ja eleitä varten.
Kosketusnäyttö (kosketusnäyttö) - kosketusnäyttö: havaitsee sormen paineen. Esimerkiksi tabletin tai pankkiautomaatin näyttö.
Yksinkertaiset liikkeet kosketuslaitteille:Napauta, napauta (napauta) - lyhyt painallus sormella, kuten napsautus.
Kaksoisnapautus, kaksoisnapautus, kaksoisnapautus (kaksoisnapautus) – kaksi lyhyttä sormella tapahtuvaa painallusta, mikä muistuttaa kaksoisnapsautusta.
Pitkä napautus, kosketus (kosketus) - painaminen pidempään kuin napautus.
Kosketa ja pidä painettuna (kosketa ja pidä painettuna) - paina ja pidä painettuna.
Uusia liikkeitä kosketuslaitteille:Pyyhkäisy (Flip) - klikkaa vinosti näytöllä näytön kuvan tulevan liikkeen suuntaan, pyyhkäisyn jälkeen kuva jatkaa liikkumista hitaudella.
Pyyhkäisy (pyyhkäisy), liu'uttaminen (liuku) - sormen pitkäaikainen liu'uttaminen näytön poikki.
Purista (nipistys) - purista, purista kahden sormen liikettä samanaikaisesti näytöllä kuvan pienentämiseksi.
Spread / Spread (spread), Stretch (venytä: Microsoft), Purista-avaa (purista auki: Apple) - venytä liikettä kahdella sormella samanaikaisesti näytön poikki kuvan suurentamiseksi.
Panoroi, panoroi (pan) - sormen hidas liike näytön poikki liikkuaksesi ja katsoaksesi suurennettua kuvaa.
Jos jotain tärkeää puuttuu tai et ole samaa mieltä sanamuodosta, kirjoita meille: Tämä osoite Sähköposti suojattu roskapostilta. Sinulla on oltava JavaScript käytössä nähdäksesi.
Kun kehitetään sovelluksia Androidille ja iPhonelle iPadilla (IOS) käyttämällä vain verkkoteknologioita, jokainen kehittäjä kohtaa ennemmin tai myöhemmin kysymyksen monimutkaisten monikosketustoimintojen toteuttamisesta ja käyttämisestä pelissä tai sovelluksessa, kuten pyyhkäisy, nipistäminen ja käsittely. pitkä napautus (pitkä kosketus yhdellä sormella liikkumatta) ja vedä "n"-pudotus.
Tässä artikkelissa tarkastellaan tapoja käsitellä vaihtelevan monimutkaisia kosketustapahtumia Javascript-tapahtumissa ilman kolmannen osapuolen kirjastoja (otamme vain jQuery min).
Teen heti varauksen, että käytän vain jQueryä poistaakseni selaimen oletuskäyttäytymisen tapahtumassa. En pidä tästä kirjastosta, joten kaikki kirjoitetaan Vanilla JS:llä.
Aloitetaan siis teoriasta ja kosketetaan itse asiassa, mitä tapahtumia tulisi käyttää sovellusta tai peliä luotaessa.
Yhteensä käytetään kolmea avaintapahtumaa:
touchstart - Kosketti näyttöä
kosketus – Sormi poistettiin
touchmove - Liikuta sormeasi
Jos elementin saamiseksi, johon hiiri ajoi sisään tai poistui, riitti kutsua event.target, niin kosketustapahtumien kanssa kaikki ei ole niin yksinkertaista.
Jokainen kosketus on tunnistettava. Ja tähän käytetään listoja:
kosketukset – kaikki sormet, jotka ovat tällä hetkellä vuorovaikutuksessa näytön kanssa ("koskettivat" näyttöä)
targetTouches - Luettelo sormista, jotka ovat vuorovaikutuksessa elementin kanssa
ChangeTouches - luettelo sormista, jotka osallistuvat nykyiseen tapahtumaan. Jos kyseessä on esimerkiksi kosketustapahtuma, lista sisältää poistetun sormen (vaikka muut 4 sormea olisivat edelleen näytöllä).
Ymmärtämisen helpottamiseksi tilanne on seuraava:
Laitoin yhden sormen näytölle ja kaikissa kolmessa luettelossa on yksi elementti.
Laitoin toisen sormen ja nyt kosketuksissa on 2 elementtiä, targetTouchesilla on 2 elementtiä, jos laitan toisen sormen samaan HTML-elementtiin kuin ensimmäinen, ja changeTouchesilla puolestaan on vain toinen sormi, koska hän laukaisi tapahtuma.
Jos laitan 2 sormea näytölle samanaikaisesti, ChangeTouchesilla on 2 elementtiä (kumpikin sormea kohden).
Jos aloitan liikuttamaan sormiani näytöllä, vain ChangeTouches-luettelo muuttuu. Sen sisältämien elementtien määrä on yhtä suuri kuin liikkeessä olevien sormien lukumäärä (vähintään 1).
Jos poistan sormeni, listat koskettavat, targetTouches on yksi elementti tyhjä ja changeTouches sisältää sormen, koska se laukaisi tapahtuman (touchend)
Kun poistan viimeisen sormen, listat koskettavat, targetTouches ei sisällä mitään, ja changeTouchesilla on tietoja juuri tästä sormesta.
Nyt on aika selvittää, mitä tietoja voimme saada sormesta:
tunniste – Kosketuksen yksilöllinen tunnus
kohde – itse esine, jota kosketimme
SivuX,SivuY - Kosketa koordinaatteja sivulla
Voit tarkastella yksittäisen tunnuksen yhdellä kosketuksella soittamalla event.touches.identifier, ja IOS:ssä, jos en erehdy, sinun on tehtävä tämä event.originalEvent.touches.identifier.
No, mitä olen jo opettanut sinulle, ja nyt on aika siirtyä harjoittelemaan.
Ennen kuin aloitamme, sinun on ymmärrettävä muutamia asioita. Jokaisessa pelissä, sovelluksessa, jonka teet Androidilla ja IOS:llä, sinun on poistettava WebView-komponentin vakioreaktio tapahtumiin käytöstä. Tätä varten liitimme jQueryn (en voinut tehdä Pure JS:ssä mitä toiminnot tekevät event.preventDefault() Ja event.stopPropagation()).
Joten sinun on laitettava seuraava JS-koodiisi:
event.preventDefault();
event.stopPropagation();
), väärä);
event.preventDefault();
event.stopPropagation();
/* Tässä on tapahtumankäsittelykoodisi */
), väärä);
event.preventDefault();
event.stopPropagation();
/* Tässä on tapahtumankäsittelykoodisi */
), väärä);
Tämä on tehtävä, koska monissa laitteissa ilman sitä on merkittäviä jarruja, häiriöitä ja nykivää animaatiota.
Hajamielinen. Me jatkamme.
Kuvataan kaikki peruskosketusvuorovaikutukset näytön ja elementtien kanssa hankitun tiedon kera.
NapautaTämä tapahtuma suoritetaan yksinkertaisesti, kun kosketamme näyttöä sormella ja siirrämme sen pois.
var myclick=event.targetTouches; /*koodisi*/
}
), väärä);
Esimerkiksi muuttujassa myclick sisältää kosketuksesi.
Pitkä napautusVaikka harvoin, on tilanteita, joissa mobiilisovelluksessa tai pelissä sinun on saatava kiinni esineen pitkän kosketuksen toiminta. Katsotaanpa kuinka tehdä Javascriptin pitkä kosketus kosketusnäytöille. matkapuhelimet No tietysti tabletit.
Toteutus 1:
var ldelay;
var betw=();
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
), väärä);
/*Vapauta sormi kiinni*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)(
/*Tässä on koodisi*/
}
), väärä);
Tämä on Long Tapin ensimmäinen Javascript-toteutus. Logiikka on tämä: saamme kosketuksen kiinni, mittaamme tämän tapahtuman ajan, kiinnitämme vapautumisen, mittaamme vapautusajan, vähennämme ensimmäisen kerran toisesta ja tarkistamme, onko sormen asento näytöllä muuttunut. Jos sormella on kulunut yli 800 millisekuntia samassa paikassa ja samaan aikaan, suoritamme Long Tap -toiminnot.
Katsotaan nyt toista toteutusta hieman eri logiikalla:
Toteutus 2:
varlttimer;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
), väärä);
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
), väärä);
document.addEventListener("touchend", function(event) (
clearTimeout(lttimer);
), väärä);
funktio longTouch()(/*koodisi*/)
Yllä oleva Long Tap -tapahtuman toteutus Javascriptissä on oikeampi ja sitä käytetään useimmiten mobiilisovelluksissa. Sen tärkein ero aiempaan toteutukseen on, että se ei odota sormen vapautumista, ja siinä tapauksessa, että sormi ei liikkunut, se laukaisee Long Tap -tapahtuman, joka sinun on laitettava longTouch-toimintoon. longTouch.
PyyhkäiseOn aika puhua henkilöhakuista älypuhelimen tai tabletin näytöllä. Pyyhkäisy - melko yleistä rakentamisessa mobiilisovelluksia, joten ennemmin tai myöhemmin jokaisen sovellusvalmistajan on kohdattava se.
Jos et halua vaivautua ja tarvitset vain Swipe-toiminnon mobiilisovelluksessa, voit lukea siitä aivan sivun alalaidasta.
Jos olet kova kehittäjä - mennään!
Toteutus 1:
var aloituspiste;
var finalPoint;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
originPoint=event.changedTouches;
), väärä);
document.addEventListener("touchend", function(event) (
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
jos (xAbs > 20 || yAbs > 20) (
jos (xAbs > yAbs) (
if (finalPoint.pageX< initialPoint.pageX){
/*PYYHKÄISE VASEMMALLE*/)
muu(
/*PYYHTÄ OIKEALLE*/)
}
muu(
if (finalPoint.pageY< initialPoint.pageY){
/*PYYHKÄISE YLÖS*/)
muu(
/*PYYHKÄISE ALAS*/)
}
}
), väärä);
Tämä on ensimmäinen Javascript-pyyhkäisy-toteutus. Tämän toteutuksen erikoisuus on, että tapahtuma lasketaan pyyhkäisyksi, kun vapautat tapahtumaan liittyvän sormen. Tätä pyyhkäisyä voidaan käyttää joissakin tehtävissä. Älä unohda tässä ja monissa muissa esimerkeissä sammuttaa selaimen normaali käyttäytyminen kosketustapahtumissa (kirjoitin tästä yllä), en yleensä kirjoita niitä annettuihin esimerkeihin, mutta älä unohda.
Ja nyt tarkastellaan toista - klassista toteutusta, kun pyyhkäisy on laskettava reaaliajassa, esimerkiksi sivua käännettäessä:
var startPoint=();
var nowPoint;
var ldelay;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
startPoint.x=event.changedTouches.pageX;
startPoint.y=event.changedTouches.pageY;
ldelay=new Date();
), väärä);
/*Ota kiinni liike sormella*/
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
var otk=();
otk.x=nowPoint.pageX-startPoint.x;
/*Käsittelytiedot*/
/*Esimerkiksi*/
if(Math.abs(otk.x)>200)(
if(otk.x0)(/*SIPAU OIKEALLE(SEURAAVA SIVU)*/)
startPoint=(x:nowPoint.pageX,y:nowPoint.pageY);
}
), väärä);
/*Vapauta sormi kiinni*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
nowPoint=event.changedTouches;
var xAbs = Math.abs(aloituspiste.x - nytPiste.sivuX);
var yAbs = Math.abs(aloituspiste.y - nytPiste.sivuY);
if ((xAbs > 20 || yAbs > 20) && (pdelay.getTime()-ldelay.getTime()) yAbs) (
if (nowPoint.pageX< startPoint.x){/*СВАЙП ВЛЕВО*/}
muu (/*PYYHTÄ OIKEALLE*/)
}
muu(
if (nowPoint.pageY< startPoint.y){/*СВАЙП ВВЕРХ*/}
muu (/*PYYHTÄ ALAS*/)
}
}
), väärä);
Tässä menetelmässä menimme hieman eri tavalla ja käytimme osittain ensimmäisen toteutuksen periaatetta. Loogisesti tämä on hieman monimutkaisempi pyyhkäisy. Kun /*Process Data*/ on kommentoitu, sinun tulee käyttää pyyhkäisysormen koordinaatteja. Se voi olla esimerkiksi animaatio sivun kääntämisestä, ja mitä enemmän sormi vasemmalle, sitä enemmän sivua käännetään. Olemme esimerkiksi siinä osassa tapahtuman kuuntelijaa kosketa liikettä seurataan vain x-koordinaattia, y - ruuvataan samalla tavalla. Muuttujassa otk.x tallentaa sormen nykyisen sijainnin suhteessa pisteeseen, jossa se ensimmäisenä kosketti eraania. Jos sormi on tämän pisteen vasemmalla puolella, muuttujalla on negatiivinen arvo, jos oikealla - positiivinen.
Asetamme sinne esimerkiksi ehdon, kun sormi liikkuu yli 200 pikseliä kosketuspisteen vasemmalle tai oikealle - laskemme pyyhkäisyn. Mitä varten se on? Esimerkiksi heti, kun käyttäjä koskettaa ja alkaa liikuttaa sormeaan, voit näyttää hänelle sujuvan sivun käännön, joka seuraa hänen sormeaan, ja heti kun sormi ylittää 200 pikseliä, se suorittaa viimeisen animaation ja sivu käännetään. Se on kuin yksi mahdollinen tapa tällaisen pyyhkäisyn käyttö.
Mutta miksi sitten tapahtumaan koskettaa kysyt... Joskus käyttäjä ei halua liikuttaa sormeaan pyyhkäisemällä jonkin matkaa, ja monet sovellukset käyttävät pyyhkäisyä reaktiona siirtääkseen sormea nopeasti näytön poikki sivulle lyhyen matkan verran. Juuri tätä käytimme viimeisessä tapahtumakuuntelussa.
Vedä "n" Pudota (vedä elementti)Usein sovellusten käyttöliittymissä ja peleissä joudut raahaamaan jotain elementtejä sormella tiettyyn paikkaan. Tehdään siitä kosketusnäyttöystävällinen javascript. Aloitetaan:
var obj = document.getElementById("sat");
/*Ota kosketukseen*/
obj.addEventListener("touchstart", function(event) (
jos (tapahtuma.targetTouches.length == 1) (
var touch=event.targetTouches;
touchOffsetX = kosketus.sivuX - touch.target.offsetLeft;
kosketusOffsetY = kosketus.sivuY - touch.target.offsetTop;
}
), väärä);
/*Siirrä objektia*/
obj.addEventListener("touchmove", function(event) (
jos (tapahtuma.targetTouches.length == 1) (
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + "px";
obj.style.top = touch.pageY-touchOffsetY + "px";
}
), väärä);
Kuten näette, tämä ei ole koko koodi, toistaiseksi olemme saaneet vedä ilman pudotusta "mutta. Olet varmaan jo huomannut, että elementin liikkeen suorittavat lopulta css-parametrit vasemmalle Ja alkuun. Näiden kahden rivin sijasta, jotka vastaavat kohteen siirtämisestä näytöllä, voit laittaa:
obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";
Nuo. käytä CSS3:a, mutta minun tapauksessani en huomannut suorituskyvyn kasvua, joten se on parempi alkuun Ja vasemmalle. Tällä koodilla voit siirtää esinettä kentällä, mutta sen vapauttamista tietyssä paikassa ei lasketa. Tämän toteuttamiseksi lisää objektiin kosketuskäsittelijä, jonka sisällä on vastaava koodi:
var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", function(event) (
if (event.changedTouches.length == 1) (
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
jos(
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/*Olemme tarobj-objektin yläpuolella*/
}
}
), väärä);
Osoita objektisi muuttujaan, jotta kaikki toimisi tarobj ja tulet olemaan onnellinen.
Pitch (nipistys)On aika muistaa kuuluisa nipistys, jonka Steve Jobs osoitti ensimmäisenä esitellessään ensimmäisen iPhonen. Tätä kahden sormen liikettä toisiaan kohti tai poispäin toisistaan kutsutaan puristamiseksi. Yleensä tätä elettä käytetään lisäämään tai vähentämään jotain.
Alla olevassa esimerkissä avainkohdat on merkitty kommenteilla (jotta koodi ei sulaudu täydelliseksi vehnäpuuroksi):
/*Määrittele joitain muuttujia*/
var objzoom = document.getElementById("dro");
var skaalaus = false;
var dist = 0;
varscale_factor = 1,0;
var curr_scale = 1,0;
var max_zoom = 8,0;
var min_zoom = 0,5
/*Kirjoita funktio, joka määrittää sormien välisen etäisyyden*/
funktioetäisyys (p1, p2) (
return (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Katso kauttaviivan alku*/
objzoom.addEventListener("touchstart", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
jos (tt.length >= 2) (
dist = etäisyys(tt, tt);
skaalaus = tosi;
) muu (
skaalaus = false;
}
), väärä);
/*Ota kiinni zoomauksesta*/
objzoom.addEventListener("touchmove", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
jos (skaalaus) (
curr_scale = etäisyys(tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
), väärä);
/*Ota vinoviiva kiinni*/
objzoom.addEventListener("touchend", function(evt) (
vartt = evt.targetTouches;
if(tt.length< 2) {
skaalaus = false;
if (curr_scale< min_zoom) {
scale_factor = min_zoom;
) muu (
if (curr_scale > max_zoom) (
scale_factor = max_zoom;
) muu (
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
) muu (
skaalaus = tosi;
}
), väärä);
Esimerkissä käytämme testiin objektia, jolla on id dro, voit käyttää objektiasi määrittämällä sen muuttujaan objzoom. Muuttujissa voit muuttaa tietoja, esimerkiksi suurinta zoomia tai minimiä.
Liukuvat kuvat ja HTMLOlemme jo aiemmin kuvanneet, kuinka tehdä pyyhkäisy, jonka perusteella voit liu'uttaa kuvia tai tietojasi HTML-koodissa. Tämä ei kuitenkaan välttämättä sovi joillekin, ja jos kuulut niihin, jotka haluavat saada lopputuloksen helpommin ja nopeammin ilman yksityiskohtia, tämä alaosio on sinua varten.
Ensinnäkin huomaamme ilmaisen JS-kehityksen nimeltä Fotorama, joka on erittäin toimiva ja hyödyllinen mobiilisovelluskehittäjille, jotka haluavat käyttää liukumista.
Siellä on myös kaunis kuvan liukusäädin.
Tämän sovelluksen tai pelin kosketuskuoren manuaalisen luomisen lisäksi voit käyttää kehystä. Tässä on luettelo tämän aiheen suosituista Sencha Touch , jQ Touch , jQuery Mobile -kehyksistä.
Viimeinen kysymys on kysymys tämän kaiken yhteensopivuudesta mobiilialustojen kanssa. No, touch tukee Android 2.3-4.X ja IOS. Mutta monikosketusta tukee kaikki paitsi Android 2.3.
Muista, että HTML-objekteille tulee antaa käsittelijät, kun ne ovat jo tiedossa, ts. tapahtumassa window.onload tai DOMContentLoaded.
Jos sinulla on jotain lisättävää artikkeliin - kirjoita kommentteihin.
Termi ele on tapa yhdistää sormen liikkeitä näytöllä jonkinlaisen toiminnan käynnistämiseksi. sormen liikettä käytetään tässä tapauksessa pelkän kosketuksen tai napsautuksen sijaan. Täyskosketus (täysi kosketus) tai hiiri - liikkeen kaappaustoiminto - tarvitaan, jotta eleet rekisteröivät ja ovat täysin oikein. Nykyään vain Safari- ja Android-selaimilla on hyvä tuki tälle ominaisuudelle.
Jos verkkosovelluksesi vaatii käyttäjää käyttämään eleitä, on tärkeää opettaa heille oikeat toiminnot – ohjeen, animoitujen esimerkkien tai muun kehotteen avulla (Kuva 8.5).
Riisi. 8.5 Google Fast Flip on uusi katseluohjelma, joka käyttää eleitä iPhonessa ja Android-laitteet. Vasemmalla näet varoitusikkunan, jossa on ohjeet sen käyttöön. Näet ohjeet vain kerran.
PyyhkäisyelePyyhkäisyele (tunnetaan myös nimellä kääntö) on kosketusselaimen tekniikka, jota käytetään yleisesti sisällön siirtämiseen edestakaisin. Tätä elettä käytetään esimerkiksi monissa valokuvagallerioissa näytettävän kuvan vaihtamiseen ja esityksissä diojen selaamiseen. Eleen ydin on yksinkertainen sormen liike X-akselia pitkin vasemmalta oikealle (vaakapyyhkäisy) tai Y-akselia pitkin ylhäältä alas (pyyhkäisy pystysuoraan). Pyyhkäisyele on tuettu lähes kaikissa kosketuslaitteissa, koska se suoritetaan yhdellä sormella.
Pyyhkäisytoiminnon kaappaamiseen ei ole olemassa erityistä vakiotapahtumaa, joten emuloimme sitä käyttämällä saatavilla olevia vakiotapahtumia
Symbian 5. sukupolven laitteissa, jos käytät sormea kursorin sijaan, hiiren alas-, siirto- ja ylös -tapahtumat saavat melko outoja tuloksia. Tapahtuma laukeaa vain kerran sormivetotoiminnon aikana, eikä tapahtuma käynnisty ollenkaan, jos sormi siirretään alkuperäisistä hiiren alas-koordinaateista. Siksi joissakin tilanteissa tarvitaan erilaisia lähestymistapoja pyyhkäisyn havaitsemiseen.
Jaksotus:
Viimeinen piste voidaan korvata on-the-fly-eletestillä onmousemove-tapahtuman sisällä.
Jos käytät jQueryä työssäsi, voit käyttää ilmaista laajennusta osoitteessa http://plugins.jquery.com/project/swipe tunnistaaksesi vaakasuuntaisen pyyhkäisyeleen iPhone-laitteissa.
Seuraavan koodin avulla voimme luoda oliopohjaisen kirjaston pyyhkäisyn havaitsemiseksi (yhteensopiva iPhonen, Androidin ja muiden laitteiden kanssa):
/** Luo pyyhkäisytapahtuman elekäsittelijän */ funktio MobiSwipe(id) ( // Vakioina this.HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // Käyttäjä ei määritä täydellistä riviä tähän. GESTURE_DELTA = 60; // Eleen käynnistämisen akselin pienin delta // Julkiset jäsenet this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null ; this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Yksityiset jäsenet this._originalX = 0 this._originalY = 0 var _this = this // Tekee elementistä napsautettavan iPhonessa this.element. onclick = function() (void(0)); var mousedown = function(tapahtuma) ( // Sormen painallus event.preventDefault(); _this.inGesture = true; _this._originalX = (tapahtuma.kosketukset) ? event.touches. sivuX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Vain iPhonelle if (event.touches && event.touches.length!=1) ( _this.inGesture = false; // Peruuta ele usealla kosketuksella ) ); var mousemove = function(event) ( // Sormen liikuttaminen event.preventDefault(); var delta = 0; // Hanki koordinaatit iPhonella tai vakiotekniikalla var currentX = (event.touches) ? event.touches.pageX: event.pageX ; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Tarkista, onko käyttäjä edelleen linjassa akselin kanssa if (_this.inGesture) ( if ((_this.direction==_this. HORIZONTAALI)) ( delta = matem. abs(currentY-_this._originalY); ) else ( delta = matem. abs(currentX-_this._originalX); ) if (delta >_this.AXIS_THRESHOLD) ( // Peruuta ele, käyttäjä liikkuu toisessa akselissa _this.inGesture = false; ) ) // Tarkista, voimmeko pitää sitä pyyhkäisynä if (_this.inGesture) ( if (_this.direction==_this.HORIZONTAL) ( delta = Math.abs( nykyinenX-_this._alkuperäinenX); if (nykyinenX>_this._alkuperäinenX) ( suunta = 0; ) else ( suunta = 1; ) ) else ( delta = matemaattinen abs(nykyinenY-_this._originalY); if (nykyinenY>_this. _originalY) ( suunta = 2; ) else ( suunta = 3; ) ) if (delta >= _this.GESTURE_DELTA) ( // Ele havaittu! var käsittelijä = null; switch(direction) ( tapaus 0: käsittelijä = _this.onswiperight; tauko; tapaus 1: käsittelijä = _this.onswipeleft; tauko; tapaus 2: käsittelijä = _this.onswipedown; tauko; tapaus 3: käsittelijä = _this.onswipeup; tauko; ) if (handler!=null) ( // Kutsu takaisinkutsuun valinnaisella delta-käsittelijällä(delta); ) _this.inGesture = false; ) ) ); // iPhonen ja Androidin tapahtumat this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function( ) (_this.inGesture = false; ), false); // Meidän tulisi myös määrittää mousedown- ja mousemove-toiminnot // yhteensopivien laitteiden vakiotapahtumiin )
Tässä on yksinkertainen esimerkki swipe.js-kirjastomme käyttämisestä vaakasuuntaisen havaitsemisen pyyhkäisyllä ja toisen pystytunnistuksen kanssa:
Pyyhkäisyeleiden tunnistus window.onload = function() ( var swipev = new MobiSwipe("pystysuuntainen"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() ( alert("alas"); ); swipev.onswipeup = function() ( alert("ylös"); ); var swipeh = new MobiSwipe("vaakasuora"); swipeh.direction = pyyhkäisy.VAAKA; swipeh.onswiperight = function() ( alert("oikea"); ); swipeh.onswipeleft = function() ( hälytys("vasen"); ); ) Pystypyyhkäisy Vaakapyyhkäisy
Monissa kosketuslaitteissa vedetään elettä sivun sisällön vierittämiseen, ja samalla preventDefault-toimintoa ei tueta (puhuimme oletuskäyttäytymisen estotoiminnosta aiemmin tässä luvussa). Siksi pyyhkäisyeleen lisäksi meidän on otettava huomioon muut käytettävissä olevia tapoja navigointi.
Zoomaa ja käännä eleitäKun iPhone ilmestyi ensimmäisen kerran, tyylikkäimmät ominaisuudet olivat zoomaus- ja kiertoeleet. Puristuseleellä (kahden sormen työntäminen ja levittäminen nipistyksen aikana) käyttäjä voi lähentää tai loitontaa sivulla olevaa sisältöä - tämä on yleensä kuva - ja kiertämällä kahta sormea ympyrässä kuvaa voidaan kiertää. .
Laitteissa, joissa ei ole monikosketustukea, zoomaustoiminnot on toteutettava perinteisillä kelluvilla painikkeilla ja liukusäätimillä.
Onneksi iOS 2.0:sta alkaen nämä eleet voidaan havaita turvautumatta matalan tason matematiikkaan kosketustapahtumissa. Taulukko 8.35 luettelee kolme WebKit-laajennusta, jotka ovat käytettävissä tapahtumina. Android-selain on myös lisännyt tuen näille tapahtumille.
Samoja tapahtumia käytetään skaalaukseen ja kiertoon. Kaikki kolme saavat GestureEvent-parametrin. Tällä parametrilla on tyypilliset tapahtumaominaisuudet sekä lisämittakaava- ja kiertoominaisuudet.
Skaalausominaisuus määrittää kahden sormen välisen etäisyyden liukulukukertoimena sen etäisyyden alusta, josta ele alkoi. Jos arvo on suurempi kuin 1,0, se on avoin puristus (lisäys), ja jos arvo on 1,0, se tarkoittaa läheistä puristusta (laskua).
rotaatio antaa kierroksen delta- (etäisyyden) arvon (asteina) aloituspisteestä. Jos käyttäjä kiertää objektia myötäpäivään, saamme positiivisen arvon, ja jos vastaan, arvo on negatiivinen.
Tiedän, mitä ajattelet juuri nyt: "Kierto ja skaalaus on hienoa, mutta mitä hyötyä niistä on, jos työskentelemme HTML:n kanssa?". Tässä avuksi tulevat iOS:n Safarin (ja muiden tuettujen selainten) CSS-laajennukset, joissa on yksi ominaisuus ja kaksi toimintoa, joilla ohjataan sen arvoa: pyöritys ja skaalaus.
Kierrä-funktio ottaa parametrin asteina ja meidän on määritettävä asteen yksikkö luvun jälkeen (esim. rotate(90deg)). Voimme oppia tämän komentosarjasta käyttämällä element.style.webkitTransform.
Katsotaanpa yksinkertaista esimerkkiä:
Eleiden hallintatoiminto ele(event) ( // Pyöristämme arvot kahdella desimaalilla event.target.innerHTML = "Kierto: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round (event .scale*100)/100; // Käytämme muunnosfunktioita elementtiin event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + " scale(" + event .scale + ")";)
Kuinka esimerkki toimii, näkyy kuvassa 8-6. Yhteensopivissa laitteissa voit kiertää ja zoomata kahdella sormella (kaiken sisällön lisäksi). Mutta mikä tässä on ongelma? Muunnostyyliä sovelletaan aina alkuperäiseen elementtiin. Joten jos käytämme elementtiin asteikkoa 2,0 ja lisäämme sitä sitten uudelleen 0,5:llä, uusi arvo on 0,5, ei 1,0, kuten voisimme odottaa.
Riisi. 8.6. Yhdistämällä kosketustapahtumat CSS-muunnoksiin voit kiertää ja skaalata sivustosi elementtejä.
Tyypillistä zoomaus-kiertotapaa varten meidän tulee korvata funktio seuraavalla:
var kierto = 0; var asteikko = 1; funktio ele(tapahtuma) ( event.target.innerHTML = "Kierto: " + Math.round((tapahtuma.kierto+kierto)*100)/100 + " Skaala: " + Math.round((tapahtuma.asteikko*asteikko) *100)/100; event.target.style.webkitTransform = "rotate(" + (tapahtuma.kierto+kierto)%360 + "aste)" + " scale(" + event.scale*scale + ")"; ) funktio eleend(tapahtuma) ( kierto = tapahtuma.kierto+kierto; skaala = tapahtuma.mittakaava*asteikko; )
