2015-05-20 2 views
5

Что мне нужно, чтобы создать это динамический многоцветный градиент изображения, как показано ниже:Динамический градиент многоцветное изображение

enter image description 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

Но кода здесь использует статические цветовые коды, когда я судимые манипулировать это я получаю изображение, как показано ниже:

enter image description here

EDITED КОД

$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.

ОБНОВЛЕНО

Теперь, когда я получил ответ на этот вопрос, я имею новую проблему, связанную с этим вопросом.

Что я хочу достичь, это случайное распределение цвета теперь несколько, как это показано ниже:

enter image description here

Я собираюсь с массивом шесть цветов, как и в случае с проблемой выше, нужна подсказка чтобы идти.

ответ

3

Вы нашли проблему самостоятельно уже, на самом деле .. Так что давайте работать дальше, что:

Вы можете видеть, что градиент эффект теряется, так как статические 255 заменяются динамическим значением, которое создает отрицательный номера и, таким образом, теряют свой эффект.

Таким образом, вместо того чтобы уменьшаться с $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 
} 
+0

Да конечно, чем больше информации вы требуете? –

+0

Спасибо за ваши усилия, теперь у меня есть какое-то направление для перемещения :) –

+0

Начальная ценность цвета, конечное значение цвета, количество шагов, .. :) - Редактирование: никаких проблем, это интересная проблема. – Jordumus

Смежные вопросы