"gummiband" bei img?

[bense]

hallo zusammen!

gibt es eine möglichkeit, über einem image mit klick ein "gummiband", halt einen rahmen dargestellt wird? also wie wenn ich in windows dateien markiere? ich möchte danach die anfangskoordinaten und die schlusskoordinaten mit den entsprechenden event-handlern auslesen, das ist dann kein problem mehr. aber vom "dynamische Rahmen" oder wie man auch immer sagt habe ich noch nichts gefunden.

danke und gruss

[HTMLton]

gibt es eine möglichkeit, über einem image mit klick ein "gummiband", halt einen rahmen dargestellt wird? also wie wenn ich in windows dateien markiere? ich möchte danach die anfangskoordinaten und die schlusskoordinaten mit den entsprechenden event-handlern auslesen, das ist dann kein problem mehr. aber vom "dynamische Rahmen" oder wie man auch immer sagt habe ich noch nichts gefunden.

hi

keine ahnung, was du meinst, aber mach doch einfach eine map drüber

gruss

[bense]

Eine map nützt mir leider überhaupt nichts. das ganze brauche ich, um ein bildausschnitt auszuschneiden. also das ganze ist nur für den user, damit er den bildausschnitt sieht, den er auswählt. weisst du jetzt, was ich meine? wenn du in windows klickst und ziehst, bekommst du auch so ein "gummiband".

[Alexander Foken]

Moin Moin !

Eine map nützt mir leider überhaupt nichts. das ganze brauche ich, um ein bildausschnitt auszuschneiden. also das ganze ist nur für den user, damit er den bildausschnitt sieht, den er auswählt. weisst du jetzt, was ich meine? wenn du in windows klickst und ziehst, bekommst du auch so ein "gummiband".

Das könnte funktionieren -- mit beliebig viel Aufwand, um per DOM neue Elemente über das Bild zu legen und um mit Javascript-Event-Handlern auf Mausaktionen zu reagieren. Das wird dann natürlich auch beliebig langsam.

Der Ansatz mit der Map ist nicht schlecht, damit könntest Du einige interessante Zooms vorgeben. Oder aber wiederum per Javascript zwei Punkte mit hilfe der Map auswählen und daraus den Zoom basteln.

Wie willst Du den Zoom überhaupt realisieren?

Alexander

[bense]

Eigentlich funktioniert das ganze schon. man kann den zoomfaktor eingeben, anhand von dem wird dann mit document.getElementById('xy').style.width. bzw. height das bild direkt vergrössert oder verkleinert. ich lasse per javascript der maus ein div-objekt folgen, das den ausschnitt markiert. dann bei onclick lese ich die maus-koordinaten aus, übergebe diese samt dem aktuellen grösse des bildes an ein php-skript, mit dem ich dann das bild definitiv vergrössere und zuschneide.

jetzt möchte ich aber anstatt dem fest vorgegebenen div-objekt ein dynamischen "rahmen" verwenden. ich kann ja dann bei onmousedown die maus-koordinaten auslesen und bei onmouseup wieder und das bild dann so schneiden. das problem ist nur, dass der user ja ohne diesen dynamischen rahmen nicht sieht, was er ausschneidet.

komplizierte erklärung, hä?

[Alexander Foken]

Moin Moin !

Eigentlich funktioniert das ganze schon. man kann den zoomfaktor eingeben, anhand von dem wird dann mit document.getElementById('xy').style.width. bzw. height das bild direkt vergrössert oder verkleinert. ich lasse per javascript der maus ein div-objekt folgen, das den ausschnitt markiert. dann bei onclick lese ich die maus-koordinaten aus, übergebe diese samt dem aktuellen grösse des bildes an ein php-skript, mit dem ich dann das bild definitiv vergrössere und zuschneide.

jetzt möchte ich aber anstatt dem fest vorgegebenen div-objekt ein dynamischen "rahmen" verwenden. ich kann ja dann bei onmousedown die maus-koordinaten auslesen und bei onmouseup wieder und das bild dann so schneiden. das problem ist nur, dass der user ja ohne diesen dynamischen rahmen nicht sieht, was er ausschneidet.

komplizierte erklärung, hä?

Ja, in der Tat. Mit etwas mehr Großbuchstaben hätte ich mir vielleicht sogar die Mühe gemacht, sie mehr als einmal zu lesen.

Versuch es mit zwei Markern, die Du über das Bild legst. Der erste Klick setzt einen Eckpunkt eines Rechtecks, der zweite Klick den zweiten Eckpunkt und startet dann den Zoom-Vorgang.

Das Bild (ziemlich leer):
+---------------------+
|                     |
|                     |
|                     |
|                     |
|                     |
+---------------------+

Nach dem erstern Klick:
+---------------------+
|   #                 |
|###1#################|
|   #                 |
|   #                 |
|   #                 |
|   #                 |
|   #                 |
+---------------------+

Nach dem zweiten Klick:

+---------------------+
|   #     #           |
|###1#################|
|   #     #           |
|   #     #           |
|#########2###########|
|   #     #           |
|   #     #           |
+---------------------+

Ob Du den Zoom mit dem zweiten Klick startest, oder dem User erlaubst, noch an der Auswahl zu drehen, ist natürlich Dir überlassen. Auf jeden Fall solltest Du einen Weg vorsehen, eine falsche erste Markierung wieder zu löschen.

Alexander

[bense]

Hi nochmals...

So, nun mit etwas mehr Grossbuchstaben: vielleicht verstehe ich dich falsch, aber peile nicht ganz, was du mit Marker meinst. Aber wahrscheinlich wird es ja zu kompliziert, mir das hier zu erklären, oder?

Nochmals, das Problem sind nicht die Koordinaten, die bekomme ich schon raus, aber dem User seinen gewählten Ausschnitt klarzumachen ist schwierig...

Danke jedenfalls und falls du doch Lust hast, einen JS-Looser das zu erklären...nur her damit!

[Alexander Foken]

Moin Moin !

So, nun mit etwas mehr Grossbuchstaben:

Na also, geht doch!

vielleicht verstehe ich dich falsch, aber peile nicht ganz, was du mit Marker meinst. Aber wahrscheinlich wird es ja zu kompliziert, mir das hier zu erklären, oder?

Nee. In dem Moment, wo der User eine Ecke des zu zoomenden Bereichs anklickt, legst Du zwei Linien parallel zu den Bildkanten über das Bild, die sich genau in der Ecke des zu zoomenden Bereichs kreuzen. Diese Linien markieren die Kanten des Bereichs (deswegen "Marker"). Der zweite Klick in der diagonal gegenüberliegenden Ecke legt zwei weitere Linien über das Bild. Damit hast Du den Zoom-Bereich in einem Rechteck.

Das mag nicht ganz so elegant sein wie per Drag-and-Drop, aber ich habe schon mit einigen Programmen gearbeitet, die genau so funktionieren.

Nochmals, das Problem sind nicht die Koordinaten, die bekomme ich schon raus, aber dem User seinen gewählten Ausschnitt klarzumachen ist schwierig...

Deswegen die Linien über das ganze Bild. Das erste Linienpaar markiert auf jeden Fall zwei Kanten des ausgewählten Ausschnitts. Der Mauspfeil ist dann die gegenüberliegende Ecke. Das ist schwerer zu erklären als zu sehen. Deswegen auch die ASCII-Grafiken im letzten Posting.

Alexander

[Axel Richter]

Hallo,

Eigentlich funktioniert das ganze schon. man kann den zoomfaktor eingeben, anhand von dem wird dann mit document.getElementById('xy').style.width. bzw. height das bild direkt vergrössert oder verkleinert. ich lasse per javascript der maus ein div-objekt folgen, das den ausschnitt markiert. dann bei onclick lese ich die maus-koordinaten aus, übergebe diese samt dem aktuellen grösse des bildes an ein php-skript, mit dem ich dann das bild definitiv vergrössere und zuschneide.

Wenn Du die Maus ohnehin schon beobachtest, dann kannst Du Deine div-Größe dynamisch der Mausposition anpassen. Etwa so:

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
var x = 0;
var y = 0;
var sx = 0;
var sy = 0;
var move = false;

document.onmousemove = mousemove;

function mousemove(e) {
 if(e) {
   x=e.pageX?e.pageX:e.clientX?e.clientX:0;
   y=e.pageY?e.pageY:e.clientY?e.clientY:0;
 } else if(event) {
   x=event.clientX;
   y=event.clientY;
 } else {
   x=0;
   y=0;
 }
 if (move) {
   document.getElementById("clip").style.width=Math.abs(sx-x)+"px";
   document.getElementById("clip").style.height=Math.abs(sy-y)+"px";
 }
 window.status = x + ":" + y;
}

function startclip() {
 sx = x;
 sy = y;
 document.getElementById("clip").style.top=sy+"px";
 document.getElementById("clip").style.left=sx+"px";
 move = true;
}

function stopclip() {
 move = false;
}
//-->
</script>
</head>
<body onmousedown="startclip();" onmouseup="stopclip();">
<div id="Bild" style="position:absolute; top:100px; left:100px; width:400px; height:400px; background-color:#00AEAD;"></div>

<div id="clip" style="position:absolute; top:0; left:0; width:0; height:0; line-height:0; font-size:0; border:1px dotted black;"></div>
</body>
</html>

Das geht nur sinnvoll, wenn man die Maus von links oben nach rechts unten zieht ;-)), bringt allerdings anders herum auch keine Fehler. Es könnte, allerdings aufwendig, noch verbessert werden.

viele Grüße

Axel

[Michael Schröpl]

Hi Axel,

Das geht nur sinnvoll, wenn man die Maus von links oben nach rechts unten zieht ;-)),

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.

Viele Grüße
      Michael

[Michael Schröpl]

...

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.

... 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.

Viele Grüße
      Michael

[Axel Richter]

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