designoir
RGBA Gradient
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);
}
Example #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);
Example #2
<?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–255,0–255,0–255,0–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–255,0–255,0–255,0–127)</label>
</li>
<li>
<label><input type="text" name="height" value="50"/> Höhe<br/>
Pixel (1–999)</label>
</li>
<li>
<label><input type="text" name="steps" value="255"/> Abstufungen<br/>
(0–255)</label>
</li>
<li>
<label><input type="text" name="step_width" value="3"/> Breite einer Stufe<br/>
Pixel (1–5)</label>
</li>
</ul>
</fieldset>
<p>
<input type="submit"/>
</p>
</form>
</body>
</html>
Comments
-
Timmy wrote on June 2, 2007 05:14 PM BST ():
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 -
Timmy wrote on June 2, 2007 09:01 PM BST ():
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 -
gregor wrote on May 2, 2008 04:05 PM BST ():
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 -
Timmy wrote on May 7, 2008 10:27 PM BST ():
Oder aber man nimmt einfach ImageMagick und spart sich den Code und die Zeit.
-
Daniel wrote on March 28, 2009 05:30 PM GMT ():
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? -
Daniel wrote on March 28, 2009 05:35 PM GMT ():
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????
