Rahmen im Bild ziehen

[T-Rex]

frohes neues Jahr :),

auf dem Windows Desktop gibt es ein schönes "Feature" nenne ich es mal. Wenn man da die Maustaste gedrückt hält und die Mausbewegt sieht man einen Bereich mit einem Rahmen eingegrenzt. (Damit kann man mehrere Icons z.B. selektieren, aber das soll hier nicht das Thema sein)
Ich würde so einen Rahmen gerne in einem <img> nachbauen. Sprich mal klickt im Bild irgendwo hin und wenn man die Maus bewegt soll ein Rahmen gezogen werden. Wobei der Rahmen auch nicht mal notwendig ist...

Im Moment ist es bei mir so, dass ich die Maustaste drücke und gedrückt halte. Sobald ich die Maus bewege ändert sich mein Mauszeiger zu so einer art Einbahnstrassenschild. Das Resultat, onmousedown und onmouseup haben den gleichen wert xpage wert :(. Und genau das will ich nicht. Ob da jetzt noch ein Rahmen um die gezogenen Sachen sind ist mal nicht so wichtig, wichtig ist nur, dass ich 2 X Werte und 2 Y werte bekomme mit denen ich ein Rechteck bestimmen kann und zwar mit onmousedown und onmouseup :).

Danke für die Bemühungen

[Norbert]

Hallo,

wichtig ist nur, dass ich 2 X Werte und 2 Y werte bekomme mit denen ich
ein Rechteck bestimmen kann und zwar mit onmousedown und onmouseup :).

hmm,
warum klammerst Du Dich so an diese Events?
Zuerst brauchst Du eine Mausueberwachung, welche Dir Koordinaten liefert.
Ist die Maustaste gedrueckt nimmst Du das erste Paar und merkst es Dir.
Das zweite Wertepaar und alle nachfolgenden notierst Du als zweites Paar.
Laesst der User die Maustaste wieder los, hast Du sofort Dein Rechteck.

Das mit der Mausueberwachung steht irgendwo beim Muenz, muttu gucken.
Den Rahmen wirst Du Dir vorstellen muessen ... ;-)
HTH

Gruss und Dank
Norbert

[T-Rex]

Danke ihr zwei :).

@ Norbert:

Das problem ist nur, sobald ich die Maus gedrückt halte und gleichzeitig die Maus bewege, wird die Maus werden die Eventhandler "ausgeschaltet" oder so...
Auf jeden Fall ist dann keine Aktion möglich. Es ist fast so, als ob der Browser versucht das Bild per Drag&Drop weg zu ziehen, was ja nicht geht.

Ich hab das Problem jetzt so gelöst, das ich weg von den "mouse"-zeugs bin und hin zum onclick event. Ich hab mir eine "unsichtbare" div box gebaut. Wenn ich auf ein Bild klicke, wird die Divbox sichtbar und bekommt einen roten rahmen. Die divbox hat die style werte "position: absolute" + die x-y korrdinaten als left und top der Mauskorrdinaten. Jetzt kann man einen Rahmen bzw. diese Div-Box ziehen. Klickt man nochmal kann man das gleiche spiel nochmal machen, jedoch setzt man dann die Breite und Höhe der divbox, was ja irgendwie dem zweiten x-y paar für den rechten unteren punkt gleichkommt.
Ist zwar nicht so toll, als wenn man diesen Rahmen mit gedrückter Maustaste zieht, wie man es von windows gewöhnt ist, doch besser wie nix :).

[Struppi]

Ich würde so einen Rahmen gerne in einem <img> nachbauen. Sprich mal klickt im Bild irgendwo hin und wenn man die Maus bewegt soll ein Rahmen gezogen werden. Wobei der Rahmen auch nicht mal notwendig ist...

Dieser Rahmen nennt sich Rubberband, ich hab mal einen gebaut er kommt hier zum Einsatz.

Struppi.

[Norbert]

Hallo Struppi,

Dieser Rahmen nennt sich Rubberband, ich hab mal einen gebaut er
kommt hier zum Einsatz.

super,
nun noch zwei Fragen:

• Dass das Rubberband nur von links/oben nach rechts/unten ordentlich
    funktioniert, weisst Du sicherlich. Kann man das aendern ?
• Koennte man so ein Band auch fuer die komplette Seite bauen?

Gruss und Dank
Norbert

[ChrisB]

Hi,

Dieser Rahmen nennt sich Rubberband, ich hab mal einen gebaut er
kommt hier zum Einsatz.
super,
nun noch zwei Fragen:

• Dass das Rubberband nur von links/oben nach rechts/unten ordentlich
    funktioniert, weisst Du sicherlich. Kann man das aendern ?

Ja, sicher.
Muss man halt u.a. die Berechnung der Breite/Hoehe entsprechend anpassen, die derzeit von den aktuellen Koordinaten die Startkoordinaten abzieht - da kommen bei der "falschen" Richtung natuerlich negative Werte heraus, was man dann entsprechend behandeln muesste.

• Koennte man so ein Band auch fuer die komplette Seite bauen?

Warum sollte man nicht?

MfG ChrisB

[Struppi]

Dieser Rahmen nennt sich Rubberband, ich hab mal einen gebaut er
kommt hier zum Einsatz.
super,
nun noch zwei Fragen:

• Dass das Rubberband nur von links/oben nach rechts/unten ordentlich
    funktioniert, weisst Du sicherlich. Kann man das aendern ?

Ja, sicher. Macht aber die Berechung wesentlich komplizierter

• Koennte man so ein Band auch fuer die komplette Seite bauen?

Klar, es muss nur der Event am Ende von rubber.js entsprechend angepaßt werden:

document.onmousedown = function(e) {  
if(!e) e = window.event;  
return Rubber.start(e);  
};  

Struppi.

[Der Martin]

Hallo Struppi,

• Dass das Rubberband nur von links/oben nach rechts/unten ordentlich funktioniert, weisst Du sicherlich. Kann man das aendern ?
  Ja, sicher. Macht aber die Berechung wesentlich komplizierter

wesentlich komplizierter? Eigentlich nicht. Man muss in jedem Fall zwei Koordinatenpaare merken (eines onmousedown und eines onmouseup), und die Koordinaten dann ggf. vertauschen. Mehr ist eigentlich nicht dahinter.

Das ist ein Denk- oder Arbeitsschritt mehr, aber deswegen von "wesentlich" zu sprechen, halte ich für übertrieben.

Schönes Wochenende,
 Martin

[Struppi]

Hallo Struppi,

• Dass das Rubberband nur von links/oben nach rechts/unten ordentlich funktioniert, weisst Du sicherlich. Kann man das aendern ?
  Ja, sicher. Macht aber die Berechung wesentlich komplizierter

wesentlich komplizierter? Eigentlich nicht. Man muss in jedem Fall zwei Koordinatenpaare merken (eines onmousedown und eines onmouseup), und die Koordinaten dann ggf. vertauschen. Mehr ist eigentlich nicht dahinter.

Natürlich ist da mehr dahinter. Es reicht nicht die Koordinaten zu vertauschen. (die Position beim mouseup interessiert überhaupt nicht)

In der einfachen Variante reicht es die Differenz zwischen Startpunkt und aktuellem Event zu ermitteln und dem Rubberband Objekt die entsprechende Breite zuzuweisen, werden die Werte negativ muss zusätzlich noch eine neue Position berechnet werden (Startpunkt - aktuelle Position).

Das ist ein Denk- oder Arbeitsschritt mehr, aber deswegen von "wesentlich" zu sprechen, halte ich für übertrieben.

Kommt drauf an was man kann und der OP machte nicht den Eindruck sowas aus dem Ärmel zu schütteln.

Struppi.