Beliebigen Bereich in Image selektieren

papalangi_44 · 13.01.2010, 19:57

Hallo, ich habe folgende Problem:

Ich habe eine Seekarte (als Backgroundimage) Darüber befindet sich ein
canvas in dem der Benutzer eine Route anklicken kann. Diese Route zeichne ich mit Hilfe von wz_grapics in der Seekarte. Kurse, Entfernung, Dauer werden berechnet und in einer Tabelle abgelegt. Diese wird dann per Ajax als PDF erzeugt. Es wird auch das Image mit den eingezeichneten Kursen in der PDF abgelegt.
Da dann u.U. der gesamte westliche Teil der Ostsee auf DIN A4 Größe gebracht wird, möchte ich auch den relevanten Ausschnitt der Seekarte in die PDF bringen.

- Der Anwender soll dazu mit der Maus den Bereich selektieren.
- Dabei wird der ausgewählte Bereich mit einem Rahmen versehen,
bekommt eine andere Hintergrundfarbe und ist transparent.

Wichtig: es ist ein Eventhandler onmousemove auf die Karte registriert, der permanent die Koordinaten der augenblicklichen
Mausposition berechnet (Breite, Länge)und anzeigt

Mein Lösungsversuch :
- ich erzeuge ein hidden Div
- wenn der Benutzer auf den pdf-Button klickt registriere ich einen mousedown-Eventhandler auf die Hintergrundkarte
- Beim nächsten Mousedown wird die obere linke Ecke des hidden div
auf die Position der Mausgelegt und das Div visible geschaltet.
- Es werden zusätzliche Handler registriert.
- ein Mousemove-Handler, der die widht und height Attribute des Divs ändert.
- ein mouseup-Handler,
-ein mouseout-Handler (der Anwender soll ja nur einen Ausschnitt der Karte markieren)
In beiden Fällen möchte ich die Mausposition speichern, damit ich
den Ausschnitt berechnen und an die Pdf-Erzeugung übergeben kann.

Probleme:
- Ich bekomme immer sehr schnell ein mouseout-Event, obwohl
sich die Maus noch über der Karte befindet und das zeichnen erfolgt nicht schnell genug.
-Das Zeichen des Divs erfolgte mit fast befriedigender Geschwindigkeit, als ich die Events noch fest an an das div gekoppelt hatte. Ich habe das aber rausgenommen, damit ich mehrere Handler registrieren kann.

Meine Fragen:
- ist der Ansatz so ok oder gibt es einen einfachen Weg per javascript
den Bereich zu selektieren und optisch anzuzeigen?

- woran kann es liegen, dass ich die Mouseout-events bekomme?
- Kann es daran liegen, das ich mir debug-Outputs in eine Textarea schreibe?

Hat jemand damit Erfahrung oder eine Idee?

Vielen Dank im voraus

papalangi_44

kn0wledge · 13.01.2010, 21:46

Falls die jQuery verwendest hier :

jQuery.DeepZoom - http://nibblersrevenge.cluss.de

Quellcode anschauen, oder einfach dieses Plugin direkt übernehmen, steht unter der MIT Lizenz und darf damit auch für so ziehmlich alles verwendet werden.

papalangi_44 · 13.01.2010, 22:16

Nein, ich verwende nicht jQuery. Für AJAX-Request verwende ich prototype.
Obwohl ich damit auch nicht sehr glücklich bin (erzeugt mir zuviel Warnings in der Konsole. Sehen die sich das nie an?

)
Ich habe das Beispiel mal aufgerufen, ist so etwa das was ich will, aber ich möchte nicht noch ein Framework verwenden. Ich möchte verstehen was da abgeht.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfängerfrage: Passwortgeschützter Bereich mit unterschiedlichen Rechten	mcgeddy	PHP Tipps 2009	6	26.10.2009 13:45
PHP-Programmierer Bereich Marketing (m/w) - Hamburg	selectedminds	Beitragsarchiv	0	19.09.2009 01:51
variable mit onclick an php	drombusch	PHP Tipps 2009	8	30.08.2009 14:45
[Erledigt] PHP Image Upload & Resize Problem	da.eXecutoR	PHP-Fortgeschrittene	10	14.08.2009 11:50
Bilder Klasse	snatch-ic	Beitragsarchiv	1	13.06.2007 11:45
Bereich um einen float left und float right Bereich	andrew22	HTML, Usability und Barrierefreiheit	8	27.02.2007 18:27
3zeiliges div Seitenlayout - 3. Bereich zu tief	HStev	HTML, Usability und Barrierefreiheit	7	21.04.2006 16:13
Newsposting aus gesondertem Bereich		Beitragsarchiv	5	04.08.2005 18:13
wie erstelle ich eine Festen Bereich (Navigation)		PHP Tipps 2005-2	9	30.06.2005 16:01
DPI Anzahl beim erzeugen von Bildern mit GD2 Lib einstellen?		PHP Tipps 2005	13	28.04.2005 14:39
[Erledigt] Zugriff auf Dateien im passwortgeschützten Bereich		PHP Tipps 2005	15	16.03.2005 17:50
Problem mit Wasserzeichen auf Bildern	pixelcut	PHP-Fortgeschrittene	16	14.12.2004 02:36
PHP und Mysql für Internen Bereich		Beitragsarchiv	3	27.10.2004 10:53
Sicherer Bereich mit .htaccess + phpskript auf einem Server		PHP Tipps 2004	2	23.07.2004 18:25

13.01.2010, 19:57
papalangi_44 Benutzer Registriert seit: 12.02.2009 Beiträge: 63 PHP-Kenntnisse: Fortgeschritten	Beliebigen Bereich in Image selektieren Hallo, ich habe folgende Problem: Ich habe eine Seekarte (als Backgroundimage) Darüber befindet sich ein canvas in dem der Benutzer eine Route anklicken kann. Diese Route zeichne ich mit Hilfe von wz_grapics in der Seekarte. Kurse, Entfernung, Dauer werden berechnet und in einer Tabelle abgelegt. Diese wird dann per Ajax als PDF erzeugt. Es wird auch das Image mit den eingezeichneten Kursen in der PDF abgelegt. Da dann u.U. der gesamte westliche Teil der Ostsee auf DIN A4 Größe gebracht wird, möchte ich auch den relevanten Ausschnitt der Seekarte in die PDF bringen. - Der Anwender soll dazu mit der Maus den Bereich selektieren. - Dabei wird der ausgewählte Bereich mit einem Rahmen versehen, bekommt eine andere Hintergrundfarbe und ist transparent. Wichtig: es ist ein Eventhandler onmousemove auf die Karte registriert, der permanent die Koordinaten der augenblicklichen Mausposition berechnet (Breite, Länge)und anzeigt Mein Lösungsversuch : - ich erzeuge ein hidden Div - wenn der Benutzer auf den pdf-Button klickt registriere ich einen mousedown-Eventhandler auf die Hintergrundkarte - Beim nächsten Mousedown wird die obere linke Ecke des hidden div auf die Position der Mausgelegt und das Div visible geschaltet. - Es werden zusätzliche Handler registriert. - ein Mousemove-Handler, der die widht und height Attribute des Divs ändert. - ein mouseup-Handler, -ein mouseout-Handler (der Anwender soll ja nur einen Ausschnitt der Karte markieren) In beiden Fällen möchte ich die Mausposition speichern, damit ich den Ausschnitt berechnen und an die Pdf-Erzeugung übergeben kann. Probleme: - Ich bekomme immer sehr schnell ein mouseout-Event, obwohl sich die Maus noch über der Karte befindet und das zeichnen erfolgt nicht schnell genug. -Das Zeichen des Divs erfolgte mit fast befriedigender Geschwindigkeit, als ich die Events noch fest an an das div gekoppelt hatte. Ich habe das aber rausgenommen, damit ich mehrere Handler registrieren kann. Meine Fragen: - ist der Ansatz so ok oder gibt es einen einfachen Weg per javascript den Bereich zu selektieren und optisch anzuzeigen? - woran kann es liegen, dass ich die Mouseout-events bekomme? - Kann es daran liegen, das ich mir debug-Outputs in eine Textarea schreibe? Hat jemand damit Erfahrung oder eine Idee? Vielen Dank im voraus papalangi_44 Geändert von papalangi_44 (13.01.2010 um 20:25 Uhr). Grund: Abgeschickt, bevor fertig geschrieben (dicke Finger)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.01.2010, 21:46
kn0wledge Erfahrener Benutzer Registriert seit: 03.09.2009 Beiträge: 158 PHP-Kenntnisse: Anfänger	Falls die jQuery verwendest hier : jQuery.DeepZoom - http://nibblersrevenge.cluss.de Quellcode anschauen, oder einfach dieses Plugin direkt übernehmen, steht unter der MIT Lizenz und darf damit auch für so ziehmlich alles verwendet werden.

13.01.2010, 22:16
papalangi_44 Benutzer Registriert seit: 12.02.2009 Beiträge: 63 PHP-Kenntnisse: Fortgeschritten	Schönes Beispiel Nein, ich verwende nicht jQuery. Für AJAX-Request verwende ich prototype. Obwohl ich damit auch nicht sehr glücklich bin (erzeugt mir zuviel Warnings in der Konsole. Sehen die sich das nie an? ) Ich habe das Beispiel mal aufgerufen, ist so etwa das was ich will, aber ich möchte nicht noch ein Framework verwenden. Ich möchte verstehen was da abgeht.