Ankündigung

Einklappen
Keine Ankündigung bisher.

Frage: Objekte zeichen und definieren in PHP

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Frage: Objekte zeichen und definieren in PHP

    Hallo,

    bin neu hier, habe Erfahrung in der Programmierung, jedoch nicht im WEB... PHP und MySQL sind 10 Jahre her...

    ich habe ein Problem und bin auf der Suche nach einem Lösungsweg von dem es vermutlich 1000 gibt.

    Würde mich sehr freuen über die Richtung die zum realiseren vom Vorteil wären. Damit ich weiß wo ich anfangen soll



    Mein Wunsch:

    Ich würde gerne mehrere horizontale Linien im Browser zeichnen wollen. Die sollten definiert sein. z.B. A,B,C, ... und einen Anfang und Ende haben.

    sagen wir die erste Linie startet bei (x = 0, y = 50) bis (x = 500 y = 50)
    die zweite bei (x = 50, y = 100) bis (x = 100, y = 100)

    Dann würde es vermutlich so aussehen:

    _________________________________________
    __________


    Diese Linien würde ich gerne mit Punkten ansprechen können.
    Über ein Eingabefeld würde ich z.B. gerne auf der ersten Linie bei Punkt x = 50, y = 50 einen sichtbaren Punkt setzen.
    Dieser sollte z.b. was anzeigen können wenn ich mit der Maus drüber fahre (MouseOverEvent)

    Hintergrund:
    Es sollen mit den Linien Strecken dargestellt werden und die Punkte sollen aktivitäten sein. Z.b. Stop eingelegt, getankt, etc...
    Startpixel einer Linie wäre dann z.B. der Kilometer 0 und das ende z.b. Kilometer 300
    Wurde bei 150km eine Pause eingelegt, wäre in der hälfte der ersten Linie ein Punkt.

    Zeichnen kann ich in PHP ja mit "imageline"
    Aber wie bekomme ich das hin, dass ich quasi auf die KM zugreife um später Punkte auf die Linien zu legen und die Punkte mit einem mouse Over Event zu steuern?
    Damit ich gleich in die richtige Richtung laufe. Das ganze soll später noch skalierbar (zoom) sein.


    Meine erste Idee wäre PHP + Javascript - Bin ich da auf dem richtigen Weg oder gibt es vielleicht eine bessere Alternative ?

    Bedanke mich vorab für jede Hilfe.
    Besten Dank

  • #2
    Ich würde das nicht serverseitig, sondern direkt im Client mit JavaScript machen. Stichwort: Canvas

    Kommentar


    • #3
      Hallo hellbringer,

      Ja natürlich.... Das habe ich schonmal gehört

      Javascript Canvas!
      Damit kann ich was anfangen und schonmal rum experimentieren.

      Vielen Dank für den Tip

      Kommentar


      • #4
        Ich würde auch mal über SVG nachdenken.

        Ein kleines Beispiel, welches ich mal anhand eines kleinen Logos erstellt habe...

        https://jsfiddle.net/z4g195js/

        Kommentar


        • #5
          Es sollen mit den Linien Strecken dargestellt werden und die Punkte sollen aktivitäten sein. Z.b. Stop eingelegt, getankt, etc...
          Startpixel einer Linie wäre dann z.B. der Kilometer 0 und das ende z.b. Kilometer 300
          Wurde bei 150km eine Pause eingelegt, wäre in der hälfte der ersten Linie ein Punkt.
          dass ich quasi auf die KM zugreife
          was ist KM ?

          Stercken lienien stops darstellen, ich würde versuchen das ganzen mit openstreetmap oder ähnlich zu realisiern.
          als ausgabe eignet sich auch svg.

          Kommentar


          • #6
            Würde hier wohl auch SVG nehmen.

            Mal ein Beispiel nach obigen Vorgaben
            HTML-Code:
            <body>
            
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"     viewBox="0 0 700 400" resizable>
                    <line x1="0" y1="180" x2="700" y2="180" stroke="black" stroke-width="20px"/>
                    <g>
                        <circle cx="125" cy="180" r="20" />
                        <text fill="blue" x="10" y="160">KM 125: Tankstopp bei DEA</text>
                    </g>
                    <g>
                        <circle cx="376" cy="180" r="20" />
                        <text fill="blue" x="10" y="160">KM 376: Tankstopp bei Shell</text>
                    </g>
                    <line x1="0" y1="240" x2="426" y2="240" stroke="black" stroke-width="20px"/>
                    <g>
                        <circle cx="254" cy="240" r="20" />
                        <text fill="blue" x="10" y="220">KM 254: Mittagessen</text>
                    </g>
                </svg>
            ...
            Das Einblenden über hover lässt sich mit SVG leicht über CSS realisieren.


            Code:
            /* CSS */
                svg { border: 1px solid brown; width: 50%; }
                svg text { display: none; font-size: 1.5em; }
                svg circle:hover { fill: red; }
                svg circle:hover~text{ display: inline; }
            skaliert zudem automatisch

            Kommentar


            • #7
              Blaue punkte auf ner schwarzen linie ?
              neongrün
              Wieso gibts Du die stroke-wdth nicht ohne px an, scaliert einfacher denke ich.

              Kommentar


              • #8
                Da habe ich mir jetzt nicht allzu viele Gedanken gemacht, einfach kopiert und ein wenig angepasst.

                Soll ja nur das allgemeine Vorgehen vor allem im Zusammenspiel HMTL, SVG und CSS darstellen.
                Für Details sollte man dann schon mal ein Tutorial durcharbeiten.

                Kommentar

                Lädt...
                X