Stern mit PHP erstellen - Quellcode
Autor
Flitze
Klicks 68768
Keywords:
Stern mit PHP zeichnen, Stern mit PHP erzeugen, Sternformel, geometrische Grundlagen eines Sterns, mathematische Formel für einen Stern, Stern mit imagefilledpolygon() erzeugen, Quellcode, Programmcode, Sternerstellung
Klicks 68768
Rating für Stern mit PHP erstellen
7.3 von 10
Bewertungen38
Stand
19.06.2010
7.3 von 10
Bewertungen38
Keywords:
Stern mit PHP zeichnen, Stern mit PHP erzeugen, Sternformel, geometrische Grundlagen eines Sterns, mathematische Formel für einen Stern, Stern mit imagefilledpolygon() erzeugen, Quellcode, Programmcode, Sternerstellung
Breadcrumb:
Tutorials » Stern mit PHP erstellen » Stern mit PHP erstellen - Quellcode
3. Umsetzung als Quellcode
[ADSENSE_LINE]Damit es leichter nachvollziehbar ist, beginne ich erstmal damit, das äußere 5-Eck darzustellen.
PHP:
<?php
error_reporting(E_ALL);
function drawStar($x, $y, $radius, $spikes) {
// $x, $y -> Position in the Image
// $radius -> Radius of the Star
// $spikes -> Number of Spikes
$coordinates = array();
$angel = 360 / $spikes ;
// Get the coordinates of the outer shape of the star
$outer_shape = array();
for($i=0; $i<$spikes; $i++){
$outer_shape[$i]['x'] = $x + ($radius * cos(deg2rad(360 - $angel*$i)));
$outer_shape[$i]['y'] = $y + ($radius * sin(deg2rad(360 - $angel*$i)));
}
foreach($outer_shape as $key => $value){
$coordinates[] = $outer_shape[$key]['x'];
$coordinates[] = $outer_shape[$key]['y'];
}
// Return the coordinates
return $coordinates ;
}
?>
$x und $y geben den Mittelpunkt des 5-Ecks an, $radius gibt den Radius des äußeren Kreises an und $spikes die Anzahl der Zacken. Danach wird der Winkelabstand in Abhängigkeit der Zacken berechnet.
Die Koordinaten werden im Array $outer_shape gespeichert. Dazu gehört dieser Teil des obigen Codes:
PHP:
<?php
$outer_shape = array();
for($i=0; $i<$spikes; $i++){
$outer_shape[$i]['x'] = $x + ($radius * cos(deg2rad(360 - $angel*$i)));
$outer_shape[$i]['y'] = $y + ($radius * sin(deg2rad(360 - $angel*$i)));
}
?>
In $outer_shape[0] stehen dann die Koordinaten des 1. Punktes,
in $outer_shape[1] die des 2.,
usw...
Dieses multidimensionale Array wird dann mit der folgenden Schleife aufgelöst, da die Funktion imagefilledpolygon(), die zum "Zeichnen" verwendet wird, nur ein eindimensionales Array akzeptiert.
PHP:
<?php
foreach($outer_shape as $key => $value){
$coordinates[] = $outer_shape[$key]['x'];
$coordinates[] = $outer_shape[$key]['y'];
}
?>
Das Resultat lassen wird uns jetzt ausgeben:
PHP:
<?php
// Neues Bild erstellen
$im = imagecreate(400,400);
// Hintergrundfarbe festlegen
imagecolorallocate($im,0,0,0);
// Zackenanzahl festlegen
$spikes = 5;
// Koordinaten berechnen mit
// Mittelpunkt bei (200|200) und
// Radius 150
$values = drawStar(200, 200, 150, $spikes);
// Farbe des Sterns festlegen
$w = imagecolorallocate($im, 255, 255, 255);
// Stern ins Bild zeichnen
imagefilledpolygon($im, $values, $spikes, $w);
// Bild ausgeben
imageGIF($im);
// Bild aus dem Speicher löschen
imagedestroy($im);
?>
Das Ergebnis sieht folgendermaßen aus:
Dabei fällt auf, dass die Spitze nach rechts zeigt. Das ist auch logisch, denn der Erste Punkt wird durch
PHP:
<?php
$x + ($radius * cos(deg2rad(360 - $angel*$i)));
//200 + 150 * cos(360)
//200 + 150 * 1
//350
$y + ($radius * sin(deg2rad(360 - $angel*$i)));
//200 + 150 * cos(360)
//200 + 150 * 0
//200
?>
berechnet. Da unsere Sternspitze aber nach oben zeigen soll, müssen wird den Stern drehen. Aus diesem Grund ersetzen wir die 360° durch 270° (360-90). Das erscheint zunächst paradox, da unser Stern dadurch nach unten gedreht wird (-90° > viertel Drehung nach rechts; +90° > viertel Drehung nach links). Aber wir müssen beachten, in welche Art und Weise imagefilledpolygon() die Daten auswertet. Der Ursprung (0|0) ist bei dieser Funktion nämlich in der linken oberen Ecke, während ein "normales" Koordinatensystem in der linken unteren Ecke beginnt. Lange Rede, kurzer Sinn - der Stern wird durch die Funktion noch horizontal gespiegelt, so dass er mit der Spitze nach oben ins Bild gezeichnet wird.
Kurzer Test:
PHP:
<?php
error_reporting(E_ALL);
function drawStar($x, $y, $radius, $spikes) {
// $x, $y -> Position in the Image
// $radius -> Radius of the Star
// $spikes -> Number of Spikes
$coordinates = array();
$angel = 360 / $spikes ;
// Get the coordinates of the outer shape of the star
$outer_shape = array();
for($i=0; $i<$spikes; $i++){
$outer_shape[$i]['x'] = $x + ($radius * cos(deg2rad(270 - $angel*$i)));
$outer_shape[$i]['y'] = $y + ($radius * sin(deg2rad(270 - $angel*$i)));
}
foreach($outer_shape as $key => $value){
$coordinates[] = $outer_shape[$key]['x'];
$coordinates[] = $outer_shape[$key]['y'];
}
// Return the coordinates
return $coordinates ;
}
// Neues Bild erstellen
$im = imagecreate(400,400);
// Hintergrundfarbe festlegen
imagecolorallocate($im,0,0,0);
// Zackenanzahl festlegen
$spikes = 5;
// Koordinaten berechnen mit
// Mittelpunkt bei (200|200) und
// Radius 150
$values = drawStar(200, 200, 150, $spikes);
// Farbe des Sterns festlegen
$w = imagecolorallocate($im, 255, 255, 255);
// Stern ins Bild zeichnen
imagefilledpolygon($im, $values, $spikes, $w);
// Bild ausgeben
imageGIF($im);
// Bild aus dem Speicher löschen
imagedestroy($im);
?>
Resultat:
Nach dem äußeren 5-Eck wenden wir uns nun dem inneren zu. Wie man oben sehen kann, zeigt das innere 5-Eck in die entgegengesetzte Richtung des äußeren. Für uns bedeutet das, dass wir nicht mehr mit 270° rechnen, sondern mit 90° (270-180). Dadurch wird das innere 5-Eck im Vergleich zum äußeren um 180° gedreht, was wiederum bedeutet, dass "die Spitze in die andere Richtung zeigt". Außerdem brauchen wir einen kleineren Kreisradius, den ich 'willkürlich' auf die Hälfte des äußeren Kreises gesetzt habe (man beachte das 0.5 * vor dem $radius)
Hier der Code:
PHP:
<?php
error_reporting(E_ALL);
function drawStar($x, $y, $radius, $spikes) {
// $x, $y -> Position in the Image
// $radius -> Radius of the Star
// $spikes -> Number of Spikes
$coordinates = array();
$angel = 360 / $spikes ;
// Get the coordinates of the outer shape of the star
$outer_shape = array();
for($i=0; $i<$spikes; $i++){
$outer_shape[$i]['x'] = $x + ($radius * cos(deg2rad(270 - $angel*$i)));
$outer_shape[$i]['y'] = $y + ($radius * sin(deg2rad(270 - $angel*$i)));
}
// Get the coordinates of the inner shape of the star
$inner_shape = array();
for($i=0; $i<$spikes; $i++){
$inner_shape[$i]['x'] = $x + (0.5 * $radius * cos(deg2rad(90 - $angel*$i)));
$inner_shape[$i]['y'] = $y + (0.5 * $radius * sin(deg2rad(90 - $angel*$i)));
}
foreach($outer_shape as $key => $value){
$coordinates[] = $outer_shape[$key]['x'];
$coordinates[] = $outer_shape[$key]['y'];
$coordinates[] = $inner_shape[$key]['x'];
$coordinates[] = $inner_shape[$key]['y'];
}
// Return the coordinates
return $coordinates ;
}
?>
Wenn wir uns das Ganze jetzt ausgeben lassen, müssen wir darauf achten der imagefilledpolygon()-Funktion mitzuteilen, dass sich nun doppelt so viele Wertepaare im Koordinaten-Array befinden:
PHP:
<?php
$im = imagecreate(400,400);
imagecolorallocate($im,0,0,0);
$spikes = 5;
$values = drawStar(200, 200, 150, $spikes);
$w = imagecolorallocate($im, 255, 255, 255);
// Stern ins Bild zeichnen
// man beachte $spikes*2
imagefilledpolygon($im, $values, $spikes*2, $w);
imageGIF($im);
imagedestroy($im);
?>
Aber Moment! Das Ergebnis sieht so aus!?
Hmm auf den erste Blick ist unsere Funktion richtig, die Koordinaten stimmen alle. Auf den zweiten Blick wird jedoch deutlich, dass sie nicht in der richtigen Reihenfolgen stehen.
So ist es richtig:
Und so sieht es momentan aus:
Um die Koordinaten in die Richtige Reihenfolge zu bringen, muss das Array mit den Koordinaten des inneren 5-Ecks neu sortiert werden.
Altes Schema: 0-1-2-3-4
Neues Schema: 3-4-0-1-2
Auf die '3' komme ich, indem ich die Gesamtzahl der Zacken halbiere, abrunde und dann 1 dazu addiere.
Dazu benutze ich 2 Schleifen:
PHP:
<?php
// Bring the coordinates in the right order
foreach($inner_shape as $key => $value){
// Wenn der richtige Key gefunden wurde wird die Schleife beendet
if($key == (floor($spikes/2)+1))
break;
// Ansonsten wird ein neues Array-Element erzeugt
$inner_shape[] = $value;
// und das alte gelöscht
unset($inner_shape[$key]);
}
// Reset the keys
// vor der Schleife:
/* [3]-> 4. Punkt
* [4]-> 5. Punkt
* [5]-> 1. Punkt
* [6]-> 2. Punkt
* [7]-> 3. Punkt
*/
$i=0;
foreach($inner_shape as $value){
$inner_shape[$i] = $value;
$i++;
}
// nach der Schleife:
/* [0]-> 4. Punkt
* [1]-> 5. Punkt
* [2]-> 1. Punkt
* [3]-> 2. Punkt
* [4]-> 3. Punkt
*/
?>
So, jetzt nochmal alles in einer Funktion zusammengefasst und mit Beispielaufruf versehen:
PHP:
<?php
error_reporting(E_ALL);
function drawStar($x, $y, $radius, $spikes) {
$coordinates = array();
$angel = 360 / $spikes ;
$outer_shape = array();
for($i=0; $i<$spikes; $i++){
$outer_shape[$i]['x'] = $x + ($radius * cos(deg2rad(270 - $angel*$i)));
$outer_shape[$i]['y'] = $y + ($radius * sin(deg2rad(270 - $angel*$i)));
}
$inner_shape = array();
for($i=0; $i<$spikes; $i++){
$inner_shape[$i]['x'] = $x + (0.5 * $radius * cos(deg2rad(90 - $angel*$i)));
$inner_shape[$i]['y'] = $y + (0.5 * $radius * sin(deg2rad(90 - $angel*$i)));
}
foreach($inner_shape as $key => $value){
if($key == (floor($spikes/2)+1))
break;
$inner_shape[] = $value;
unset($inner_shape[$key]);
}
$i=0;
foreach($inner_shape as $value){
$inner_shape[$i] = $value;
$i++;
}
foreach($outer_shape as $key => $value){
$coordinates[] = $outer_shape[$key]['x'];
$coordinates[] = $outer_shape[$key]['y'];
$coordinates[] = $inner_shape[$key]['x'];
$coordinates[] = $inner_shape[$key]['y'];
}
return $coordinates ;
}
$im = imagecreate(400,400);
imagecolorallocate($im,0,0,0);
$spikes = 5;
$values = drawStar(200, 200, 150, $spikes);
$w = imagecolorallocate($im, 255, 255, 255);
imagefilledpolygon($im, $values, $spikes*2, $w);
imageGIF($im);
imagedestroy($im);
?>
Zurück zur vorigen Seite:
Stern mit PHP erstellen - Mathematische Formeln Bewerten
Suchmaschinenoptimierung (SEO - Search Engine Optimization)
