Erstellen von Grafiken anhand von Formulardaten

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

  • Erstellen von Grafiken anhand von Formulardaten

    Hallo liebe php-Gemeinde,

    da mir Google keine zufriedenstellende Antwort liefern konnte (ich hoffe mal ich habe richtig gesucht ;-) ), wende ich mich nun mal an euch.

    Mein Problem ist Folgendes:

    Ich möchte ein Formular bauen, in das man Werte (Höhe, Breite, Tiefe) für eine beliebige Form eingeben kann (also alles von Rechteck bis Polygone).
    Nach absenden des Formulars soll dynamisch die passende Grafik zu den eingaben (wenn Möglich mit entsprechenden Seitenverhältnissen) generiert und auf der Seite ausgeben werden.
    Ich bin bei meinen Recherchen auf die GDLib gestoßen, diese scheint mir aber zu unflexibel. Gibt es hierzu alternativen?

    Ich hoffe jemand hat konstruktive Vorschläge zur Lösung, egal ob Ansätze, vorhandene Module oder Scripte. Wenn es denn so mit PHP überhaupt zu realisieren ist.

    Danke schonmal im Voraus

    Grüße

    Patrick

    P.S. Hoffe bin im richtigen Bereich ;-)

  • #2
    Sicherlich ist die Generierung von einfachen geometrischen Figuren mit PHP möglich, doch hast Du Dich schon mit den Möglichkeiten auseinander gesetzt, die HTML5 plus Canvas bietet?

    Hatte auch mal etwas mit dem SVG-Format experimentiert. Wenn ich meine Testdateien wieder finden würde, wäre es noch besser, war jedenfalls nicht so sehr kompliziert.

    Edit: Habe eine Datei wiedergefunden. Muss mit der Endung .svg gespeichert werden und kann dann im Browser aufgerufen werden.

    HTML-Code:
    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <ellipse cx="50" cy="30" rx="40" ry="20" />
      <ellipse cx="150" cy="30" rx="40" ry="20" />
      <ellipse cx="250" cy="120" rx="80" ry="80" fill="#FF0000"/> 
    </svg>
    Zuletzt geändert von Melewo; 08.01.2013, 15:07.

    Kommentar


    • #3
      Danke erst mal für die schnelle Antwort.

      Mit HTML5 habe ich mich noch nicht auseinander gesetzt, aber werde ich dann die Tage mal tun, wenn es dort solche Möglichkeiten gibt.

      Zu der Lösung per .svg-Datei:
      - Kann ich hier auch Achsen (etc.) angeben um das Ganze 3-Dimensional darzustellen?
      - Weißt du in welcher Einheit die Werte stehen (ob px oder Ähnliches) ?

      Ansonsten ein interessanter Ansatz, da die Werte ja mit Variablen ersetzt werden können. Z.b. Php-Variablen einsetzen und das Ganze dann in eine externe Datei schreiben ("file_put_content") und entsprechend Speichern.
      Oder lässt sich eine svg.-Datei nicht so behandeln?


      Gruß

      Kommentar


      • #4
        Zitat von mpiric Beitrag anzeigen
        - Kann ich hier auch Achsen (etc.) angeben um das Ganze 3-Dimensional darzustellen?
        Habe nicht alles gelesen, eigentlich nur überflogen. Habe ich jetzt auch nicht vor alles zu lesen. Wird jedenfalls einiges möglich sein:

        http://svg.tutorial.aptico.de/svg-workshop.pdf

        Zitat von mpiric Beitrag anzeigen
        - Weißt du in welcher Einheit die Werte stehen (ob px oder Ähnliches) ?
        Zitiere mal nur:
        Mit den Attributen width und height wird die Breite und Höhe der gesamten Grafik festgelegt. Als Werte
        sind Zahlen mit optionaler Maßangabe möglich. Wird keine Maßangabe angegeben, wird Pixel verwendet.
        Mögliche Maßangaben in SVG sind:
        • em - relative Maßangabe, bezieht sich auf die verwendete Schriftgröße
        • ex - relative Maßangabe, bezieht sich auf die Größe des großen X der verwendeten Schrft
        • px - Pixel, default-Einheit
        • pt - Punkt
        • pc - Pica
        • cm - Centimeter
        • mm - Millimeter
        • in - Inch
        • % - Prozentangabe
        Zitat von mpiric Beitrag anzeigen
        Z.b. Php-Variablen einsetzen und das Ganze dann in eine externe Datei schreiben ("file_put_content") und entsprechend Speichern.
        Sollte problemlos möglich sein.

        Kommentar


        • #5
          Danke dir.
          Werde mich dann mal an das Tutorial setzen.

          Sollte sich was ergeben melde ich mich wieder.


          Gruß

          Kommentar


          • #6
            Es funktioniert recht gut mit dem Lösungsvorschlag.

            Einfache Formen lassen sich recht gut darstellen.

            Lösung für einen Quader: (die Variablen werden zum Test per GET gefüllt)

            PHP-Code:
            $width = $_GET['width'];
            $height = $_GET['height'];
            $depth = ($_GET['depth']);
            $filename = 'zeichnung.svg';

            $data='<?xml version="1.0" standalone="no" ?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
            <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <!-- Hinten -->
                <rect x="'.$depth.'" y="0" width="'.$width.'" height="'.$height.'" style="fill:red;" />
            <!-- Vorne -->
                <rect x="0" y="'.$depth.'" width="'.$width.'" height="'.$height.'" style="fill:red;" />
            <!-- Oben Links -->
                <line x1="0" y1="'.$depth.'" x2="'.$depth.'" y2="0" style="stroke:black; stroke-width:5px;" />
                <polygon fill="red" points="'.$depth.' 0, 0 '.$depth.', '.$depth.' '.$depth.'"/>
            <!-- Oben Rechts -->
                <line x1="'.$width.'" y1="'.$depth.'" x2="'.($depth+$width).'" y2="0" style="stroke:black; stroke-width:5px;" />
            <!-- Unten Rechts -->
                <line x1="'.$width.'" y1="'.($depth+$height).'" x2="'.($depth+$width).'" y2="'.$height.'" style="stroke:black; stroke-width:5px;" />
                <polygon fill="red" points="'.$width.' '.($depth+$height).', '.($depth+$width).' '.$height.', '.$width.' '.$height.'"/>
            <!-- Border -->
                <!-- Hintergrund -->
                <line x1="'.$depth.'" y1="0" x2="'.$depth.'" y2="'.$height.'" style="stroke:grey; stroke-width:5px;" stroke-dasharray="8,6" stroke-opacity="0.5"/>    
                <line x1="0" y1="'.($depth+$height).'" x2="'.$depth.'" y2="'.$height.'" style="stroke:grey; stroke-width:5px;" stroke-dasharray="8,6" stroke-opacity="0.5"/>
                <line x1="'.$depth.'" y1="'.$height.'" x2="'.($width+$depth).'" y2="'.$height.'" style="stroke:grey; stroke-width:5px;" stroke-dasharray="8,6"  stroke-opacity="0.5"/>
                <!-- Vordergrund -->
                <line x1="'.$depth.'" y1="0" x2="'.($depth+$width).'" y2="0" style="stroke:black; stroke-width:5px;" />
                <line x1="0" y1="'.$depth.'" x2="0" y2="'.($depth+$height).'" style="stroke:black; stroke-width:5px;" />
                <line x1="0" y1="'.$depth.'" x2="'.$width.'" y2="'.$depth.'" style="stroke:black; stroke-width:5px;" />
                <line x1="0" y1="'.($depth+$height).'" x2="'.$width.'" y2="'.($depth+$height).'" style="stroke:black; stroke-width:5px;" />
                <line x1="'.$width.'" y1="'.$depth.'" x2="'.$width.'" y2="'.($depth+$height).'" style="stroke:black; stroke-width:5px;" />
                <line x1="'.($width+$depth).'" y1="0" x2="'.($width+$depth).'" y2="'.$height.'" style="stroke:black; stroke-width:5px;" />
            </svg>
            ';

            file_put_contents($filename,$data);
            ?>
            <html>
            <head>
            </head>
            <body>
            <img src="pfad/zur/Datei/zeichnung.svg" />
            </body>
            </html>
            Noch nicht ganz schön, aber erfüllt immerhin schon mal den gewünschten Zweck.
            Also Danke nochmal.

            Kommentar

            Lädt...
            X