"Besuchte" Koordinaten eines Bildes

S

Slater

Erfahrenes Mitglied
Ich habe folgendes Problem:
Die User wollen bei mir auf einem Bild (Karte) ihre gemachte Route einzeichnen.
jetzt habe ich alles geschafft (Bild-upload mit php etc..) bis auf das Eine:
Ich will mit php dann auf das Bild (Karte) eine Linie (nicht gerade sondern eine "Pixel-Schlange") zeichnen. Das habe ich auch schon geschafft.
jetzt brauche ich aber dazu die "besuchten" Koordinaten des Bildes.
ich denke, das kann man irgendwie mit javascript
-> onMousedown wird die "Aufzeichnung" der Koordinaten gestartet.
-> onMouseUp wird die "Aufzeichnung" beendet.
die Koordinaten werden in ein Array geschrieben und ich kann sie dann weiterverwenden.

wie aber jetzt das Script aussehen soll, keine Ahnung...

Kann mir da jemand helfen?

Danke
 
oh, das ist genau das was ich suche ;) danke

jetzt sieht das script ja folgendermassen aus:

Code: 
<html>
<head>

<script type="text/javascript">

var pressed = 0;
var cx = new Array(), cy = new Array;

function checkit() {
  if (pressed == 1) {
    window.document.getElementById("coords").innerHTML = (event.x - 100) + "<br>" + (event.y - 20);
    cx.push(event.x - 100);
    cy.push(event.y - 20);
  }
}

function showvalues() {
  for (i=0; i<cx.length; i++) {
    window.document.getElementById("values").innerHTML = window.document.getElementById("values").innerHTML + cx[i] + " : " + cx[i] + "<br>";
  }
}

</script>

</head>

<body onDragStart="return false;">

<img src="Bild.jpg" onMouseMove="checkit();" style="position:absolute;left:100px;top:20px;" onMouseDown="pressed=1;" onMouseUp="pressed=0;">

<br><br>
<span id="coords">&nbsp;</span>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type="Button" value="Werte anzeigen" onClick="showvalues();">

<br><br>
<span id="values"></span>
</body>
</html>

es funktioniert noch nicht ganz :(
müsste es bei new Array nicht noch () haben -> new Array ()
was muss ich noch hinzufügen, damit der array mir dann die "vielen" Werte ausgibt?

merci
 
Hallo,

ja - die () gehören da noch hin... Desweiteren musst du in follgender Zeile das zweite cx ín cy ändern.
Code: 
window.document.getElementById("values").innerHTML = window.document.getElementById("values").innerHTML + cx[i] + " : " + cx[i] + "<br>";
dann sollte er eigentlich alles ausgeben... Solltest du Opera benutzen, wird innerHTML nicht Arbeiten, dann kannst du dir das ganze auch via alert ausgeben lassen. Einfach Showvalues() ergänzen:
PHP: 
function showvalues() {
  var all;
  for (i=0; i<cx.length; i++) {
    //window.document.getElementById("values").innerHTML = window.document.getElementById("values").innerHTML + cx[i] + " : " + cy[i] + "<br>";
    all += cx[i] + " : " + cy[i] +"\n";
  }
  alert(all);
}

Was noch zu bedenken wäre ist, ob es nicht sinnvoll wäre auch eine OnClick Handler einzubauen, da beim Drag´n´Drop doch sehr sehr viele Coords gespeichert werden. Mit OnClick wäre es halt einfach möglch nur einige "Wegmarken" zu setzen...

bye
 
ok, soweit so gut.
das war ja bis jetzt echt spitze ;)

doch ich möchte nachdem man "Werte anzeigen" geklickt hat anstatt die Zahlen unten ein Formular:

PHP: 
<?php
print "<form action=Bild_zeichen.php method=post>
<input type=hidden value=\"$values\" name=Wegpunkte>
<input type=button value=\"Werte eintragen\">
</form>";
?>

so etwas in der art.
aber wie bekomme ich die Koordinaten als $values??

Danke
 
Hallo,

bin mir nicht sicher ob ich dich richtig verstanden habe - du willst die Coords in ein hidden-Feld Übertragen, damit du sie weiterverarbeiten kannst. Soweit richtig? Ok, dann mach

PHP: 
//in den Body das Formular eintragen:
//!! WICHTIG: Formularnamen nicht vergessen

<form name="transfer" action=Bild_zeichen.php method=post>
<input type=hidden name="Wegpunkte">
<input type=button value=\"Werte eintragen\">
</form>


//dann noch die Funktion showvalues() ändern in...

function showvalues() {
  for (i=0; i<cx.length; i++) {
    document.transfer.Wegpunkte.value += cx[i] + " : " + cy[i] +"\\n";
  }
  alert("hidden:\\n"+document.transfer.Wegpunkte.value);
}
//den Alert kannst auch entfernen - ist nur zum testen...

bye

//edit: die beiden blauen "n" im Code sind \n (Zeilenumbruch) - leider wird vom Board der \ entfernt...
 
Zuletzt bearbeitet:
So, habs etz mit nem Formular gemacht.

Mit PHP wertest du das ganze dann so aus:
PHP: 
$xwerte_array = explode(",", $_POST['xcoords']);
$ywerte_array = explode(",", $_POST['ycoords']);


Du musst das Fenster folgendermassen aufrufen um Verschiebungen durch den Fensterrahmen zu vermeiden:
PHP: 
window.open("zeichenen.html", "z", "width=300, height=500");
Natürlich entsprechend dem angaben in Script abgleichen.


Das '+ 28' in Zeile 24 ist, um die Höhe der Titelleiste auszugleichen. Bei der Luna, oder anderen aufgemozten Styles von Windows XP wirds warscheinlich etwas mehr sein müssen.



Das Problem: Man kann auch, durch das bewegen der Maus weg vom Bild, minus-Werte eingeben. Es mit onMouseOver zu prüfen hab ich nicht hingekriegt und das Fenster zu verkleinern geht auch nicht.

Einzige Möglichkeit wäre, dass du dann einfach per PHP (oder gleich per JavaScript, dann gibts weniger Traffic) die Koordinaten die ausserhalb des Bildes liegen rausfilterst.


//Edit: Ups, versehentlich wegeditiert: IE only, wegen dem event Objekt.
 

Anhänge

Zuletzt bearbeitet von einem Moderator:
@Nuinmondo
Das mit IE only ist mir auch grad aufgefallen :( - hast eine Idee wie man es unter allen Browsern zum laufen bekommt?

@Slater
soll/muss es Crossbrowser kompatibel sein?
 
Wenn du die "schlechten" Coords mit JS rausfiltern willst, würde es ungefähr so aussehen:
PHP: 
function checkit() {
  if (pressed == 1) {
    window.document.getElementById("coords").innerHTML = (event.x - 100) + "<br>" + (event.y - 20);
    if( (event.x-100 < 0 || event.y-20 < 0) || (event.x-100> 714 || event.y-20 > 500) ){
        //do nothing
    }
    else{
        cx.push(event.x - 100);
        cy.push(event.y - 20);
    }
  }
}
wobei 714 und 500 die Maße meines Beispiel Bildes sind...

bye
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück