Axel Richter: "gummiband" bei img?

Beitrag lesen

Hallo Michael,

wenn zu Beginn der Zoom-Phase die Klick-Koordinate gespeichert und im onmousemove-Event dynamisch die andere Ecke bestimmt wird, dann kann die entsprechende Funktion durch einfachen Vergleich der x- und y-Koordinaten herausfinden, welche von beiden diejenige "links oben" sein soll - dann sollte das "Ziehen" in beide Richtungen funktionieren.

Ja, das meinte ich mit: ...könnte, allerdings aufwendig, noch verbessert werden... Naja, der Aufwand ist beherrschbar ;-))

sx und sy sind die Startwerte
x und y sind die aktuellen Mauspositionen

Bisher verändere ich ja nur die Größe des Bereichs. Die Position top und left bleibt auf sx, sy. Jetzt müsste man folgende Fälle unterscheiden:

Wenn sx<=x und sy<=y, dann
   top=sx, left=sy, width=x-sx, height=y-sy
Wenn sx>x und sy>y, dann
   top=x, left=y, width=sx-x, height=sy-y
Wenn sx<=x und sy>y, dann
   top=sx, left=y, width=x-sx, height=sy-y
Wenn sx>x und sy<=y, dann
   top=x, left=sy, width=sx-x, height=y-sy

...
 if (move) {
   if (sx<=x && sy<=y) {
     document.getElementById("clip").style.top=sy+"px";
     document.getElementById("clip").style.left=sx+"px";
     document.getElementById("clip").style.width=(x-sx)+"px";
     document.getElementById("clip").style.height=(y-sy)+"px";
   } else if (sx>x && sy>y) {
     document.getElementById("clip").style.top=y+"px";
     document.getElementById("clip").style.left=x+"px";
     document.getElementById("clip").style.width=(sx-x)+"px";
     document.getElementById("clip").style.height=(sy-y)+"px";
   } else if (sx<=x && sy>y) {
     document.getElementById("clip").style.top=y+"px";
     document.getElementById("clip").style.left=sx+"px";
     document.getElementById("clip").style.width=(x-sx)+"px";
     document.getElementById("clip").style.height=(sy-y)+"px";
   } else if (sx>x && sy<=y) {
     document.getElementById("clip").style.top=sy+"px";
     document.getElementById("clip").style.left=x+"px";
     document.getElementById("clip").style.width=(sx-x)+"px";
     document.getElementById("clip").style.height=(y-sy)+"px";
   }
 }
...

... und wenn von links unten nach rechts oben (oder umgekehrt) gezogen wird, dann funktioniert es immer noch: Die linke obere Ecke hat dann das Minimum der X- und beider Y-Koordinaten beider Punkte, die rechte untere Ecke das Maximum. In diesem Falle ist die linke obere Ecke dann identisch mit keinem der beiden Zoom-Punkte und muß ständig berechnet werden.

Ja, man kann sogar im Kreis ziehen ;-))

viele Grüße

Axel