Zoomen bij image: Centreren

[Guillome]

Hallo,
Ik ben bezig om een soort van image viewer te maken.
Je kan zoomen met je scrollbutton. Als je zoomt, valt een groot stuk buiten beeld.
Maar nu wil ik dat het middelpunt van het deel wat je ziet, het middelpunt blijft.
Hoe krijg ik dit voor elkaar?
Ik maak het in Flash (hoort dus in Webdesign, maar dit is wel erg programmeren vind ik).

Ik heb een veld van (bijvoorbeeld) 400 bij 400 pixels waarin de afbeelding getoond wordt.
Ik zoom zover, totdat de afbeelding op 800*800 staat. Dus ik zie 1/4 van de afbeelding. Stel ik scroll nu 75% naar rechts. Als ik dan ga zoomen, moet de horizontale scrollbalk ook op 75% blijven staan.

[gorgi_19]

Ik maak het in Flash (hoort dus in Webdesign, maar dit is wel erg programmeren vind ik).

Ik zie hier weinig in wat in Programming & Webscripting thuis hoort, dus

>> Webdesign & Graphics

[André]

Je weet wat het middelpunt is van je viewport, zorg dan dat na het inzoomen dat punt weer in het midden staat door op de juiste manier te scrollen. Zo moeilijk kan dat toch niet zijn? Of vraag je je meer af hoe die code er uit zou moeten zien?

[Guillome]

Nou het staat in een scrollpane.
Je kan niet zeggen van scroll_x = 75% ofzo. scroll_x wordt aangegeven met pixels. Maar hoe groter hij wordt, hoe meer pixels er buiten vallen. Ik vraag me dus af hoe de code/formule is.
Ik heb alleen de scrollpositie in pixels en de left en de width van de afbeelding

[André]

Een afbeelding is 400*400 en ik zoom in naar 800*800, daarna ga ik naar rechts waardoor 600,600 mijn midden wordt. Dan zoom ik weer in naar 1600*1600, mijn midden moet nu (600 keer 2) 1200*1200 worden. Dus dan word in een viewport van 400*400 de scroll_x -1000 (1200 is midden, min 200 tot linkerkant = 1000, dus x coordinaat -1000).

Zo?

[Guillome]

Hmm opzich klinkt dit heel logisch. Ik ga het even testen. Alvast bedankt voor je inzicht!

[OzBoz]

Met Andre, gewoon zorgen dat middelpunt van je plaatje steeds opzelfde positie gezet wordt.

[Guillome]

Zo lijkt ie bijna wel te kloppen:

code:

function zoom(z)
{
    mc = scrollpane.getScrollContent();
    if (z <= -1) z = -1; else if (z >= 1) z = 1;
    if (z == -1 and mc._width <= _parent.img_viewer_width) return;
    
    scrollx = mc._width / scrollpane.getScrollPosition().x;
    scrolly = mc._height / scrollpane.getScrollPosition().y;
    
    mc._xscale += z * 10;
    mc._yscale += z * 10;
            
    scrollpane.refreshPane();   
  scrollpane.setScrollPosition(mc._width / scrollx, mc._height / scrolly);
}