en

designoir

RGBA-Farbverlauf

gradient.php

<?php

/**
 * function gradient
 * Copyright (C) 2006  Dao Gottwald
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 *
 * Contact information:
 *   Dao Gottwald  <dao at design-noir.de>
 *
 * @version  1.0
 */

function gradient($from, $to, $height, $steps, $step_width) {
  $im = imagecreatetruecolor(++$steps * $step_width, $height);
  imagesavealpha($im, true);
  imagealphablending($im, false);
  imagefill($im, 0, 0, imagecolorallocatealpha($im, 225, 225, 225, 127));
  $from = explode(',', $from);
  $to = explode(',', $to);
  $diff = array();
  for ($i = 0; $i < 4; $i++) {
    $diff[$i] = ($from[$i] - $to[$i]) / $steps;
  }
  for ($step = 0; $step < $steps; $step++) {
    for ($i = 0; $i < 4; $i++) {
      $rgb[$i] = round($from[$i] - $diff[$i] * $step);
      if ($i < 3) {
        if ($rgb[$i] > 255) {
          $rgb[$i] = 255;
        }
      } elseif ($rgb[3] > 127) {
        $rgb[3] = 127;
      }
    }
    $col = imagecolorallocatealpha($im, $rgb[0], $rgb[1], $rgb[2], $rgb[3]);
    imagefilledrectangle($im, $step * $step_width, 0, ($step + 1) * $step_width - 1, $height, $col);
  }
  header('Content-type: image/png');
  imagepng($im);
  imagedestroy($im);
}

Beispiel #1

orange_to_black-opaque_to_transparent.php

<?php

require_once 'gradient.php';

$from = '255,180,60,0';
$to = '0,0,0,127';
$height = 50;
$steps = 255;
$step_width = 3;

gradient ($from, $to, $height, $steps, $step_width);

Beispiel #2

form.php

<?php

if (isset($_POST['from'])
    && isset($_POST['to'])
    && isset($_POST['height'])
    && isset($_POST['steps'])
    && isset($_POST['step_width'])
    && preg_match('~^\d{1,3},\d{1,3},\d{1,3},\d{1,3}$~', $_POST['from'])
    && preg_match('~^\d{1,3},\d{1,3},\d{1,3},\d{1,3}$~', $_POST['to'])
    && preg_match('~^[1-9]\d{0,2}$~', $_POST['height'])
    && preg_match('~^[0-2]\d{0,2}$~', $_POST['steps'])
    && preg_match('~^[1-5]$~', $_POST['step_width'])) {
  require_once 'gradient.php';
  gradient($_POST['from'], $_POST['to'], $_POST['height'], $_POST['steps'], $_POST['step_width']);
  exit;
}

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Farbverlauf</title>
</head>
<body>
  <h1>Farbverlauf</h1>
  <form action="" method="post">
    <fieldset>
      <legend>Optionen</legend>
      <ul>
        <li>
          <label><input type="text" name="from" value="255,180,60,0"/> RGBA-Farbwert 1<br/>
          Rot,Grün,Blau,Alpha (0&ndash;255,0&ndash;255,0&ndash;255,0&ndash;127)</label>
        </li>
        <li>
          <label><input type="text" name="to" value="0,0,0,127"/> RGBA-Farbwert 2<br/>
          Rot,Grün,Blau,Alpha (0&ndash;255,0&ndash;255,0&ndash;255,0&ndash;127)</label>
        </li>
        <li>
          <label><input type="text" name="height" value="50"/> Höhe<br/>
          Pixel (1&ndash;999)</label>
        </li>
        <li>
          <label><input type="text" name="steps" value="255"/> Abstufungen<br/>
          (0&ndash;255)</label>
        </li>
        <li>
          <label><input type="text" name="step_width" value="3"/> Breite einer Stufe<br/>
          Pixel (1&ndash;5)</label>
        </li>
      </ul>
    </fieldset>
    <p>
      <input type="submit"/>
    </p>
  </form>
</body>
</html>

Kommentare

  1. Timmy meinte am 2. Juni ’07, 18:14 Uhr ():
    Hey,
    ich hatte mich hier schonmal bei nem anderen „Tutorial“ gemeldet, und muss sagen, seitdem bin ich ein großer Fan dieses Auftritts hier geworden. Astrein, elegant, informativ, ich bin rundum begeistert!
    Aber jetzt der Grund meines Kommentares hier:
    Wie wäre es, die Funktion noch auf die y-Achse zu erweitern? Also die zusätzliche Möglichkeit, den Farbverlauf vertikal statt horizontal anzuzeigen. Nur ein kleiner Ratschlag :-)
    Liebe Grüße, Timmy
  2. Timmy meinte am 2. Juni ’07, 22:01 Uhr ():
    Ich bin da gerade einfach mal gedanklich durchgegangen, und zu dem Schluss gekommen, dass man da ja nur width und height tauschen müsste, sowie die x- mit den y-Koordinaten in der imagefilledrectangle-Anweisung. Also müsste die dann etwa so aussehen:
    imagefilledrectangle($im, 0, $step * $step_height, $width, ($step + 1) * $step_height - 1, $col);
    Ganz schön einfach.
    Grüße! Timmy
  3. gregor meinte am 2. Mai ’08, 17:05 Uhr ():
    Für einen fallenden Farbverlauf muss die Zeile rihtig heißen:
    imagefilledrectangle($im, 0, $step * $step_width, $height, ($step + 1) * $step_width - 1, $col);

    Liebe Grüße,
    Gregor
  4. Timmy meinte am 7. Mai ’08, 23:27 Uhr ():
    Oder aber man nimmt einfach ImageMagick und spart sich den Code und die Zeit.
  5. Daniel meinte am 28. März ’09, 18:30 Uhr ():
    Die Grafik „[…]/Farbverlauf.php“ kann nicht angezeigt werden, weil sie Fehler enthält.

    Ich habe alles richtig auf meinen Webspace gezogen.

    Beide Datein, gradient.php und fom.php …
    Und dann habe ich form.php aufgerufen (gespsiechert als Farbverlauf.php)
    und habe es ausgeführt und dann kam dieser Fehler

    Was is da passiert?
  6. Daniel meinte am 28. März ’09, 18:35 Uhr ():
    Ach, und was noch viel lustiger ist:
    Wieso ist die gradient.php als Download nur ein paar Zeilen text wegen Copyright etc. aber auf dieser Seite heir weiter oben ein risiger php-code block????

HTML wird nicht interpretiert.

Geändert am 2. Januar ’06 Dão G., 2005–2010
aggressiv akt andromeda bar beine blue efeu frontal fugaetu industriell komet land noir rost rot sonnenblume splash split winter wolke zeit