Karte bewegen und nachladen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
array
beispiel
bild
code
container
datei
ecke
frage
funktion
http
karte
koordinate
laden
maus
position
problem
schleife
sekunde
url
verbindung
-
Hallo,
ich habe schon einmal ein ähnliches Thema erstellt, doch da ich dort keine Antwort mehr erhalte und ich mit meinen Überlegungen nun etwas weiter bin, eröffne ich hier ein neues Thema.
Mein Ziel ist es, eine Karte für ein Browserspiel zu erstellen, die man mit der Maus bewegen kann und die die Bilder, aus der die Karte besteht nachlädt, wenn diese im sichtbaren bereich sind. Hier mal mein bisheriger Code:
<html> <head> <script type="text/javascript" src="jquery-1.8.2.js"> </script> <script type="text/javascript" src="jquery-ui1.9.1.js"> </script> <link rel="stylesheet" href="jquery-ui1.9.1.css"> <script type="text/javascript"> $(document).ready(function() { $("#Karte").draggable(); }); </script> <style rel="stylesheet"> #Sichtbereich { position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; border: 1px solid black; overflow: hidden; } #Karte { width: 250%; height: 250%; position: absolute; top: 0px; left:0px; } img { width: 100%; } table { width: 100%; height: 100%; border-collapse: 0px; border-spacing: 0px; padding: 0px; margin: 0px; } td { border-collapse: 0px; border-spacing: 0px; padding: 0px; margin: 0px; } tr { border-collapse: 0px; border-spacing: 0px; padding: 0px; margin: 0px; } </style> <title> Karte </title> </head> <div id="Sichtbereich"> <div id="Karte"> <table id="Karteninhalt"> <tr> <td> <img src="1_2_1.png" alt=""> </td> <td> <img src="1_2_1.png" alt=""> </td> </tr> <tr> <td> <img src="1_2_1.png" alt=""> </td> <td> <img src="1_2_1.png" alt=""> </td> </tr> </table> </div> </div> </body> </html>
Dies ist ein Denkansatz, ich bin offen für andere Vorschläge.
Zur erklärung:
Die Tabelle, die jetzt 4 Bilder umfasst, soll eigentlich mehrere Tausend Bilder umfassen. Diese sind alle 32x32px groß, es sind also viele kleine Bilder. Ich habe als beispiel einfach immer die gleiche Datei eingebunden, es ist immer ein Baum, kann aber durch eine belibige andere Datei ersetzt werden (logischerweise).
Meine Probleme sind jetzt:
1.Wie reduziere ich die Ladezeit so, dass die Datei keine Ewigkeit zum laden braucht? Ich habe schon etwas mit Lazyload rumprobiert, das hat aber alles zu nichts geführt. Außerdem kommt mir Lazyload eher für Projekte sinnvoll vor, bei denen wenige große Bilder nachgeladen werden können. Gibt es ein Script, mit dem ich die Bilder erst nachladen kann, wenn diese im sichtbaren bereich sind und wenn ja, wo finde ich es bzw. wie schreibe ich es selber?
2.Wie begrenze ich das
von jQuery so, dass man nicht über den Rand der Karte hinausgucken kann? Also so, dass man die Karte nur so weit bewegen kann, dass sie immer vollständig im sichtbaren bereich bleibt..draggable()
3.Als ich mit vielen Bildern rumprobiert habe, habe ich bemerkt, dass das
anfängt zu haken. Wie kann ich das verhindern?.draggable()
Ich hoffe, ich konnte alles so fragen, dass man es verstehen kann. Danke im Voraus für alle Antworten.
MFG THWBM -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ich befürchte das selbst zu realisieren und alle dabei alle hürden zu überwinden ist äußerst schwierig...
aber glücklicherweise gibts eine einfache lösung:
benutze die google-maps-api dafür
da findest du ausreichende dokumentationen wie man seine eigenen karteninhalte implementieren kann...
ein schönes beispiel dafür: http://travianer.scheibenwelt.org/map/ -
Hallo und danke für die Antwort,
hcms schrieb:
ich befürchte das selbst zu realisieren und alle dabei alle hürden zu überwinden ist äußerst schwierig...
Das ist mir mehr oder weniger egal. Ich programmiere dieses Spiel, um Sachen zu lernen und nicht, um zu sagen, dass alles zu schwer ist.
aber glücklicherweise gibts eine einfache lösung:
benutze die google-maps-api dafür
da findest du ausreichende dokumentationen wie man seine eigenen karteninhalte implementieren kann...
ein schönes beispiel dafür: http://travianer.scheibenwelt.org/map/
Eine Google-maps Karte möchte ich nicht einbinden, da mich das "Google-Logo" unten links in der Ecke stört und ich es lieber selber machen möchte. Hat Irgendjemand eine Idee, die nicht auf Google-Maps-Karten basiert? Oder eine Teillösung?
MFG THWBM -
Ich habe sowas schon mal selber gemacht:
http://simuliertes.lima-city.de/spielplatz/map/karte.htm
Falls Du fragen dazu hast, frag
Ansonsten fällt mir noch ein:
Crafty! (auch gerade erst entdeckt) -
Hallo simuliertes,
simuliertes schrieb:
Ich habe sowas schon mal selber gemacht:
http://simuliertes.lima-city.de/spielplatz/map/karte.htm
Das ist genau das, was ich gesucht habe, ein ganz, großes danke an dich! Aber ich möchte davon gerne gebrauch machen
:
simuliertes schrieb:
Falls Du fragen dazu hast, frag
Genau das mache ich jetzt:
1.Hast du wirklich alles selber gemacht oder ist das zusammenkopiert? Ich will dich nicht falsch beschuldigen, ich möchte es nur wissen. Ich habe mich mal ein bischen durch den Quelltext gekämpft und mir ist aufgefallen, dass die Einrückung sehr unterschiedlich ist. Das könnte bedeuten, dass da mehrere Leute etwas zu beigetragen haben, war es so? Ich frage, weil ich das Script gerne verwenden möchte, und dazu bräuchte ich die Erlaubnis aller Mitschreiber bzw. Rechteinhaber. Gibt es eine Lizenz, unter der du das Script zur Weiterverwendung anbietest oder möchtest du nicht, dass ich es verwende?
2.Hast du das Script nochmal mit ausführlicheren Variabelnamen und einer ausführlicheren Kommentierung? Ich verstehe das noch nicht so ganz.
MFG THWBM -
Also das einzige was ich mir rauskopiert habe waren die funktionen updateWMTT, showWMTT und hideWMTT.
Siehe dazu
http://webmatze.de/wirklich-einfache-javascript-tooltips/
Wobei ich meine das der original-code sogar von selfhtml kam.
Da ich keine Einwände gegen die Verwendung des Codes habe (egal ob privat,kommerziell etc..) kannst Du alles bedenkenlos verwenden.
Was meiner Ansicht noch fehlt ist ein preloader für die Bilder.
Ach ja die Bilder selber dürfte ich eventuell gar nicht verwenden.
Also das system läuft so:
Mal angenommen die Karte wird nach rechts verschoben.
Irgendwann verschwindet ja dann ein Tile.
Dieses wird dann einfach wieder links "angeklebt".
Und dann mit einem neuen Bild versehen.
Mach mal folgende veränderungen im css:
.tile { border:1px solid #000000;/*debuganzeige*/ }
#viewport { overflow: visible;}
Und entferne folgendes:
/*debug-Fenster verbergen*/ h1.tnr {display: none;} #debugKonsole {display: none;} #debugK {display: none;} #debugM {display: none;}
-
simuliertes schrieb:
Also das einzige was ich mir rauskopiert habe waren die funktionen updateWMTT, showWMTT und hideWMTT.
Siehe dazu
http://webmatze.de/wirklich-einfache-javascript-tooltips/
So eine Nachricht am Mauszeiger habe ich bereits selber estellt, ist also kein Problem.
simuliertes schrieb:
Da ich keine Einwände gegen die Verwendung des Codes habe (egal ob privat,kommerziell etc..) kannst Du alles bedenkenlos verwenden.
Vielen Dank!
simuliertes schrieb:
Also das system läuft so:
Mal angenommen die Karte wird nach rechts verschoben.
Irgendwann verschwindet ja dann ein Tile.
Dieses wird dann einfach wieder links "angeklebt".
Und dann mit einem neuen Bild versehen.
An diesem System müsste ich noch etwas ändern, denn die Bilder, die ich verwende haben keinen fortlaufenden, durchnummerierten namen. Ich müsste die Information, wie ein Bild heißt, also aus einer Datei auslesen. Ich habe aber nicht so wirklich eine Idee, wie ich das machen soll, denn so wie ich das sehe, funktioniert das Script in etwa ganz grob so, was die Biderauswahl angeht,:
if(KarteWirdBewegt und NeuesBildNoetig) { if(NachRechts) { X--; //X-Koordinate des Bildes, ein Bild wird links dragehängt. Durch die Abmessung in "wx=9;wy=6;" Kann errechnet werden, ob das Bild in eine Neue Zeile muss. } if(NachLinks) { X++; } if(NachOben) { Y++; } if(NachUnten) { Y--; } }
Stimmt das in etwa so (In "Menschlicher Syntax")? Ich finde die Variabelnamen sehr verwirren, deshalb ist es für mich schwer, das ganze zu verstehen.
Hat jemand eine Idee, wie ich das Script so anpasseb kann, dass es auch Bildnamen wie "1_2_1.png" und direkt daneben "7_2_3.png" (nur Beispielnamen) anzeigen kann?
MFG THWBM
Beitrag zuletzt geändert: 15.2.2013 18:50:11 von thwbm -
thwbm schrieb:
Hat jemand eine Idee, wie ich das Script so anpasseb kann, dass es auch Bildnamen wie "1_2_1.png" und direkt daneben "7_2_3.png" (nur Beispielnamen) anzeigen kann?
MFG THWBM
Also da es schon wasweissichwievieleMonate her ist das ich diesen script erstellt habe muss ich gestehen das ich auch nicht mehr 100% den durchblick habe
Muss mich selber wieder reinarbeiten & erinnern.
Interessant für Dich ist ja Zeile 216
window.document.getElementById('tile_'+mtx(x,y)).src = tu1+wmtx(wpx+x,wpy+y)+tu2;
Also meine Karte ist ja wx=9;wy=6; -tiles gross.
Mit fortlaufender Nummer (ohne null davor):
01 07 13 19 25 02 08 14 20 26 [usw...] 03 09 15 21 27 04 10 16 22 28 [usw...]
Edit: Korrektur der Matrix, wie sie wirklich ist
Also ist zB auf koordinate x=4,y=3 Bild Nr. 21
Diese Berechnung macht wmtx() (steht für WeltMatrix
Also entweder hast Du Deine Bilder nach x/y-koordinaten benannt (7_2_3.png) und lässt wmtx ganz weg,
Oder -und das ist voll am einfachsten- Du machst ein Array mit den Namen Deiner Bilder
Um mal bei deinem Beispiel zu bleiben:
Mal angenommen 1_2_1.png ist auf pos(x,y) 1,1 und 7_2_3.png auf 2,1
[irgendwo am Anfang ohne var davor] meineBilder =new Array('1_2_1.png','7_2_3.png','usw...'); [restlicher code...] [zeile 216] window.document.getElementById('tile_'+mtx(x,y)).src = meineBilder(wmtx(wpx+x,wpy+y));
p.s. ich weiss ja nicht wie fit du in php bist.
Eventuell könntest Du ja einfach eine php-Datei schreiben die dann das passende Bild liefert (tile.php?tileNr=1 zB)
Beitrag zuletzt geändert: 15.2.2013 21:30:18 von simuliertes -
simuliertes schrieb:
Interessant für Dich ist ja Zeile 216
window.document.getElementById('tile_'+mtx(x,y)).src = tu1+wmtx(wpx+x,wpy+y)+tu2;
Ja, das leuchtet mir ein. Mein Problem beim verstehen des Codes ist, dass ich die Variabel-, Funktions-, ID- und Klassennamen nicht wirklich zuordnen kann:
CSS: .tile = Klasse für was? .tnr = Klasse für was? #container = ID für etwas, das ich im Code nicht finden kann, wird aber im CSS Teil definiert. #viewport = Der "Kasten", in dem die Karte zu sehen ist #tileContainer = Div im Div, der eigentlich nur den Cursor umstellt. Hätte man das nicht auch einfach im #viewport machen können? #coordWindow = ID, wird aber nicht verwendet #zoomWrap = Container, in dem die Zoombar ist #zoomBar = Container, der die Zoombar hat #zoombarChild = Container, der dafür sorgt, dass es eine Zoombar gibt #debugKonsole = ? #debugK = ? #debugM = ? Javascript: xm, ym = Mausposition, X und Y movethemap = Information, ob die Karte bewegt wird stX, stY = Mausposition - Position von #viewport? wx, wy = Größe der Karte, um festzulegen, wann eine neue Reihe mit Bildern anfangen muss wpx, wpy = Position auf der Welt, was heißt das? ts = Größe der Teile, das müsste ich in % umwandeln tsBckp = ? maxZoom, minZoom = Begrenzung, damit man nicht ins unermessliche zoomen kann zoomStep = Nur stufenweise Zoomen actZoom = Zoom der Karte, beim laden der Datei mpx, mpy = Position von #viewport tu1, tu2 = Variabeln, um die URL eines Bildes "Zusammenzubasteln" tile = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); = ? tilePointer = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); = ? updateMouse(e) = Funktion, um die Mausposition zu ermitteln matrix(xin,yin) = ? xin, yin = ? wmtx(xin, yin) = Berechnung, ob neues Bild geladen werden muss, wenn ja, welches mtx(xin, yin) = ? mmtx (xin,yin,x2in,y2in) = ? wpcheck() = ? moveMap() = Funktion zum bewegen der Karte drawMap() = Funktion, die die Karte "zeichnet" xadd, yadd = ? m = ? xP, yP = ? xC, yC = ? aC = ? akl = ? agr = ? dbgTxt = ? sta = ? if(xadd!=0||yadd!=0) = Abfrage, die u.U. etwas zurüchsetzt, warum? x, y = ? b = ? for(y=1;y<=4;y++){ for (x=1;x<=4;x++){[...]}} //Warum die Getrennten Abfragen, for(a=1;a<=12;a++) würde doch zu dem gleichen ergebnis führen, oder? mouseIsDown() = Funktion, die aufgerufen wird, wenn die Karte bewegt werden soll, warum wird "false" zurückgegeben? mouseIsUp() = Zurücksetzten von mouseIsDown mouseIsMoving() = Funktion für ? vx, vy = Wird nur festgelegt und nirgendwo eingesetzt initMap() = Funktion, die die Karte anfangs zeichnet und die Mausevents überwacht zoomMap(node) = funktion zum zoomen, aber was ist "node" ScrBarMax = Maximum beim Zoomen sy = ? x2, y2 = ?
Ich fände es toll, wenn mir jemand das mal erklären könnte. Ich habe immer das eingesetzt, was ich dem Code entnehme, ob es richtig ist, weiß ich nicht.
simuliertes schrieb:
Also meine Karte ist ja wx=9;wy=6; -tiles gross.
Mir ist aufgefallen, das die Karte etwas ruckelt beim bewegen, was nicht weiter schlimm ist. Könnte das Ruckeln zunehmen, wenn ich anstelle von 9x6=54 Bildern 96x48=4608 Bildern einsetzte, von denen insgesammt so ungefähr 500 Bilder immer sichtbar sind?
Also entweder hast Du Deine Bilder nach x/y-koordinaten benannt (7_2_3.png) und lässt wmtx ganz weg,
7, 2 und 3 sind keine Koordinaten, die Zahlen haben nichts mit der Position auf der Karte zu tun.
Oder -und das ist voll am einfachsten- Du machst ein Array mit den Namen Deiner Bilder
Mit arrays kenne ich mich nicht so gur aus, du meinst also, dass ich dann hinterher bei:
meineBilder =new Array('1_2_1.png','7_2_3.png','usw...'); alert(meineBilder[0]);
eine alert-Box mit dem Inhalt "1_2_1-png" bekommen würde, und die jeweilige Variabel dann nur an der jeweiligen Kartenstelle einsetzen muss?
p.s. ich weiss ja nicht wie fit du in php bist.
Eventuell könntest Du ja einfach eine php-Datei schreiben die dann das passende Bild liefert (tile.php?tileNr=1 zB)
Das würde ich bestimmt hinbekommen, aber als ich mal damit ein bischen rumprobiert habe, hat die Seite über 30 Sekunden zum laden gebraucht und deswegen wurde die Maximalzeit überschritten. Da habe ich aber auch alles aus einer MySQL-Datenbank geladen.
Ich weiß, dass das sehr viel Text ist, aber es würde mich sehr freuen, wenn mir jemand erklären könnte, was die oben genannten Code-Teile im einzelnen machen und ob meine Interpretationen stimmen,
MFG THWBM -
In einem Array könntest Du Dir für die fortlaufenden Positionen die jeweiligen Tiles speichern.
Dadurch läuft die Schleife einfach über die Tiles und liest dann für jede Koordinate das jeweilige Bild aus.
Ich blicke auch nicht durch den Code durch, aber das würde dann eben so funktionieren:
Datei mit Tileliste: array( 1_1 => baum; 1_2 => baum; 1_3 => fluss; ...)
tile-bild laden: Koordinate 1_3 neues Bild; in Array suchen unter 1_3; entsprechendes Bild ausgeben. -
thwbm schrieb:
t
simuliertes schrieb:
Interessant für Dich ist ja Zeile 216
window.document.getElementById('tile_'+mtx(x,y)).src = tu1+wmtx(wpx+x,wpy+y)+tu2;
Ja, das leuchtet mir ein. Mein Problem beim verstehen des Codes ist, dass ich die Variabel-, Funktions-, ID- und Klassennamen nicht wirklich zuordnen kann:
Also es gibt #viewport dessen zweck es ist alle "überstehenden" tiles zu verbergen (overflow: hidden;).
Das ist also quasie das fenster auf die Welt/Karte.
Darin befindet sich #tileContainer.
Der "Container" in dem die tiles sind.
Mit der Maus wird nicht jedes einzelne tile verschoben sondern "nur" der tileContainer.
Da sich die tiles im tileContainer befinden werden sie (aufgrund der css-deklaration) mit-verschoben.
Deswegen befinden sich im #tileContainer die tiles(=Bilder engl. für "Kachel").
Dessen verhalten wird über die css-klasse .tile geregelt.
Erklärung:
CSS:
.tnr = die tileNummer
#container = code-Leiche, kann entfernt werden
#viewport = Der "Kasten", in dem die Karte zu sehen ist -Richtig-
#tileContainer =Dadurch wird nicht der Cursor (welcher Cursor?) verschoben sondern alle Bilder
#coordWindow = ID, wird aber nicht verwendet -Richtig-
#zoomWrap = Container, in dem die Zoombar ist -Richtig-
#zoomBar = Container, der die Zoombar hat -Richtig-
#zoombarChild = Container, der dafür sorgt, dass es eine Zoombar gibt -Richtig-
#debugKonsole = Console zum debuggen, sprich statt mir etwas über alert() auszugeben hab ich da die Daten reingeschrieben
#debugK = Zum debuggen zeigt die Aktuelle Kartenposition
#debugM = Zum debuggen, zeigt die Aktuelle Mausposition
Javascript:
xm, ym = Mausposition, X und Y -Richtig-
movethemap = Information, ob die Karte bewegt wird -Richtiger wäre, ob sie bewegt werden darf . Also zB wenn die Maus gedrückt wird UND innerhalb des #viewport ist
stX, stY = Mausposition - Position von #viewport? -Nein- Das ist die Mausposition relativ zur linken obern Ecke von #viewport
wx, wy = Größe der Karte, um festzulegen, wann eine neue Reihe mit Bildern anfangen muss -Richtig-
wpx, wpy = Position auf der Welt, was heißt das? -Nun, wo (bei welchem Tile) sich der Kartenausschnitt gerade befindet-
ts = Größe der Teile, das müsste ich in % umwandeln -Verstehe ich nicht was Du meinst- Das ist ein array mit der größe der tiles in Px [Breite in Pixel, Höhe in Pixel], steht für tile-size
tsBckp = tile-size backup , da ts ja beim zoomen verändert wird, enthält tsBckp die ursprüngliche Größe
maxZoom, minZoom = Begrenzung, damit man nicht ins unermessliche zoomen kann -Right-
zoomStep = Nur stufenweise Zoomen -Right-
actZoom = Zoom der Karte, beim laden der Datei -Jain, das ist die Aktuelle Zoomstufe-
mpx, mpy = Position von #viewport -Nein-Position des Kartenausschnitts-
tu1, tu2 = Variabeln, um die URL eines Bildes "Zusammenzubasteln" -Right-
tile = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); = code-Leiche, wird nicht genutzt
tilePointer = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); = Puh, schwieriger zu erklären.
Das ist der "Zeiger"(Pointer) auf ein tile.
Mach Dir klar das sich ja die position der tiles ständig ändert dadurch das sie im nicht-sichtbaren Bereich weggenommen und an anderer stelle wieder angeklebt werden. also am anfang sieht das ja so aus (jetzt mal nur mit 3 x 3 tiles):
01 02 03 04 05 06 07 08 09
jetzt wird die karte zb nach rechts geschoben:
03 01 02 06 04 05 09 07 08
und jetzt nach oben:
06 04 05 09 07 08 03 01 02
Du siehst das die tile-ID's wild gemischt werden.
Deswegen behält tilePointer die übersicht.
updateMouse(e) = Funktion, um die Mausposition zu ermitteln -Right-
wmtx(xin, yin) = Berechnung, ob neues Bild geladen werden muss, wenn ja, welches
moveMap() = Funktion zum bewegen der Karte -Right-
drawMap() = Funktion, die die Karte "zeichnet" -Right-
for(y=1;y<=4;y++){ for (x=1;x<=4;x++){[...]}} //Warum die Getrennten Abfragen, for(a=1;a<=12;a++) würde doch zu dem gleichen ergebnis führen, oder?
Absolut nicht !
(Und ich bin gerade zu faul das zu erklären da es -sorry- sowas von klar sein sollte warum eine y-schleife in einer x-schleife ist. Stichwort x/y-koordinaten)
mouseIsDown() = Funktion, die aufgerufen wird, wenn die Karte bewegt werden soll, warum wird "false" zurückgegeben?
Klick mal im Browser auf ein belibiges bild, halt die Maus gedrückt und verschiebe sie.
Du kannst Auf diese weise (zumindest zB in Firefox) Bilder auf Deinen Desktop ziehen und speichern.
Wenn eine durch onmousedown aufgerufene Funktion false zurückliefert wird das verhindert.
Und das wollen wir ja verhindern wenn die Karte bewegt wird.
mouseIsUp() = Zurücksetzten von mouseIsDown -Right-
mouseIsMoving() = Funktion für ? regelt was passiert wenn sich die Maus "bewegt". Die Karte soll ja nur bewegt werden wenn :
-die Maus gedrückt wird
-die Maus (beim ersten mal drücken) im #viewport ist
-sich die Maus bewegt
vx, vy = Wird nur festgelegt und nirgendwo eingesetzt siehe Zeile 252//document.getElementById('debugKonsole').innerHTML =(ts[0]*(wpx-1)+(xm-vx))+','+(ts[1]*(wpy-1)+(ym-vy));
Also nur zum debuggen gewesen.
initMap() = Funktion, die die Karte anfangs zeichnet und die Mausevents überwacht -Right-
zoomMap(node) = funktion zum zoomen, aber was ist "node" http://de.selfhtml.org/javascript/objekte/node.htm
thwbm schrieb:
Mir ist aufgefallen, das die Karte etwas ruckelt beim bewegen, was nicht weiter schlimm ist. Könnte das Ruckeln zunehmen, wenn ich anstelle von 9x6=54 Bildern 96x48=4608 Bildern einsetzte, von denen insgesammt so ungefähr 500 Bilder immer sichtbar sind?
Das könnte sein, lässt sich per ferndiagnose schwer klären.
Soll heißen gib mal einen Link raus mit deinem aktuellen Ergebnis.
thwbm schrieb:
Mit arrays kenne ich mich nicht so gur aus, du meinst also, dass ich dann hinterher bei:
meineBilder =new Array('1_2_1.png','7_2_3.png','usw...'); alert(meineBilder[0]);
eine alert-Box mit dem Inhalt "1_2_1-png" bekommen würde, und die jeweilige Variabel dann nur an der jeweiligen Kartenstelle einsetzen muss?
Richtig.
Das Du noch Schwierigkeiten mit Arrays hast lässt mich allerdings vermuten das Dein Projekt tatsächlich etwas über-ambitioniert ist.
Aber egal, "der Weg ist das Ziel"
thwbm schrieb:
simuliertes schrieb:
p.s. ich weiss ja nicht wie fit du in php bist.
Eventuell könntest Du ja einfach eine php-Datei schreiben die dann das passende Bild liefert (tile.php?tileNr=1 zB)
Das würde ich bestimmt hinbekommen, aber als ich mal damit ein bischen rumprobiert habe, hat die Seite über 30 Sekunden zum laden gebraucht und deswegen wurde die Maximalzeit überschritten. Da habe ich aber auch alles aus einer MySQL-Datenbank geladen.
MFG THWBM
Ich bin mir 100% sicher das dann am Code etwas falsch ist. Sowas sollte in millisekunden von php+MySQL bearbeitet werden können.
http://www.php-dummies.de/script/Tutorials/Fortgeschritten/Bilder_und_Thumbnails.html
Beitrag zuletzt geändert: 17.2.2013 18:45:46 von simuliertes -
Hallo und entschuldigung, dass ich so lange nicht geantwortet habe,
simuliertes schrieb:
Erklärung:
CSS:
.tnr = die tileNummer
#container = code-Leiche, kann entfernt werden
#viewport = Der "Kasten", in dem die Karte zu sehen ist -Richtig-
#tileContainer =Dadurch wird nicht der Cursor (welcher Cursor?) verschoben sondern alle Bilder
#coordWindow = ID, wird aber nicht verwendet -Richtig-
#zoomWrap = Container, in dem die Zoombar ist -Richtig-
#zoomBar = Container, der die Zoombar hat -Richtig-
#zoombarChild = Container, der dafür sorgt, dass es eine Zoombar gibt -Richtig-
#debugKonsole = Console zum debuggen, sprich statt mir etwas über alert() auszugeben hab ich da die Daten reingeschrieben
#debugK = Zum debuggen zeigt die Aktuelle Kartenposition
#debugM = Zum debuggen, zeigt die Aktuelle Mausposition
Javascript:
xm, ym = Mausposition, X und Y -Richtig-
movethemap = Information, ob die Karte bewegt wird -Richtiger wäre, ob sie bewegt werden darf . Also zB wenn die Maus gedrückt wird UND innerhalb des #viewport ist
stX, stY = Mausposition - Position von #viewport? -Nein- Das ist die Mausposition relativ zur linken obern Ecke von #viewport
wx, wy = Größe der Karte, um festzulegen, wann eine neue Reihe mit Bildern anfangen muss -Richtig-
wpx, wpy = Position auf der Welt, was heißt das? -Nun, wo (bei welchem Tile) sich der Kartenausschnitt gerade befindet-
ts = Größe der Teile, das müsste ich in % umwandeln -Verstehe ich nicht was Du meinst- Das ist ein array mit der größe der tiles in Px [Breite in Pixel, Höhe in Pixel], steht für tile-size
tsBckp = tile-size backup , da ts ja beim zoomen verändert wird, enthält tsBckp die ursprüngliche Größe
maxZoom, minZoom = Begrenzung, damit man nicht ins unermessliche zoomen kann -Right-
zoomStep = Nur stufenweise Zoomen -Right-
actZoom = Zoom der Karte, beim laden der Datei -Jain, das ist die Aktuelle Zoomstufe-
mpx, mpy = Position von #viewport -Nein-Position des Kartenausschnitts-
tu1, tu2 = Variabeln, um die URL eines Bildes "Zusammenzubasteln" -Right-
tile = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); = code-Leiche, wird nicht genutzt
tilePointer = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); = Puh, schwieriger zu erklären.
Das ist der "Zeiger"(Pointer) auf ein tile.
Mach Dir klar das sich ja die position der tiles ständig ändert dadurch das sie im nicht-sichtbaren Bereich weggenommen und an anderer stelle wieder angeklebt werden. also am anfang sieht das ja so aus (jetzt mal nur mit 3 x 3 tiles):
01 02 03 04 05 06 07 08 09
jetzt wird die karte zb nach rechts geschoben:
03 01 02 06 04 05 09 07 08
und jetzt nach oben:
06 04 05 09 07 08 03 01 02
Du siehst das die tile-ID's wild gemischt werden.
Deswegen behält tilePointer die übersicht.
updateMouse(e) = Funktion, um die Mausposition zu ermitteln -Right-
wmtx(xin, yin) = Berechnung, ob neues Bild geladen werden muss, wenn ja, welches
moveMap() = Funktion zum bewegen der Karte -Right-
drawMap() = Funktion, die die Karte "zeichnet" -Right-
Danke, damit komme ich um einiges weiter. Ich verstehe nur ein paar kleine Kleinigkeiten nicht:
1:
stX, stY = Mausposition - Position von #viewport? -Nein- Das ist die Mausposition relativ zur linken obern Ecke von #viewport
Wofür steht stX bzw. stY?Die Mausposition relativ zur linken oberen Ecke von #viewport ist doch die Posiition der Maus - (minus) der Position von #viewort, oder?
Als Beispiel (jetzt nur für eine Achse, X oder Y):
Die Maus ist auf Position 500px;
#viewport ist auf Position 400px;
Die Position der Maus, relativ zur oberen linken Ecke von #viewport ist 100px, also 500 - 400, also Maus - #viewport;
2:
mpx, mpy = Position von #viewport -Nein-Position des Kartenausschnitts-
#viewport ist doch der Kartenausschnitt, also das, was man von der Karte sieht, oder? Meinst du mit "Kartenausschnitt etwas anderes?
simuliertes schrieb:
thwbm schrieb:
simuliertes schrieb:
p.s. ich weiss ja nicht wie fit du in php bist.
Eventuell könntest Du ja einfach eine php-Datei schreiben die dann das passende Bild liefert (tile.php?tileNr=1 zB)
Das würde ich bestimmt hinbekommen, aber als ich mal damit ein bischen rumprobiert habe, hat die Seite über 30 Sekunden zum laden gebraucht und deswegen wurde die Maximalzeit überschritten. Da habe ich aber auch alles aus einer MySQL-Datenbank geladen.
MFG THWBM
Ich bin mir 100% sicher das dann am Code etwas falsch ist. Sowas sollte in millisekunden von php+MySQL bearbeitet werden können.
http://www.php-dummies.de/script/Tutorials/Fortgeschritten/Bilder_und_Thumbnails.html
Hier mal ein Beispiel, es war noch alles andere als ausgereift, da ich mirch erstmal um andere Probleme gekümmert habe:
$Verbindung = mysql_connect("***", "***", "***"); mysql_select_db("***"); $AbfrageKarteX001Y001 = "SELECT * FROM karte WHERE X = '001' AND Y = '001'"; $ErgebnisKarteX001Y001 = mysql_query($AbfrageKarteX001Y001); while($RowKarteX001Y001 = mysql_fetch_object($ErgebnisKarteX001Y001)){ $KarteFeldTypX001Y001 = $RowKarteX001Y001->FeldTyp; // FeldTyp, X001, Y001 } mysql_close($Verbindung);
Ich habe dann eine Tabelle angelegt, die die Spalten X, Y und Feldtyp hat. Feldtyp ist z.B. "1_2_1", das Bild das dort angezeigt werden muss ist dass "1_2_1.png". Das habe ich mir dann immer so zusammengebaut. Man muss dazu sagen, dass es schon etwas her ist, dass ich das Script geschrieben habe, ich würde es jetzt mit einer While-Schleife Machen, um so ungefähr 1 Milionen Zeichen zu sparen.
MFG THWBM -
Kann man da nicht unter Google Developers einfach die Karte von denen mit ungefähren Anzeige Ort nicht durch ein Script einbinden?
Ich meine da hätte ich was gesehen weil sowas mit Javascript und I-Frame's zu machen ist ziemlich schwierig und das was ich jetzt mitgelesen hatte, funktioniert bei mir i-wie nicht :/ -
Hallo,
android-chat schrieb:
Kann man da nicht unter Google Developers einfach die Karte von denen mit ungefähren Anzeige Ort nicht durch ein Script einbinden?
Ich meine da hätte ich was gesehen weil sowas mit Javascript und I-Frame's zu machen ist ziemlich schwierig und das was ich jetzt mitgelesen hatte, funktioniert bei mir i-wie nicht :/
Ich zitiere mich ja nur ungerne selber, aber:
thwbm schrieb:
Eine Google-maps Karte möchte ich nicht einbinden, da mich das "Google-Logo" unten links in der Ecke stört und ich es lieber selber machen möchte. Hat Irgendjemand eine Idee, die nicht auf Google-Maps-Karten basiert? Oder eine Teillösung?
Dazu, dass nichts bei dir funktioniert:
Guck dir mal dieses Script an. Das sollte funktionieren. Falls es das nicht tut, aktiviere Javascript, verwende einen anderen Browser, deaktiviere deinen Werbeblocker, .... Die Liste ist lang. Wenn es am Browser liegt, kannst du mir dann bitte sagen, welchen Browser du verwendest? Wäre nett, denn dann könnte ich das Script sobald es bei den gängigen Browsern funktioniert so anpassen, dass es bei möglichst vielen Browsern funktioniert.
MFG THWBM
PS: Meine Fragen, die ich in meinem Vorherigen Beitrag geschrieben habe, bestehen noch. Ich würde mich über jede Antwort freuen.
Beitrag zuletzt geändert: 23.2.2013 15:30:15 von thwbm -
thwbm schrieb:
PS: Meine Fragen, die ich in meinem Vorherigen Beitrag geschrieben habe, bestehen noch. Ich würde mich über jede Antwort freuen.
jaja
thwbm schrieb:
1:
stX, stY = Mausposition - Position von #viewport? -Nein- Das ist die Mausposition relativ zur linken obern Ecke von #viewport
Wofür steht stX bzw. stY?Die Mausposition relativ zur linken oberen Ecke von #viewport ist doch die Posiition der Maus - (minus) der Position von #viewort, oder?
Als Beispiel (jetzt nur für eine Achse, X oder Y):
Die Maus ist auf Position 500px;
#viewport ist auf Position 400px;
Die Position der Maus, relativ zur oberen linken Ecke von #viewport ist 100px, also 500 - 400, also Maus - #viewport;
Richtig.
SInn der sache war vor allen dingen das man dadurch #viewport verschieben kann ohne sich gedanken darum machen zu müssen ob das auswirkungen auf den Code hat.
thwbm schrieb:
2:
mpx, mpy = Position von #viewport -Nein-Position des Kartenausschnitts-
#viewport ist doch der Kartenausschnitt, also das, was man von der Karte sieht, oder? Meinst du mit "Kartenausschnitt etwas anderes?
Also nochmal zur klärung:
Wir haben es ja mit vielen verschiedenen postitionsangaben zu tun.
Das hat mich beim schreiben auch immer wieder verwirrt ^^
Das DIV mit der id #viewport hat ja eine position im document.
Also css-top/left.
Mit "Kartenausschnitt" meine ich die virtuelle position auf der Karte/Welt die wir gerade sehen.
Ausgehend von dieser Position werden die tiles angezeigt.
thwbm schrieb:
thwbm schrieb:
thwbm schrieb:
simuliertes schrieb:
p.s. ich weiss ja nicht wie fit du in php bist.
Eventuell könntest Du ja einfach eine php-Datei schreiben die dann das passende Bild liefert (tile.php?tileNr=1 zB)
Das würde ich bestimmt hinbekommen, aber als ich mal damit ein bischen rumprobiert habe, hat die Seite über 30 Sekunden zum laden gebraucht und deswegen wurde die Maximalzeit überschritten. Da habe ich aber auch alles aus einer MySQL-Datenbank geladen.
MFG THWBM
Ich bin mir 100% sicher das dann am Code etwas falsch ist. Sowas sollte in millisekunden von php+MySQL bearbeitet werden können.
http://www.php-dummies.de/script/Tutorials/Fortgeschritten/Bilder_und_Thumbnails.html
Hier mal ein Beispiel, es war noch alles andere als ausgereift, da ich mirch erstmal um andere Probleme gekümmert habe:
$Verbindung = mysql_connect("***", "***", "***"); mysql_select_db("***"); $AbfrageKarteX001Y001 = "SELECT * FROM karte WHERE X = '001' AND Y = '001'"; $ErgebnisKarteX001Y001 = mysql_query($AbfrageKarteX001Y001); while($RowKarteX001Y001 = mysql_fetch_object($ErgebnisKarteX001Y001)){ $KarteFeldTypX001Y001 = $RowKarteX001Y001->FeldTyp; // FeldTyp, X001, Y001 } mysql_close($Verbindung);
Ich habe dann eine Tabelle angelegt, die die Spalten X, Y und Feldtyp hat. Feldtyp ist z.B. "1_2_1", das Bild das dort angezeigt werden muss ist dass "1_2_1.png". Das habe ich mir dann immer so zusammengebaut. Man muss dazu sagen, dass es schon etwas her ist, dass ich das Script geschrieben habe, ich würde es jetzt mit einer While-Schleife Machen, um so ungefähr 1 Milionen Zeichen zu sparen.
MFG THWBM
Tja das ist mir zu wenig code um daraus schlüsse zu ziehen.
Also vermute ich mal das Dir ein paar möglichkteiten noch nicht bewusst sind.
Schau DIr mal das an, vielleicht hilft Dir das:
http://www.php-dummies.de/script/Tutorials/Fortgeschritten/Bilder_und_Thumbnails.html
http://php.net/manual/de/function.imagepng.php
http://webstylez.net/GET-Parameter-ein-PHP-Skript-ueber-die-URL-steuern
http://www.techcubetalk.com/2009/01/tutorial-on-how-to-store-images-in-mysql-blob-field/
http://www.roro-seiten.de/info/db/12DBAnfragen2/DBAnfragen2.html
Es gibt hier mehrere Wege zum Ziel.
Ich stelle mir das so vor das du zb <img href="getImage.php?x=1&y=1" /> aufrufst
getImage.php
sieht dann ungefähr so aus (ein bisschen pseudocode/echter code gemischt):
if (!(isset($_GET('x') )&& isset($_GET("Y")) )) DIE('Keine koordinaten') header("Content-Type: image/png"); $x=$_GET("x"); $y=$_GET("y"); $abfrage "SELECT tiles.imageData from tiles,KArte WHERE KArte.x=$x AND KArte.y=$y AND tiles.feldType=KArte.feldType"; ...SQL-ABfrage.. $img = $row[0]; ...SQL-Close ...so'n bisschen bild-code (imagecreate) imagepng($img); imagedestroy($img);
In meinem Beispiel liest Du die bild-daten aus der Dastenbank
aber Du könntest natürlich auch nur den Dateinamen holen und mit fopen öffnen....
Wie gesagt, mehrere wege führen zum Ziel.
Das wäre dann eventuell auch einen neuen threat wert.
p.s.
http://openlayers.org/
http://trac.osgeo.org/openlayers/wiki/UsingCustomTiles
Beitrag zuletzt geändert: 23.2.2013 23:13:59 von simuliertes -
simuliertes schrieb:
thwbm schrieb:
1:
stX, stY = Mausposition - Position von #viewport? -Nein- Das ist die Mausposition relativ zur linken obern Ecke von #viewport
Wofür steht stX bzw. stY?Die Mausposition relativ zur linken oberen Ecke von #viewport ist doch die Posiition der Maus - (minus) der Position von #viewort, oder?
Als Beispiel (jetzt nur für eine Achse, X oder Y):
Die Maus ist auf Position 500px;
#viewport ist auf Position 400px;
Die Position der Maus, relativ zur oberen linken Ecke von #viewport ist 100px, also 500 - 400, also Maus - #viewport;
Richtig.
SInn der sache war vor allen dingen das man dadurch #viewport verschieben kann ohne sich gedanken darum machen zu müssen ob das auswirkungen auf den Code hat.
Was meinst du mit "... ob das Auswirkungen auf den Code hat"? Wird außerdem nicht #tileContainer verschoben?
Mal kurz, damit ich weiß ob ich das so richtig verstanden habe:
Der <div>, in dem sich die Bilder, aus denen sich die Karte zusammensetzt, befinden, wird verschoben, die Bilder bekommen dann, damit sie immer im sichtbaren Bereich bleiben, angepasste CSS top/left Angaben und angepasste scr Angaben, damit die Bilder immer die richtigen sind. Stimmt das so?
Tja das ist mir zu wenig code um daraus schlüsse zu ziehen.
Also vermute ich mal das Dir ein paar möglichkteiten noch nicht bewusst sind.
Schau DIr mal das an, vielleicht hilft Dir das:
[...]
Ich habe jetzt eine Datei geschrieben, die ein Bild, dass aus einer Datenbank gelesen wird, zurückliefert. Also so:
<img src="Bild.php?X=001&Y=001" alt="">
Das liefert mir dann das Bild, dass an Position X=1 und Y=1 stehen muss. Ich habe mal über eine while-Schleife überprüft, wie lange jedes Bild braucht zum laden:
<html> <head> <title> Eine menge Bilder </title> </head> <body> <?php $i = 1; while(1==1) { //Diese Bdingung wird warscheinlich noch sehr lange zutreffen ;-) echo $i; echo "<img src='Bild001.php?X=001&Y=001' alt=''><br>"; $i++; } ?> </body> </html>
Dieses Script hat mir nach 30 Sekunden Maximalzeit, die der Server an einer Seite lädt, bis er eine Fehlermeldung ausgibt genau 167247 Bilder angezeigt, also ungefähr 0,0002 Sekunden pro Bild. Die Seite hat aber wesentlich länger zum laden gebraucht. Ich habe unten noch den Quellcode reingesetzt.
p.s.
http://openlayers.org/
http://trac.osgeo.org/openlayers/wiki/UsingCustomTiles
Das wäre dann wieder ein Lösung, die nicht selbstgemacht ist, aber trotzdem danke.
Mir sind noch ein paar Sachen aufgefallen:
1. Du verwendest in dem <img> Tag das Atribut "usemap="#worldtile"". Ist das Nötig? "usemap" ist doch dafür da, eine Link-Karte, also nur bestimmte Teile eines Bildes/einer Karte mir einer bestimmten Datei zu verlinken. Das ist doch erstmal garnicht nötig, denn das <map>, dass dazugehört ist ja leer.
2. Wofür ist di Funktion "matrix"? Die If-Abfragen haben für mich keinen ersichtlichen Grund. Auch das
macht für mich keinen Sinn. Mit "matrix" werden ja die IDs der einzelnen Bilder bestimmt. Ist das überhaupt nötig, wenn ich immer "Bildernamen" wie "Bild.php?X=013&Y=026" habe?return ((xin*4)-4)+yin-1;
Datei zum Bilder auslesen:
<?php if(isset($_GET["X"]) and isset($_GET["Y"])) { $X = $_GET["X"]; $Y = $_GET["Y"]; $Verbindung = mysql_connect("***", "***", "***"); mysql_select_db("***"); $Abfrage = "SELECT FeldArt FROM karte WHERE X = '$X' and Y = '$Y'"; $Ergebnis = mysql_query($Abfrage); while($Row = mysql_fetch_object($Ergebnis)) { $FeldArt = $Row->FeldArt; } mysql_close($Verbindung); $Bild = imagecreatefrompng($FeldArt.".png"); header('Content-Type: image/png'); imagepng($Bild); imagedestroy($Bild); } ?>
MFG THWBM -
thwbm schrieb:
simuliertes schrieb:
thwbm schrieb:
1:
stX, stY = Mausposition - Position von #viewport? -Nein- Das ist die Mausposition relativ zur linken obern Ecke von #viewport
Wofür steht stX bzw. stY?Die Mausposition relativ zur linken oberen Ecke von #viewport ist doch die Posiition der Maus - (minus) der Position von #viewort, oder?
Als Beispiel (jetzt nur für eine Achse, X oder Y):
Die Maus ist auf Position 500px;
#viewport ist auf Position 400px;
Die Position der Maus, relativ zur oberen linken Ecke von #viewport ist 100px, also 500 - 400, also Maus - #viewport;
Richtig.
SInn der sache war vor allen dingen das man dadurch #viewport verschieben kann ohne sich gedanken darum machen zu müssen ob das auswirkungen auf den Code hat.
Was meinst du mit "... ob das Auswirkungen auf den Code hat"? Wird außerdem nicht #tileContainer verschoben?
Mal kurz, damit ich weiß ob ich das so richtig verstanden habe:
Der <div>, in dem sich die Bilder, aus denen sich die Karte zusammensetzt, befinden, wird verschoben, die Bilder bekommen dann, damit sie immer im sichtbaren Bereich bleiben, angepasste CSS top/left Angaben und angepasste scr Angaben, damit die Bilder immer die richtigen sind. Stimmt das so?
Es ging nur darum das die position auf der Seite keine Rolle spielt.
Also ob Du Deine Karte links oben oder rechts unten oder wasweissichwo hast.
Mit der Maus wird #tileContainer verschoben ja.
Ansonsten richtig so, ja (sofern ich mich richtig erinnere).
thwbm schrieb:
Tja das ist mir zu wenig code um daraus schlüsse zu ziehen.
Also vermute ich mal das Dir ein paar möglichkteiten noch nicht bewusst sind.
Schau DIr mal das an, vielleicht hilft Dir das:
[...]
Ich habe jetzt eine Datei geschrieben, die ein Bild, dass aus einer Datenbank gelesen wird, zurückliefert. Also so:
<img src="Bild.php?X=001&Y=001" alt="">
Das liefert mir dann das Bild, dass an Position X=1 und Y=1 stehen muss. Ich habe mal über eine while-Schleife überprüft, wie lange jedes Bild braucht zum laden:
<html> <head> <title> Eine menge Bilder </title> </head> <body> <?php $i = 1; while(1==1) { //Diese Bdingung wird warscheinlich noch sehr lange zutreffen ;-) echo $i; echo "<img src='Bild001.php?X=001&Y=001' alt=''><br>"; $i++; } ?> </body> </html>
Dieses Script hat mir nach 30 Sekunden Maximalzeit, die der Server an einer Seite lädt, bis er eine Fehlermeldung ausgibt genau 167247 Bilder angezeigt, also ungefähr 0,0002 Sekunden pro Bild. Die Seite hat aber wesentlich länger zum laden gebraucht. Ich habe unten noch den Quellcode reingesetzt.
Achso ich dachte du meinst das es über 30sek für jedes einzelne Bild braucht.
Aber da Du ja nicht mit einer php-while-schleife arbeitest sondern jedes bild über javascript(js) aufrufst dürftest du ja
nie probleme mit der php-zeitbeschränkung haben...
thwbm schrieb:
Mir sind noch ein paar Sachen aufgefallen:
1. Du verwendest in dem <img> Tag das Atribut "usemap="#worldtile"". Ist das Nötig? "usemap" ist doch dafür da, eine Link-Karte, also nur bestimmte Teile eines Bildes/einer Karte mir einer bestimmten Datei zu verlinken. Das ist doch erstmal garnicht nötig, denn das <map>, dass dazugehört ist ja leer.
Ja das ist überflüssig.
Die idee dahinter war das ja in zukünftigen anwendungen eventuell links auf der map sein könnten.
thwbm schrieb:
2. Wofür ist di Funktion "matrix"? Die If-Abfragen haben für mich keinen ersichtlichen Grund. Auch das
macht für mich keinen Sinn. Mit "matrix" werden ja die IDs der einzelnen Bilder bestimmt. Ist das überhaupt nötig, wenn ich immer "Bildernamen" wie "Bild.php?X=013&Y=026" habe?return ((xin*4)-4)+yin-1;
Ich weiss jetzt nicht welche matrix du meinst aber wmtx() ist mit deinem system tatsächlich überflüssig.
mtx() wird benötigt um die richtige tile-id anzusprechen (siehe erklärung für den tilepointer)
thwbm schrieb:
Datei zum Bilder auslesen:
<?php if(isset($_GET["X"]) and isset($_GET["Y"])) { $X = $_GET["X"]; $Y = $_GET["Y"]; $Verbindung = mysql_connect("***", "***", "***"); mysql_select_db("***"); $Abfrage = "SELECT FeldArt FROM karte WHERE X = '$X' and Y = '$Y'"; $Ergebnis = mysql_query($Abfrage); while($Row = mysql_fetch_object($Ergebnis)) { $FeldArt = $Row->FeldArt; } mysql_close($Verbindung); $Bild = imagecreatefrompng($FeldArt.".png"); header('Content-Type: image/png'); imagepng($Bild); imagedestroy($Bild); } ?>
MFG THWBM
Sieht soweit ganz ordentlich aus eventuell könntest Du später noch mit is_numeric überprüfen ob x/y eine zahl ist um abzusichern das sich keiner in dein system hacken kann. (siehe sql-injection)
Du könntest noch überprüfen wie oft Deine while schleife aufgerufen wird.
mehr als einmal wäre ja zu viel.
Bzw besser wäre ganz auf die Schleife zu verzichten Du willst ja immer nur exakt ein Ergebniss.
Führt Das...
$Row = mysql_fetch_object($Ergebnis); $FeldArt = $Row->FeldArt;
...zum gleichen Ergebniss?
Beitrag zuletzt geändert: 27.2.2013 23:28:53 von simuliertes -
Hallo,
ich melde mich nach etwa 1,5 Monaten wider zurück, dafür möchte ich mich entschuldigen, es lag nicht an desinteresse, sondern daran, dass ich etwas Zeit brauchte, um ein Funktionierendes Ergebnis zu fabrizieren, hier ist es (Die Verweise zu jQuery müssen u.U. Angepasst werden, damit es funktioniert):
Karte.php:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title> Karte </title> <script type="text/javascript" src="jquery-1.8.2.js"> </script> <script type="text/javascript" src="jquery-ui1.9.1.js"> </script> <link rel="stylesheet" href="jquery-ui1.9.1.css"> <style type="text/css"> #Sichtbereich{position:relative;top:0px;left:0px;width:100%;height:100%;overflow:hidden;} #Karte{position:absolute;top:0px;left:0px;width:100%;height:100%;cursor:move;} </style> <script type="text/javascript"> $(document).ready(function(){//Die Variabeln <?php if(isset($_GET["X"])){ echo"SichtmittelpunktX=".$_GET['X'].";"; }else{ echo"SichtmittelpunktX=0;"; } if(isset($_GET["Y"])){ echo"SichtmittelpunktY=".$_GET['Y'].";"; }else{ echo"SichtmittelpunktY=0;"; } ?> MausX=0; MausY=0; MausXKarte=0; MausYKarte=0; KarteVersatzX=0; KarteVersatzY=0; SichtbereichPosX=$("#Sichtbereich").position().left;//X-/Y-Position des "Fensters" auf die Karte SichtbereichPosY=$("#Sichtbereich").position().top; SichtbereichX=$("#Sichtbereich").width(); SichtbereichY=$("#Sichtbereich").height(); KarteX=0; KarteY=0; KarteBewegenErlaubt=false; KarteGezeichnet=false;//Gibt an, ob die Karte schon gezeichnet wurde BildBreite=5; BildBreitePX=0; KarteFelderX=1;//Kartengroesse in X- und Y-Richtung KarteFelderY=1; KarteFelderXGesammt=96; KarteFelderYGesammt=48; KarteX=$("#Karte").position().left;//X-/Y-Position der Karte inerhalb des Sichtbereichs KarteY=$("#Karte").position().top; KarteVerschiebungenX=0; KarteVerschiebungenY=0; KarteVerschiebungenZurueckgesetztX=0; KarteVerschiebungenZurueckgesetztY=0; KoordinateBildX=1; KoordinateBildY=1; KoordinateBildX1=0;//Die Koordninate des Bildes ganz Links KoordinateBildY1=0;//Oben KoordinateBildX2=0;//Rechts KoordinateBildY2=0;//Unten KoordinateBildAnpassen=true; AktuellerZoom=5;//Die Aktuelle Zoomstufe ArbeitenFensterOEffnenErlaubt=false; }); $(document).ready(function(){ $(document).mousemove(function(e){ MausX=e.pageX; MausY=e.pageY; }); }); function KarteBildFunktionBestimmung(X,Y){ Funktion=0; $.ajax({ type:"POST", async:false, url:"KarteBildFunktionBestimmung.php", data:"X="+X+"&Y="+Y, success:function(Rueckmeldung){ Funktion=Rueckmeldung; } }); if(Funktion!=0&&ArbeitenFensterOEffnenErlaubt){ FensterOEffnen(Funktion); } } $(document).mousemove(function(){//Um zu verhindern, dass den Fenster aufgeht und die Karte bewegt wird. ArbeitenFensterOEffnenErlaubt=false; }); $(document).mousedown(function(){ ArbeitenFensterOEffnenErlaubt=true; }); function ErgaenzeFuehrendeNullen(Zahl,Stellen){ if(Zahl<0){ Zahl=Zahl*(-1); Negativ=true; }else{ Negativ=false; } Zahl=Zahl.toString(); while(Zahl.length<Stellen){ Zahl="0"+Zahl; } if(Negativ==true){ Zahl="-"+Zahl; } return Zahl; } $(document).ready(function(){ $(document).mousemove(function(){ MausXKarte=MausX-SichtbereichPosX;//Relative Position der Maus, gemessen ab der oberen linken Ecke des Sichtbereichs MausYKarte=MausY-SichtbereichPosY; }); }); function MausUnten(){ KarteBewegenErlaubt=true; KarteVersatzX=MausXKarte-KarteX;//Der Versatz der Maus, relativ zur oberen linken Ecke der Karte KarteVersatzY=MausYKarte-KarteY; } function MausOben(){ KarteBewegenErlaubt=false; } $(document).mousemove(function(){ if(KarteBewegenErlaubt){ KarteBewegen(); } }); $(document).mousedown(function(){ if(KarteBewegenErlaubt){ KarteBewegen(); } return false; }); function KarteMaxPosition(){ if(KarteX>0){ KarteX=0; } if(KarteY>0){ KarteY=0; } if(KarteX+$("#Karte").width()<$("#Sichtbereich").width()){ KarteX=$("#Karte").width()*(-1)+$("#Sichtbereich").width(); } if(KarteY+$("#Karte").height()<$("#Sichtbereich").height()){ KarteY=$("#Karte").height()*(-1)+$("#Sichtbereich").height(); } } function KarteBewegen(){ KarteX=MausXKarte-KarteVersatzX; KarteY=MausYKarte-KarteVersatzY; if(SichtmittelpunktX!=0){ KarteX=(SichtmittelpunktX*BildBreitePX-SichtbereichX/2)*(-1); } if(SichtmittelpunktY!=0){ KarteY=(SichtmittelpunktY*BildBreitePX-SichtbereichY/2)*(-1); } KarteMaxPosition(); $("#Karte").css("left",KarteX);//Die Kartenposition wird aktuallisiert $("#Karte").css("top",KarteY); while(KarteX<BildBreitePX*(KarteVerschiebungenX+1)*(-1)){//Wenn die Karte nach links bewegt wird, sodass Bilder verschoben werden muessen... Y=1; KoordinateBildX=KoordinateBildX2; KoordinateBildY=KoordinateBildY1+1; while(Y<=KarteFelderY){ KoordinateBildX=ErgaenzeFuehrendeNullen(KoordinateBildX,3); KoordinateBildY=ErgaenzeFuehrendeNullen(KoordinateBildY,3); if(SichtmittelpunktX<=0){ if($("#KarteBild"+KoordinateBildX+""+KoordinateBildY+"").length<=0){ if(KoordinateBildX>=0&&KoordinateBildX<=KarteFelderXGesammt&&KoordinateBildY>=0&&KoordinateBildY<=KarteFelderYGesammt){//Verhindert, dass Bilder "Ausserhalb" der Karte geladen werden $("#Karte").append("<img src='Bild.php?X="+KoordinateBildX+"&Y="+KoordinateBildY+"' alt='' border='0' id='KarteBild"+KoordinateBildX+""+KoordinateBildY+"' class='KarteBild' style='position:absolute;top:"+(KoordinateBildY*BildBreitePX-BildBreitePX)+"px;left:"+(KoordinateBildX*BildBreitePX-BildBreitePX)+"px;width:"+BildBreitePX+"px;height:"+BildBreitePX+"px;' onclick=\"KarteBildFunktionBestimmung('"+KoordinateBildX+"','"+KoordinateBildY+"')\">"); } } } Y++; KoordinateBildY++; } KarteVerschiebungenX++; KarteVerschiebungenZurueckgesetztX++; KoordinateBildX1++; KoordinateBildX2++; if(KarteVerschiebungenZurueckgesetztX>=KarteFelderX){ KarteVerschiebungenZurueckgesetztX=0; } } while(KarteX>BildBreitePX*KarteVerschiebungenX*(-1)){//Wenn die Karte nach rechts bewegt wird, sodass Bilder verschoben werden muessen... Y=1; KoordinateBildX=KoordinateBildX1; KoordinateBildY=KoordinateBildY1+1; while(Y<=KarteFelderY){ KoordinateBildX=ErgaenzeFuehrendeNullen(KoordinateBildX,3); KoordinateBildY=ErgaenzeFuehrendeNullen(KoordinateBildY,3); if(SichtmittelpunktX<=0){ if($("#KarteBild"+KoordinateBildX+""+KoordinateBildY+"").length<=0){ if(KoordinateBildX>=0&&KoordinateBildX<=KarteFelderXGesammt&&KoordinateBildY>=0&&KoordinateBildY<=KarteFelderYGesammt){//Verhindert, dass Bilder "Ausserhalb" der Karte geladen werden $("#Karte").append("<img src='Bild.php?X="+KoordinateBildX+"&Y="+KoordinateBildY+"' alt='' border='0' id='KarteBild"+KoordinateBildX+""+KoordinateBildY+"' class='KarteBild' style='position:absolute;top:"+(KoordinateBildY*BildBreitePX-BildBreitePX)+"px;left:"+(KoordinateBildX*BildBreitePX-BildBreitePX)+"px;width:"+BildBreitePX+"px;height:"+BildBreitePX+"px;' onclick=\"KarteBildFunktionBestimmung('"+KoordinateBildX+"','"+KoordinateBildY+"')\">"); } } } Y++; KoordinateBildY++; } KarteVerschiebungenX--; KarteVerschiebungenZurueckgesetztX--; KoordinateBildX1--; KoordinateBildX2--; if(KarteVerschiebungenZurueckgesetztX<0){ KarteVerschiebungenZurueckgesetztX=KarteFelderX-1; } } while(KarteY<BildBreitePX*(KarteVerschiebungenY+1)*(-1)){//Wenn die Karte nach oben bewegt wird, sodass Bilder verschoben werden muessen... X=1; KoordinateBildX=KoordinateBildX1+1; KoordinateBildY=KoordinateBildY2; while(X<=KarteFelderX){ KoordinateBildX=ErgaenzeFuehrendeNullen(KoordinateBildX,3); KoordinateBildY=ErgaenzeFuehrendeNullen(KoordinateBildY,3); if(SichtmittelpunktY<=0){ if($("#KarteBild"+KoordinateBildX+""+KoordinateBildY+"").length<=0){ if(KoordinateBildX>=0&&KoordinateBildX<=KarteFelderXGesammt&&KoordinateBildY>=0&&KoordinateBildY<=KarteFelderYGesammt){//Verhindert, dass Bilder "Ausserhalb" der Karte geladen werden $("#Karte").append("<img src='Bild.php?X="+KoordinateBildX+"&Y="+KoordinateBildY+"' alt='' border='0' id='KarteBild"+KoordinateBildX+""+KoordinateBildY+"' class='KarteBild' style='position:absolute;top:"+(KoordinateBildY*BildBreitePX-BildBreitePX)+"px;left:"+(KoordinateBildX*BildBreitePX-BildBreitePX)+"px;width:"+BildBreitePX+"px;height:"+BildBreitePX+"px;' onclick=\"KarteBildFunktionBestimmung('"+KoordinateBildX+"','"+KoordinateBildY+"')\">"); } } } X++; KoordinateBildX++; } KarteVerschiebungenY++; KarteVerschiebungenZurueckgesetztY++; KoordinateBildY1++; KoordinateBildY2++; if(KarteVerschiebungenZurueckgesetztY>=KarteFelderY){ KarteVerschiebungenZurueckgesetztY=0; } } while(KarteY>BildBreitePX*KarteVerschiebungenY*(-1)){//Wenn die Karte nach unten bewegt wird, sodass Bilder verschoben werden muessen... X=1; KoordinateBildX=KoordinateBildX1+1; KoordinateBildY=KoordinateBildY1; while(X<=KarteFelderX){ KoordinateBildY=ErgaenzeFuehrendeNullen(KoordinateBildY,3); KoordinateBildX=ErgaenzeFuehrendeNullen(KoordinateBildX,3); if(SichtmittelpunktY<=0){ if($("#KarteBild"+KoordinateBildX+""+KoordinateBildY+"").length<=0){ if(KoordinateBildX>=0&&KoordinateBildX<=KarteFelderXGesammt&&KoordinateBildY>=0&&KoordinateBildY<=KarteFelderYGesammt){//Verhindert, dass Bilder "Ausserhalb" der Karte geladen werden $("#Karte").append("<img src='Bild.php?X="+KoordinateBildX+"&Y="+KoordinateBildY+"' alt='' border='0' id='KarteBild"+KoordinateBildX+""+KoordinateBildY+"' class='KarteBild' style='position:absolute;top:"+(KoordinateBildY*BildBreitePX-BildBreitePX)+"px;left:"+(KoordinateBildX*BildBreitePX-BildBreitePX)+"px;width:"+BildBreitePX+"px;height:"+BildBreitePX+"px;' onclick=\"KarteBildFunktionBestimmung('"+KoordinateBildX+"','"+KoordinateBildY+"')\">"); } } } X++; KoordinateBildX++; } KarteVerschiebungenY--; KarteVerschiebungenZurueckgesetztY--; KoordinateBildY1--; KoordinateBildY2--; if(KarteVerschiebungenZurueckgesetztY<0){ KarteVerschiebungenZurueckgesetztY=KarteFelderY-1; } } if(!KarteGezeichnet){ Y=0; KoordinateBildY=KoordinateBildY1+1; while(Y<=KarteFelderY){ X=0; KoordinateBildX=KoordinateBildX1+1; while(X<=KarteFelderX){ KoordinateBildX=ErgaenzeFuehrendeNullen(KoordinateBildX,3); KoordinateBildY=ErgaenzeFuehrendeNullen(KoordinateBildY,3); if(KoordinateBildX>=0&&KoordinateBildX<=KarteFelderXGesammt&&KoordinateBildY>=0&&KoordinateBildY<=KarteFelderYGesammt){//Verhindert, dass Bilder "Ausserhalb" der Karte geladen werden $("#Karte").append("<img src='Bild.php?X=" + KoordinateBildX + "&Y=" + KoordinateBildY + "' alt='' border='0' id='KarteBild" + KoordinateBildX + "" + KoordinateBildY + "' class='KarteBild' style='position: absolute; top: " + (KoordinateBildY * BildBreitePX - BildBreitePX) + "px; left: " + (KoordinateBildX * BildBreitePX - BildBreitePX) + "px; width: " + BildBreitePX + "px; height: " + BildBreitePX + "px;' onclick=\"KarteBildFunktionBestimmung('" + KoordinateBildX + "', '" + KoordinateBildY + "')\">"); } X++; KoordinateBildX++; } $("#Karte").append("<br>"); Y++; KoordinateBildY++; } KarteGezeichnet=true; } SichtmittelpunktX=0; SichtmittelpunktY=0; } $(document).ready(function(){ $(document).mousemove(function(){//UEberwachung, ob die Karte bewegt werden muss $(document).mouseup(function(){ MausOben(); }); $("#Karte").mousedown(function(){ MausUnten(); }); }); }); $(document).ready(function(){ $(".ZoomenPlus").mousedown(function(){ if(AktuellerZoom<=9){ BildBreite=BildBreite*1.05; AktuellerZoom++; $("#Zoomanzeige").html(AktuellerZoom); SichtmittelpunktX=(KarteX/BildBreitePX-SichtbereichX/2/BildBreitePX)*(-1); SichtmittelpunktY=(KarteY/BildBreitePX-SichtbereichY/2/BildBreitePX)*(-1); KarteGezeichnet=false; KarteAktuallisieren(); } }); $(".ZoomenMinus").mousedown(function(){ if(AktuellerZoom>=1){ BildBreite=BildBreite*0.95; AktuellerZoom--; $("#Zoomanzeige").html(AktuellerZoom); SichtmittelpunktX=(KarteX/BildBreitePX-SichtbereichX/2/BildBreitePX)*(-1); SichtmittelpunktY=(KarteY/BildBreitePX-SichtbereichY/2/BildBreitePX)*(-1); KarteGezeichnet=false; KarteAktuallisieren(); } }); $("#Zoomanzeige").html(AktuellerZoom);//Um den Anfangswert anzuzeigen function KarteAktuallisieren(){//Wird aufgerufen, wenn die Karte Gezeichnet wird, egal ob es sie schon einmal gab oder nicht. Noetig, wegen Fenstergroessenaenderung oder zoomen. SichtbereichPosX=$("#Sichtbereich").position().top;//Verschiedene Variabeln, die sich u.U. geaendert haben, werden aktuallisiert SichtbereichPosY=$("#Sichtbereich").position().left; SichtbereichX=$("#Sichtbereich").width(); SichtbereichY=$("#Sichtbereich").height(); $("#Karte").css("width",BildBreite*KarteFelderXGesammt+"%"); $("#Karte").css("height",BildBreite*KarteFelderYGesammt+"%"); $("#Karte").append("<img src='Bild.php?X=001&Y=001' alt='' border='0' id='BildBreiteBestimmung' class='KarteBild' style='position:absolute;top:0px;left:0px;width:"+BildBreite+"%;height:"+BildBreite+"%;'>"); BildBreitePX=$("#BildBreiteBestimmung").height(); $("#Karte").css("width",BildBreitePX*KarteFelderXGesammt); $("#Karte").css("height",BildBreitePX*KarteFelderYGesammt); KarteFelderX=Math.floor($("#Sichtbereich").width()/BildBreitePX+2); KarteFelderY=Math.floor($("#Sichtbereich").height()/BildBreitePX+2); $("#Karte").html("");//Die Karte wird restlos geleert KarteVerschiebungenX=0; KarteVerschiebungenY=0; KarteVerschiebungenZurueckgesetztX=0; KarteVerschiebungenZurueckgesetztY=0; KoordinateBildAnpassen=true; KoordinateBildX=0; KoordinateBildX1=0; KoordinateBildX2=KarteFelderX+1; KoordinateBildY=0; KoordinateBildY1=0; KoordinateBildY2=KarteFelderY+1; KarteBewegen(); } KarteAktuallisieren(); $(window).resize(function(){//Groessenanpassung wenn das Fenster seine Groesse aendert SichtmittelpunktX=(KarteX/BildBreitePX-SichtbereichX/2/BildBreitePX)*(-1); SichtmittelpunktY=(KarteY/BildBreitePX-SichtbereichY/2/BildBreitePX)*(-1); KarteGezeichnet=false; KarteAktuallisieren(); }); }); </script> </head> <body> <div id="Sichtbereich"> <div id="Karte"> </div> </div> </body> </html>
Bild.php:
<?php if(isset($_GET["X"]) and isset($_GET["Y"])) { $X = mysql_real_escape_string($_GET["X"]); $Y = mysql_real_escape_string($_GET["Y"]); //Hier könnte eine Datenbankverbindung hin, die an Hand von "$X" und "$Y" die "FeldArt" ausliest //Habe ich zur Vereinfachung weggelassen $FeldArt = "1_2_1"; header('Content-Type: image/png'); $Bild = imagecreatefrompng($FeldArt.".png"); header('Content-Type: image/png'); imagepng($Bild); imagedestroy($Bild); } ?>
Ja, ich weiß, sehr viel Text, aber so sollte es funktionieren, wenn ihr diese zwei Dateien in einen Ordner Packt und zusätzlich eine Datei mit dem Namen "1_2_1.png", die als Bild dient hinzufügt. In meinem Fall ist die "1_2_1.png" 32x32px groß. Sollte jemand auf Fehler stoßen, freue ich mich über jede Mitteilung. Wenn jemand fragen hat, einfach fragen. Die Einrückung habe ich weggelassen, um Zeichen zu sparen.
MFG THWBM
Beitrag zuletzt geändert: 20.4.2013 13:02:57 von thwbm -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
