zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Zoom-Geste in Javascript: Zoom-in und Zoom-out um Object zu skalieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.04.2012, 11:44
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard Zoom-Geste in Javascript: Zoom-in und Zoom-out um Object zu skalieren

Hallo Leute,
eine wahrscheinlich einfache Frage auf die ich bisher keine Lösung gefunden habe.

Ich will per pinch-zoom auf meinem iPhone Werte erhöhen!
In meinem spezifischen Testfall will ich die Breite eines div`s einfach vergrößern oder verkleinern.

Das funktioniert ansatzweise damit:

PHP-Code:
$(document).ready(function() {

        var 
dom document.body,
            
scale;

        
dom.addEventListener("gesturechange"gestureChangefalse);

        function 
gestureChange(event) {

            
event.preventDefault();

            
scale event.scale;
            
console.log(scale//somewhere between 0 and 3 on my iPhone
            
$('#test').width(20*scale+"px");

        }

    }); 
D.h. wenn ich das auf meinem iPhone teste, dann skaliert sich mein div in der Breite von 20px weg multipliziert mit dem scale-Wert vom event selbst.

Ich schaffe es einfach nicht mir zusammen zu denken wie ich das lösen muss, damit ich beim nächsten zoom vom vergrößerten Wert weg skaliere!

Stellt euch folgenden Ablauf vor.
1.) Ich mache eine zoom-in Geste und vergrößere das div
2.) Ich setze meine Finger neu an und will es weiter vergrößern und weiter reinzoomen.

Genau hier scheitert mein Ding, denn natürlich skaliert mein Ding beim zweiten Zoom wieder vom Anfangswert weg! Also es wird wieder beim 20px*scale gestartet.

Wie kann ich das Zoom-Verhalten so steuern, dass es eben logischerweise vom wiederum vom aktuellen Vergrößerungsgrad nach oben skaliert wird?

Natürlich sollte das auch beim Zoom-out der Fall sein!

Danke für die Hilfe!
Sepp
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.04.2012, 12:52
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Du darfst den Wert nicht fest reinschreiben, sondern brauchst dafür eine Variable (die kannst du z.B. dort definieren, wo du auch "scale" anlegst). Nach dem Vergrößern setzt du diese Variable dann auf variable * scale und hast somit den skalierten Wert als Ausgangspunkt für die nächste Änderung.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.04.2012, 20:59
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard

Danke inta, das hat mir sehr geholfen!

Trotzdem muss ich nochmals fragen:
Ich habe das script jetzt so umgebaut, dass es die Schriftgröße am iPhone skaliert. Also ich habe per meta-tag das "scalable" auf false gesetzt, so dass der Inhalt selbst nicht vergrößert werden kann - ich will aber dem User ermöglichen die Schriftgröße per pinch zu vergrößern.

von einem Startwert weg bis zu einem Maximalwert!
Das scheint jetzt eigentlich fast problemlos zu laufen, nur kommt mir vor das Ganze ein wenig schnell vor. Also die Übersetzung von pinch in Schriftgröße skaliert viel zu schnell hoch. Wie kann ich die Werte weniger schnell hochrechnen lassen?

PHP-Code:
$(document).ready(function() {
    
    var 
dom document.body,
        
fs 16,
        
min 16,
        
max 100,
        
scale;
    
    
dom.addEventListener("gesturechange"gestureChangefalse);

    function 
gestureChange(e) {
        
        
e.preventDefault();
        
        
scale e.scale;
        
fs Math.round(fs*scale);
        
        if ( 
fs <= max && fs >= min )
            $(
'#p').css('font-size'fs+'px');
        
        if ( 
fs max fs max;
        if ( 
fs min fs min;
    }

}); 
Siehst du vielleicht sonst auf die Schnelle noch Fehler oder etwaige Unschönheiten an meinem Code? Kann man das besser lösen?

Danke vielmals
Mit Zitat antworten
  #4 (permalink)  
Alt 08.04.2012, 10:09
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Fehler sehe ich keine, du multiplizierst aber deine fs (font size?) direkt mit dem scale-Wert, daher die schnelle Vergrößerung. Hier kannst du ansetzen und den scale-Wert verkleinern (z.B. mit irgendwas kleiner 1 multiplizieren), da musst du wohl ein bisschen probieren wann dir die Vergößerung angenehm erscheint.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.04.2012, 11:36
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.07.2009
Beiträge: 469
sepp88 befindet sich auf einem aufstrebenden Ast
Standard

Danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
URL mit XML in (X)HTML ausgeben blockmarc (X)HTML 17 05.06.2010 17:39
Fly out Menu - mit Peterned´s csshover.htc oder Suckerfish JavaScript? Chico_wau CSS 2 07.07.2008 23:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:47 Uhr.