Id mit Positions Angaben auslesen

  • Ich habe zb eine Seite mit 100 Elementen.


    Bekommen jetzt die Angaben left:100px und top:100px

    Wie komme ich jetzt an die Id des Elements ran das genau unter den Positions Angaben liegt ?

    Mouseover und co darf nicht benutzt werden , das wäre ja nicht das problem.


    Irgendwie Googel ich mich gerade blöde und finde nicht den richtigen Ansatz.

    Hat da einer das richtigen Stichwort für mich ?

  • Was genau hast Du vor?


    Beispiel, wie ich es verstanden habe:

    Alle <div> auf Position left:100px; top:100px;:

  • Im anderen Forum brauchte einer Hilfe weil er bei einen Dartspiel bei jeden Wurf mehrere Rechnungen machen wollte.

    Bei den problem konnte ich ihn dann helfen und das Thema wahr erledigt.


    Da hatte ich mir gedacht ich baue das Spiel jetzt auch selber zu Ende für mich.

    Da man ja keine Pfeile auf den Bildschirm schmeißen kann habe ich ein Fadenkreutz erstellt der ohne sinn und verstand ( Zufall ) über die Dartscheibe Tanzt.


    Auf den klick des Buttons ( WURF ) hält das Kreutz an und soll mit den Wert ( Element ) unter den Kreutz sagen.


    Dein Code sieht auf den ersten Blick schon mal gut aus.


    Aber vieleicht geht es auch anders und ich habe es falsch angefangen ?

    https://codepen.io/basti1012/pen/voVqLo?editors=1111

  • PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.

    Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.

  • Ich hätte gedacht das es einfacher geht ,aber da habe ich wohl falsch gedacht.


    Bei den Code von Arne bekomme ich immer ein ein Leeres Resultat. Also ein leeres array.

    Selbst wenn ich bei top und left Werte eingebe wo auf jedenfall ein Circle ist.

    Gebe ich aber zb top >= 0 und left >= 0 ein dann findet er auch alles was auf der Seite ist .

    Irgendwie ist da noch ein Harken drinne den ich noch nicht gefunden habe.


    Den Link von Sempervivum habe ich mir auch angeschaut doch das verwirrt mich jetzt leicht.

    Gut das

    PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.

    du das schon geschrieben hast sonst hätte ich mich dumm probiert,bzw schlau probiert weil dumm bin ich schon.

    Abpropo dumm.


    Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.

    Da ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.


    Wäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?


    Hätte nicht gedacht das ich mir daran die Zähne ausbeiße.

  • Zitat

    Da ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.

    Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.

    Zitat

    Wäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?

    Da bin ich mir gar nicht mal sicher. Ich habe früher mal mit jCanvas solche Kreissegmente gezeichnet und das wurde ganz gut unterstützt und war relativ einfach. Nicht jedoch die Prüfung, ob ein Koordinatenpaar in einer Form liegt. Außer bei Klick, aber das geht ja bei dem Fadenkreuz nicht.

    Auf jeden Fall hat Canvas den Nachteil, dass es nicht verlustfrei skaliert werden kann.

  • Mit jCanvas kannst Du ganz leicht Kreisbögen zeichnen:

    https://projects.calebevans.me/jcanvas/docs/arcs/

    gleich das erste Beispiel.

    Ich finde jedoch nichts, wie man feststellen kann, ob ein Koordinatenpaar innerhalb eines solchen Kreisbogens liegt. Da ist wohl auch angesagt, es selbst auszurechnen. Wenn es ausreicht, die Farbe eines Feldes zu ermitteln, kann man das jedoch in Canvas sehr leicht, weil man Zugriff auf die RGB-Werte hat.

  • Ich habe mir schon immer vorgenommen mal mehr mit Canvas zu machen, aber ich traue mich da noch nicht richtig dranne , vor allem nicht gleich so was wie die Dartscheibe wo man über 60 Felder brauch :(

    Ich fange mal mit einen Würfel an :)


    Zu meinen problem.

    Der Code von Arne Drews würde funktionieren wenn es div elemente sind .

    Ich habe den Code mal Komplette mit einen * ausprobiert , und alle divs geben mir Pixel Angaben zurück.

    Die Circle Svg Elemente geben mir nur auto, auto zurück.


    Habe das mal im Codepen so gelassen zum ankucken.


    Ist das mit den Svg irgendwie anders oder habe ich da was übersehen ?

  • Ja, bei SVG ist das schon anders. Ich sehe jedoch noch ein ganz anderes Problem:

    Ich kenne die Spielregeln von Darts leider nicht, aber sicherlich musst Du doch prüfen, ob der Pfeil ein bestimmtes Feld getroffen hat bzw. ein bestimmtes Kreissegment. Da ein solches Kreissegment jedoch als Element gar nicht existiert, sondern nur der ganze Kreis, kannst Du, wenn Du die Koordinaten des ganzen Elementes prüfst, nur heraus bekommen, ob der ganze Kreis bzw. das umschließende Quadrat getroffen wurde und nicht ein einzelnes Segment.

    Jedenfalls, wenn ich deinen Code richtig interpretiere, ich habe nicht bis ins letzte Detail hinein geschaut.

  • Es gibt viele verschiedene Dart Varianten.

    Bei den Standart Dart ( Was auch in den Meisterschaften gespielt wird ) wird von einer Zahl ( hier 501 ) runtergespielt .

    Man darf nicht überwerfen und man muß direkt auf 0 Punkte kommen.


    Jenach dem gibt es auch noch Doppelout , das heißt das der letze Wurf durch eine Doppel-Punkte Feld geschehen muß.

    Zb du hast noch 40 Punkte , also muß man doppel 20 Treffen , das wäre das rote Feld ganz oben.


    Der äußerste Ring zählt doppelt, und der innere Ring 3 Fach.

    Der mittel Punkt 50 Punkte, und der kleine Ring um der Mitte 25 Punkte.

    Die restlichen Felder zählen einfach mit deren entsprechen Werten , die zur Zeit nur im Code sichtbar sind bei data-points.

    Das wahr erstmal das wichtigste .


    Damit hast du natürlich recht das man wissen muss in welchen der 62 Felder der Pfeil gelandet ist.

    Ich wahr auch gerade bei Stackoverflow und habe nach detect svg position und co gesucht aber noch nix finden können.


    Kucke mir jetzt dein Link genauer an , beim ersten blick sah es schon mal viel versprechend aus.

  • Oh man. Svg und Canvas ist echt nicht mein ding.Jetzt weiß ich auch warum ich das immer nach hinten geschoben habe.

    Zumindest habe ich jetzt schon mal die positionen der 6 Ringe.Ist noch nicht 100% aber das paßt soweit wenn man Border und co mit beachtet.


    Nun muß ich noch an den Feld kommen wo der Pfeil im Ring ist. Jetzt zeigt er mir an das zb beim außen Ring 20 Felder mit den gleichen Werten.

    Ich glaube langsam das eine Dartscheibe aus divs einfacher währe.

    Leider habe ich auch noch nix vergleichbares gefunden, wo das mit Canvas oder Svg gemacht wird.

    Warum suche ich mir eigentlich immer so was komplziertes aus ?;(

    Sollte lieber beim kleinen 1 x 1 beiben.:)

  • Da wirst Du wohl an ein wenig Mathe nicht vorbei kommen:

    Code
    1. // xCenter und yCenter sind die Koordinaten des Mittelpunktes der Darts-Scheibe
    2. // x und y sind die Koordinaten des Mittelpunktes des Fadenkreuzes
    3. var deltaX = x - xCenter, deltaY = y - yCenter;
    4. var dist = hypot(deltaX, deltaY); // der Abstand
    5. var angle = asin(deltaY / dist); // der Winkel im Bogenmass
    6. var deg = angle / Math.PI * 180; // der Winkel in Grad

    (ungetestet). Aus dem Winkel und dem Abstand ist es dann kein Problem, das Feld zu berechnen.

  • Ja ich und Kreis rechnen hat natürlich nicht so richtig funktioniert.

    Am Anfang hattest du ja erwähnt das deine erste Idee wegen den dasharray wohl nicht klappt.

    Jetzt habe ich circle mit path ausgetauscht und es klappt auch mit den Code von Arne schon mal ganz gut.

    Verstehe ich zwar nicht warum circle so anders ist als path , aber gut , wieder was dazu gelernt.


    Durch solche spielerein findet man auch wieder andere sachen die wieder kein sinn ergeben.

    Warum fliegen die Pfeile die durch createElement erstellt wurden nicht ins Fenster rein ( transition ) ?


    Warum wird aus ein klein vorhaben zum Schluss doch eine größere Sache als wie man gedacht hat ?


    Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.

    Das stmmt. Das wahr nee Uhr .Da hatte ich aber auch mehr Glück als wissens.

  • Sempervivum , ich habe mal eine Theoretische Frage ob das gehen würde.


    Du kennst ja die X-Box und Playstation , wo man mit Virtuelen Sachen auf den Fehrnseher schmeißt und co.

    Könnte man das zb auch beim Dart spiel machen ?.

    Ich könnte mir vorstellen das Canvas oder bestimmte Javascript Plugins das erkennen könnte ob zb eine Hand näher zum Laptop ( Kamera ) kommt.


    Dir Wurfrichtung wird wohl kaum möglich sein zu erkennen, aber eine normale Wurf bewegung könnte doch klappen , oder was sagst du als Canvas Fachmann ?


    Könnte mir denken das Php das auch kann , doch eigentich sollte es bei Js bleiben weil könnte mir denken das bei php einiges an Datenvolumen zusammen kommen könnte beim Spielen dann ?