动态多色渐变图像
Dynamic multi-color gradient image
我需要创建的是动态多色渐变图像,如下图所示:
我需要为 2/3/4/5/6 种颜色动态创建它,目前我正在处理 6 种颜色渐变。
到目前为止我所做的是:
$size = 1536;
$thickness = 54;
$im = imagecreatetruecolor($size, $thickness);
$clrCount = count($clr);
$limit = floor($size/$clrCount);
for($i = 0; $i < $limit; $i++) {
// Line 1: red = 255 ; green = 0 -> 255 ; blue = 0
$mycolors[$i] = imagecolorallocate($im, 255, $i, 0);
// Line 2: red = 255 -> 0 ; green = 255 ; blue = 0
$mycolors[$i + $limit] = imagecolorallocate($im, (255 - $i), 255, 0);
// Line 3: red = 0 ; green = 255 ; blue = 0 -> 255
$mycolors[$i + $limit*2] = imagecolorallocate($im, 0, 255, $i);
// Line 4: red = 0 ; green = 255 -> 0 ; blue = 255
$mycolors[$i + $limit*3] = imagecolorallocate($im, 0, (255 - $i), 255);
// Line 5: red = 0 -> 255 ; green = 0 ; blue = 255
$mycolors[$i + $limit*4] = imagecolorallocate($im, $i, 0, 255);
// Line 6: red = 255 ; green = 0 ; blue = 255 -> 0
$mycolors[$i + $limit*5] = imagecolorallocate($im, 255, 0, (255 - $i));
}
for ($i=0; $i < $size; $i++) {
imageline($im, $i, 0, $i, $thickness-1, $mycolors[$i]);
}
imagepng($im);
imagegd($im);
imagedestroy($im);
我在 this article
的帮助下创建了上面的图像
但是这里的代码使用的是静态颜色代码,当我尝试使用它进行操作时,我得到的图像如下所示:
已编辑代码
$size = 1536;
$thickness = 54;
$im = imagecreatetruecolor($size, $thickness);
$clrCount = count($clr);
$limit = floor($size/$clrCount);
$clr = array(0 => '4d6eae', 1 => 'e58f0e', 2 => 'ff00ff', 3 => '9900ff', 4 => '9f560a', 5 => '93c47d');
list($r, $g, $b) = sscanf($clr[0], "%02x%02x%02x");
list($r1, $g1, $b1) = sscanf($clr[1], "%02x%02x%02x");
list($r2, $g2, $b2) = sscanf($clr[2], "%02x%02x%02x");
list($r3, $g3, $b3) = sscanf($clr[3], "%02x%02x%02x");
list($r4, $g4, $b4) = sscanf($clr[4], "%02x%02x%02x");
list($r5, $g5, $b5) = sscanf($clr[5], "%02x%02x%02x");
for($i = 0; $i < $limit; $i++) {
// Line 1: red = 255 ; green = 0 -> 255 ; blue = 0
$mycolors[$i] = imagecolorallocate($im, $r, $i, 0);
// Line 2: red = 255 -> 0 ; green = 255 ; blue = 0
$mycolors[$i + $limit] = imagecolorallocate($im, ($r1 - $i), $g1, 0);
// Line 3: red = 0 ; green = 255 ; blue = 0 -> 255
$mycolors[$i + $limit*2] = imagecolorallocate($im, 0, $g2, $i);
// Line 4: red = 0 ; green = 255 -> 0 ; blue = 255
$mycolors[$i + $limit*3] = imagecolorallocate($im, 0, ($g3 - $i), 255);
// Line 5: red = 0 -> 255 ; green = 0 ; blue = 255
$mycolors[$i + $limit*4] = imagecolorallocate($im, $i, 0, $b4);
// Line 6: red = 255 ; green = 0 ; blue = 255 -> 0
$mycolors[$i + $limit*5] = imagecolorallocate($im, $r5, 0, ($b5 - $i));
}
for ($i=0; $i < $size; $i++) {
imageline($im, $i, 0, $i, $thickness-1, $mycolors[$i]);
}
imagepng($im);
imagegd($im);
imagedestroy($im);
你可以看到渐变效果丢失了,因为静态的255被动态值代替了,动态值产生了负数,因此失去了效果。
任何人都可以帮助我使用这段代码创建动态颜色渐变图像,或者可以帮助我提供另一个方向来使用 gd 库实现这种输出。
已更新
现在当我得到这个问题的答案时,我有一个与这个问题相关的新问题。
我现在想要实现的是随机颜色分配,有点像下面这样:
我将使用六色阵列,以防出现上述问题,需要一些提示才能开始。
实际上你自己已经发现了问题..所以让我们进一步解决这个问题:
You can see that the gradient effect is lost, because the static 255 is replaced with dynamic value which is creating negative numbers and thus losing its effect.
所以,不是每次减少$i
,而是必须减少$i
的百分比。
伪代码
我们想要从红色值:50 到红色值:200,分 75 步。
我们该怎么做?
$red = 50;
for ($i = 0; $i < 75; $i++) {
$red = 50 + ((200 - 50) / 75) * $i;
//Our color is:
// The difference between the limits (150: 200-50)
// divided by the amount of steps: 75.
// We multiply the result by the current step.
// And we add the lower limit to it, so we start at 50.
}
此代码将为我们提供:
50 - 52 - 54 - 56 - 58 - ... - 192 - 194 - 196 - 198
现在,让我们调整您的代码以反映这一点:
for($i = 0; $i < $limit; $i++) {
$mycolors[$i] = imagecolorallocate($im,
$r + (($r1 - $r) / $limit) * $i,
$g + (($g1 - $g) / $limit) * $i,
$b + (($b1 - $b) / $limit) * $i);
$mycolors[$i + $limit] = imagecolorallocate($im,
$r1 + (($r2 - $r1) / $limit) * $i,
$g1 + (($g2 - $g1) / $limit) * $i,
$b1 + (($b2 - $b1) / $limit) * $i);
//Copy-paste magic here
}
我需要创建的是动态多色渐变图像,如下图所示:
我需要为 2/3/4/5/6 种颜色动态创建它,目前我正在处理 6 种颜色渐变。
到目前为止我所做的是:
$size = 1536;
$thickness = 54;
$im = imagecreatetruecolor($size, $thickness);
$clrCount = count($clr);
$limit = floor($size/$clrCount);
for($i = 0; $i < $limit; $i++) {
// Line 1: red = 255 ; green = 0 -> 255 ; blue = 0
$mycolors[$i] = imagecolorallocate($im, 255, $i, 0);
// Line 2: red = 255 -> 0 ; green = 255 ; blue = 0
$mycolors[$i + $limit] = imagecolorallocate($im, (255 - $i), 255, 0);
// Line 3: red = 0 ; green = 255 ; blue = 0 -> 255
$mycolors[$i + $limit*2] = imagecolorallocate($im, 0, 255, $i);
// Line 4: red = 0 ; green = 255 -> 0 ; blue = 255
$mycolors[$i + $limit*3] = imagecolorallocate($im, 0, (255 - $i), 255);
// Line 5: red = 0 -> 255 ; green = 0 ; blue = 255
$mycolors[$i + $limit*4] = imagecolorallocate($im, $i, 0, 255);
// Line 6: red = 255 ; green = 0 ; blue = 255 -> 0
$mycolors[$i + $limit*5] = imagecolorallocate($im, 255, 0, (255 - $i));
}
for ($i=0; $i < $size; $i++) {
imageline($im, $i, 0, $i, $thickness-1, $mycolors[$i]);
}
imagepng($im);
imagegd($im);
imagedestroy($im);
我在 this article
的帮助下创建了上面的图像但是这里的代码使用的是静态颜色代码,当我尝试使用它进行操作时,我得到的图像如下所示:
已编辑代码
$size = 1536;
$thickness = 54;
$im = imagecreatetruecolor($size, $thickness);
$clrCount = count($clr);
$limit = floor($size/$clrCount);
$clr = array(0 => '4d6eae', 1 => 'e58f0e', 2 => 'ff00ff', 3 => '9900ff', 4 => '9f560a', 5 => '93c47d');
list($r, $g, $b) = sscanf($clr[0], "%02x%02x%02x");
list($r1, $g1, $b1) = sscanf($clr[1], "%02x%02x%02x");
list($r2, $g2, $b2) = sscanf($clr[2], "%02x%02x%02x");
list($r3, $g3, $b3) = sscanf($clr[3], "%02x%02x%02x");
list($r4, $g4, $b4) = sscanf($clr[4], "%02x%02x%02x");
list($r5, $g5, $b5) = sscanf($clr[5], "%02x%02x%02x");
for($i = 0; $i < $limit; $i++) {
// Line 1: red = 255 ; green = 0 -> 255 ; blue = 0
$mycolors[$i] = imagecolorallocate($im, $r, $i, 0);
// Line 2: red = 255 -> 0 ; green = 255 ; blue = 0
$mycolors[$i + $limit] = imagecolorallocate($im, ($r1 - $i), $g1, 0);
// Line 3: red = 0 ; green = 255 ; blue = 0 -> 255
$mycolors[$i + $limit*2] = imagecolorallocate($im, 0, $g2, $i);
// Line 4: red = 0 ; green = 255 -> 0 ; blue = 255
$mycolors[$i + $limit*3] = imagecolorallocate($im, 0, ($g3 - $i), 255);
// Line 5: red = 0 -> 255 ; green = 0 ; blue = 255
$mycolors[$i + $limit*4] = imagecolorallocate($im, $i, 0, $b4);
// Line 6: red = 255 ; green = 0 ; blue = 255 -> 0
$mycolors[$i + $limit*5] = imagecolorallocate($im, $r5, 0, ($b5 - $i));
}
for ($i=0; $i < $size; $i++) {
imageline($im, $i, 0, $i, $thickness-1, $mycolors[$i]);
}
imagepng($im);
imagegd($im);
imagedestroy($im);
你可以看到渐变效果丢失了,因为静态的255被动态值代替了,动态值产生了负数,因此失去了效果。
任何人都可以帮助我使用这段代码创建动态颜色渐变图像,或者可以帮助我提供另一个方向来使用 gd 库实现这种输出。
已更新
现在当我得到这个问题的答案时,我有一个与这个问题相关的新问题。
我现在想要实现的是随机颜色分配,有点像下面这样:
我将使用六色阵列,以防出现上述问题,需要一些提示才能开始。
实际上你自己已经发现了问题..所以让我们进一步解决这个问题:
You can see that the gradient effect is lost, because the static 255 is replaced with dynamic value which is creating negative numbers and thus losing its effect.
所以,不是每次减少$i
,而是必须减少$i
的百分比。
伪代码
我们想要从红色值:50 到红色值:200,分 75 步。 我们该怎么做?
$red = 50;
for ($i = 0; $i < 75; $i++) {
$red = 50 + ((200 - 50) / 75) * $i;
//Our color is:
// The difference between the limits (150: 200-50)
// divided by the amount of steps: 75.
// We multiply the result by the current step.
// And we add the lower limit to it, so we start at 50.
}
此代码将为我们提供:
50 - 52 - 54 - 56 - 58 - ... - 192 - 194 - 196 - 198
现在,让我们调整您的代码以反映这一点:
for($i = 0; $i < $limit; $i++) {
$mycolors[$i] = imagecolorallocate($im,
$r + (($r1 - $r) / $limit) * $i,
$g + (($g1 - $g) / $limit) * $i,
$b + (($b1 - $b) / $limit) * $i);
$mycolors[$i + $limit] = imagecolorallocate($im,
$r1 + (($r2 - $r1) / $limit) * $i,
$g1 + (($g2 - $g1) / $limit) * $i,
$b1 + (($b2 - $b1) / $limit) * $i);
//Copy-paste magic here
}