Erstellen von Grafiken anhand von Formulardaten

**Melewo** · 08.01.2013, 14:57

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>

**mpiric** · 08.01.2013, 15:17

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ß

**Melewo** · 08.01.2013, 15:46

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.

**mpiric** · 08.01.2013, 15:50

Danke dir.
Werde mich dann mal an das Tutorial setzen.

Sollte sich was ergeben melde ich mich wieder.

Gruß

**mpiric** · 11.01.2013, 15:47

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.

Erstellen von Grafiken anhand von Formulardaten