Interaktivní zoomování objektů

16.11.2009· Autor: Ondřej Brichta· Počet komentářů: 2

Zvětšení vybrané oblasti objektu patří k zajímavým funkcím například fotogalerií. Dnes si představíme jeden ze způsobů jak takové zvětšování připravit.

Zvětšování části objektů

Přípravě funkce pro zvětšování částí objektu nejprve předchází sestavení samotného principu zvětšování části objektu. Budeme chtít, aby uživatel kliknutím a tažením vymezil oblast, která se mu má zvětšit a to tak, aby levý horní roh vyznačené oblasti byl v levém horním rohu okna aplikace.
Jakmile uživateli umožníme nakreslení oblasti, kterou chce zvětšit, zjistíme si rozměry nakresleného objektu a porovnáme je s rozměry okna aplikace. Máme tak možnost zjistit procentuelní hodnoty zvětšení objektu se kterým chceme pracovat. Pokud nezapomeneme posunout objekt podle bodu kliknutí, máme ve stručnosti funkci přibližování objektu sestavenou.

Ukázková scéna, se kterou budeme dnes pracovat obsahuje samotný objekt obrázku, jehož instance je pojmenovaná „obj", dále objekt ve kterém budeme vykreslovat výběr oblasti pro zvětšení, název instance je „draws" a nakonec tlačítko, pomocí kterého budeme vracet zvětšený objekt do původního stavu. Instance tlačítka má název „btn".

Pojďme do přípravy ActionScriptu:

import caurina.transitions.Tweener;
var centerP:Point = new Point(obj.x,obj.y);
var gr:Graphics = draws.graphics;
var startDrawP:Point;
function startDrawRect(evt:Event):void {
 startDrawP = new Point(this.mouseX,this.mouseY);
 this.stage.addEventListener(MouseEvent.MOUSE_UP,zoomObj);
 this.stage.addEventListener(MouseEvent.MOUSE_MOVE,drawingRect);
}
this.stage.addEventListener(MouseEvent.MOUSE_DOWN,startDrawRect);

Nejprve jsme si připravili funkci, která spustí vykreslování oblasti pro zvětšování. Jakmile uživatel stiskne tlačítko myši, nastaví se výchozí bod kliknutí „startDrawP" který využijeme dále ve funkci která zobrazuje označovanou oblast:

function drawingRect(evt:Event):void {
var w:Number = this.mouseX-startDrawP.x;
var h:Number = this.mouseY-startDrawP.y;
gr.clear();
gr.lineStyle(2,0xff000000);
gr.drawRect(startDrawP.x,startDrawP.y,w,h);
}

V této funkci pouze vykreslujeme tvar, který pohybem myši uživatel označuje.

Nejdůležitější funkcí je pak ta, kterou spouštíme po uvolnění tlačítka myši:

function zoomObj(evt:Event):void {
 gr.clear();
 var endDrawP:Point = new Point(this.mouseX,this.mouseY);
 var proc:Number;
 var difX:Number = (endDrawP.x-startDrawP.x);
 var difY:Number = (endDrawP.y-startDrawP.y);
 var px:Number = this.width/difX;
 var py:Number = this.height/difY;
 if (py>px) {
 proc = px;
 } else {
 proc = py;
 }
 if (proc!=Infinity&&proc>0) {
 //výpočet konečných rozměrů a souřadnic
 var endPa:Point = obj.globalToLocal(startDrawP);
 var endScX:Number = obj.scaleX+proc;
 var endScY:Number = obj.scaleY+proc;
 var endX:Number = centerP.x- endPa.x*endScX;
 var endY:Number = centerP.y - endPa.y*endScY;
 //animace pomocí Tweener třídy
 Tweener.addTween(obj,{scaleX:endScX, time:1});
 Tweener.addTween(obj,{scaleY:endScY, time:1});
 Tweener.addTween(obj,{x:endX, time:1});
 Tweener.addTween(obj,{y:endY, time:1});
 }
 this.stage.removeEventListener(MouseEvent.MOUSE_UP,zoomObj);
 this.stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawingRect);
}

 

Po dokončení vykreslování zjistíme novou pozici kurzoru myši (bod endDrawP) a podle ní spočítáme rozměry a procentuální velikost nakresleného objektu vůči scéně. Abychom se vešli se zvětšenou oblastí do okna, zjistíme si menší z obou rozměrů a podle něj provedeme zvětšení a posun objektu.
Nezapomeneme otestování nekonečné hodnoty (kliknutí a uvolnění tlačítka na stejném místě) a záporných hodnot (vykreslení oblasti ve směru zprava doleva).

Ke zvětšení objektů použijeme Tweener třídu, která nám umožní efektní animaci zvětšování části objektu.

Nakonec nezapomeneme doplnit funkci pro návrat do původního stavu a připojíme jí k tlačítku „btn":

function resetObj(evt:Event):void {
 Tweener.addTween(obj,{scaleX:1, time:1});
 Tweener.addTween(obj,{scaleY:1, time:1});
 Tweener.addTween(obj,{x:centerP.x, time:1});
 Tweener.addTween(obj,{y:centerP.y, time:1});
}
btn.addEventListener(MouseEvent.CLICK,resetObj);

Výsledná animace pak vypadá takto:

 

Zdrojové soubory jsou k dispozici zde: zoomObj.zip

Komentáře k článku
kraasa, ale	bbarmann | 16.11.2009 18:48
ahoj	CECIL | 18.4.2010 8:25