where the magic happens...
var newX:Number = (Datalayer.MASK_WIDTH / 2) - ((e.obj.x + x) * __scalefactor) - ((e.obj.width / 2) * __scalefactor);
var newY:Number = (Datalayer.MASK_HEIGHT / 2) - ((e.obj.y + y) * __scalefactor) - ((e.obj.height / 2) * __scalefactor);
....
en animeren maar:
eaze(_world)
.to(.8, { scaleX: __scale, scaleY: __scale, x: newX, y: newY } )
.easing(easing)
.onStart(HandlerLoadList);
-----------------
De berekening van de nieuwe punten is geen rocket-science. Je wilt altijd naar het midden toe zoomen mits mogelijk, dus daarom de hoogte en breedte van het masker gedeeld door 2. Daar trek ik de x positie van het land (e.obj) af minus de x positie van het continent (x), maal de berekende schaalfactor (elk land heeft een andere grootte en moet qua hoogte uitvullen over heel het masker). Daar moet de breedte/2 van het land nog een keer van af om in het midden uit te komen. Vervolgens gooi ik er een tween tegen aan en voila! In combinatie van een aardige easing, ziet het er leuk uit
Ik weet 't.. hier heb je waarschijnlijk geen zak aan. Maar kort door de bocht komt 't er op neer dat je misschien af moet stappen van ExtJS en met behulp van de animate-functie in Jquery tweenen (of ExtJS heeft ook animeer-mogelijkheden?). De plattegrond wordt een absoluut gepositioneerde plaat, waarvan je (doe je nu ook al) nieuwe width en height toepast, afhankelijk hoe diep je zoomt (houd je met een globale factor bij). Bereken de nieuwe X en Y van die plaat op basis van x en y positie van de mousepointer en animeer daar naar toe. Dat speelt zich allemaal binnen een container af met vast hoogte en breedte (het masker dus).
Het is belangrijk dat je een paar factoren continu bijhoudt. X en Y positie van de muis bijvoorbeeld, die verandert in verhouding als je gaat inzoomen, etc.. zo moet je alles in verhouding opnieuw gaan uitrekenen. Events kloppen verder wel (draggen, wheel, clicks.. misschien nog een dubbelclick toevoegen om stapsgewijs in te zoomen), daar moet je niets meer aan doen.
't is even keihard klooien en testen.. steeds goed debuggen en stap voor stap kijken of het resultaat gewenst is.
Pleur heel het verhaal in een canvas en je hebt een HTML5 apparaat in elkaar geflanst!
haha
