PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Pascal Landau

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt4
Heute72
Gestern331
Gesamt2310888

Stern mit PHP erstellen - Quellcode

Autor Flitze
Klicks 67537
Rating für Stern mit PHP erstellen
  7.3 von 10
Bewertungen38
Stand 19.06.2010
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

Amazon: PHP 5.3 und MySQL 5.1
Breadcrumb:
Tutorials » Stern mit PHP erstellen » Stern mit PHP erstellen - Quellcode
Seite : 1 2 3 4 Bewerten
Article Wizard - deutscher Article Spinner

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(200200150$spikes);
    
// Farbe des Sterns festlegen
    
$w imagecolorallocate($im255255255);
    
// 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:

Stern 5-Eck rechts

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(200200150$spikes);
    
// Farbe des Sterns festlegen
    
$w imagecolorallocate($im255255255);
    
// Stern ins Bild zeichnen
    
imagefilledpolygon($im$values$spikes$w);
    
// Bild ausgeben
    
imageGIF($im);
    
// Bild aus dem Speicher löschen
    
imagedestroy($im);
?>


Resultat:

Stern 5-Eck oben

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(200200150$spikes);
    
$w imagecolorallocate($im255255255);
    
// 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!?

Stern mit falscher Koordinatenzuordnung

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:

Stern Koordinaten falsch

Und so sieht es momentan aus:

Stern Koordinaten richtig

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(200200150$spikes);
    
$w imagecolorallocate($im255255255);
    
imagefilledpolygon($im$values$spikes*2$w);
    
imageGIF($im);
    
imagedestroy($im);
?>


Stern fertig

Zurück zur vorigen Seite:
Stern mit PHP erstellen - Mathematische Formeln
Bewerten

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (32)

8.4
8
7.2

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2024