13.5 Ändra storlek
Detta exempel bygger vidare på exempel 13.4 del b, där man kan dra runt olika rutor med bilder. Det tillägg som görs här är att man nu kan ändra storlek på elementen och därmed förstora eller förminska bilderna. Det kommer också ske med pointer events, så det blir här en kombination av olika pekaroperationer. Storleksförändringen kan göras på tre olika sätt:
- Hålla ner skifttangenten och dra i elementet.
- Först dubbelklicka på elementet, för att markera det, och sedan dra i elementet.
- Använda två fingrar och dra ihop eller isär dem.
20 min.
Sammanfattning
Dubbelklick hanteras i funktionen clickBox på samma sätt som det visades i exempel 13.4 del a. Markering av elementet görs genom att lägga till en klass kallad marked, som dels ger en visuell feedback och dels används för att sedan i pointerStart detektera att elementet är markerat.
I pointerStart kontrolleras först om två pekare används. I så fall ska en storleksförändring med pinch/spread göras och i händelselyssnaren för pointermove används funktionen pinchSpread. Annars är det en pekare och då kontrolleras om skifttangenten är nedtryckt eller om elementet är markerat. I så fall ska en storleksförändring göras och i händelselyssnaren för pointermove används funktionen pointerSize. Annars ska elementet förflyttas, då det dras och i händelselyssnaren för pointermove används funktionen pointerMove. Det anropas alltså olika funktioner på händelsen pointermove, beroende på vilken gest som detekterats.
Funktionen pointerMove
Denna funktion förflyttar elementet på exakt samma sätt som i exempel 13.4 del b, vilket i sin tur byggde på exempel 13.2.
Funktionen pointerSize
Denna funktion tar fram ett nytt värde för elementets bredd och lägger in det i style.width. Man kan också ta fram en ny höjd på samma sätt och lägga in det i style.height, men i detta fall ska höjden vara auto (vilkent redan är inlagt i CSS-koden), så att bilden behåller sina propotioner och höjden bestäms automatiskt.
Funktionen pinchSpread
Här beräknas avstånd mellan pekarna och det avgörs om det är gesten pinch eller spread på samma sätt som i exempel 13.4 del e. Storleken kommer då att minskas eller ökas och nytt värde läggs in i style.width. För att elementet ska vara centrerat, justeras style.left och style.top med hälften av storleksförändringen.
Egna övningar
Ingen övning i detta exempel.