Многоцветный градиент исчезает для текста без CSS?

Question

Я хотел бы помочь получить эту функцию PHP для работы с третьим вариантом цвета.

Примечание: нет CSS. Нет Javascript. Просто PHP и HTML.

<?php 

function Gradient($HexFrom, $HexTo, $ColorSteps) 
{ 
     $FromRGB['r'] = hexdec(substr($HexFrom, 0, 2)); 
     $FromRGB['g'] = hexdec(substr($HexFrom, 2, 2)); 
     $FromRGB['b'] = hexdec(substr($HexFrom, 4, 2)); 

     $ToRGB['r'] = hexdec(substr($HexTo, 0, 2)); 
     $ToRGB['g'] = hexdec(substr($HexTo, 2, 2)); 
     $ToRGB['b'] = hexdec(substr($HexTo, 4, 2)); 

     $StepRGB['r'] = ($FromRGB['r'] - $ToRGB['r'])/($ColorSteps - 1); 
     $StepRGB['g'] = ($FromRGB['g'] - $ToRGB['g'])/($ColorSteps - 1); 
     $StepRGB['b'] = ($FromRGB['b'] - $ToRGB['b'])/($ColorSteps - 1); 

     $GradientColors = array(); 

     for($i = 0; $i <= $ColorSteps; $i++) 
     { 
       $RGB['r'] = floor($FromRGB['r'] - ($StepRGB['r'] * $i)); 
       $RGB['g'] = floor($FromRGB['g'] - ($StepRGB['g'] * $i)); 
       $RGB['b'] = floor($FromRGB['b'] - ($StepRGB['b'] * $i)); 

       $HexRGB['r'] = sprintf('%02x', ($RGB['r'])); 
       $HexRGB['g'] = sprintf('%02x', ($RGB['g'])); 
       $HexRGB['b'] = sprintf('%02x', ($RGB['b'])); 

       $GradientColors[] = implode(NULL, $HexRGB); 
     } 
     return $GradientColors; 
} 

$text = "blah testing blah testing blah"; 
$length = strlen($text); 
$Gradients = Gradient("00FF00", "0000FF", $length); 

for ($i=0; $i<$length; $i++) { 
    echo '<span style="color: #' . $Gradients[$i] . ';">' . $text[$i] . '</span>'; 
} 


?> 

Что мне делать, чтобы получить третий вариант? Такие, как:

Gradient($HexOne, $HexTwo, $HexThree, $ColorSteps) 
         //^^^^^^^^^ 

Answer 1

Это должно работать для вас:

Так в основном то, что я добавил в том, что если вы предоставите более 2-х цветов, что она просто сливается первый градиент с следующий, пока вы все градиенты, которые вы хотите вместе. Это также позволяет вам выполнять разные шаги для каждого градиента, который у вас есть. Таким образом, вы можете определить, что он должен идти от зеленого до красного в 20 шагов и от красного до синего в 50 шагов.

Вы можете передать цвета как массив и шаги в виде массива или целого числа, когда вы берете экземпляр класса. Или вы можете использовать методы setColors(), чтобы установить массив цветов и setSteps(), чтобы установить массив или целое число как интервал.

Вы также можете определить, следует ли разделить градиент или нет, если у вас несколько цветов. Вы можете установить и получить значение, если оно должно быть разделено на setChunkedGradientState() и getChunkedGradientState(). Это просто означает, что если вы не хотите, градиент фрагментированного, который является значением по умолчанию, вы получите массив так:

Array 
(
    [0] => FD9B09 
    [1] => EBAE1C 
    [2] => D9C230 
    [3] => C7D544 
    [4] => B6E958 
    [5] => B6E958 
    [6] => A9EC8D 
    [7] => 9CEFC2 
    [8] => 8FF2F8 
) 

Если это должно быть фрагментированными вы получите массив так:

Array 
(
    [0] => Array 
     (
      [0] => FD9B09 
      [1] => EBAE1C 
      [2] => D9C230 
      [3] => C7D544 
      [4] => B6E958 
     ) 

    [1] => Array 
     (
      [0] => B6E958 
      [1] => A9EC8D 
      [2] => 9CEFC2 
      [3] => 8FF2F8 
     ) 
) 

полный код:

<?php 


    class Gradienter { 

     public $colors = []; 
     public $gradient = []; 
     public $colorSteps = 2; 
     public $chunkedGradient = FALSE; 

     public function __construct(array $colors = [], $colorSteps = 2, $chunkedGradient = FALSE) { 
      $this->setColors($colors); 
      $this->setSteps($colorSteps); 
      $this->setChunkedGradientState($chunkedGradient); 

      return $this; 
     } 


     public function getGradient() { 

      if(count($this->colors) == 2) { 
       $this->createSingleGradient(); 
      } elseif(count($this->colors) > 2) { 
       $this->createMultipleGradient(); 
      } else { 
       throw new Exception("Not enough colors provided"); 
      } 

      if($this->chunkedGradient) 
       $this->getChunkedGradient(); 

      return $this->gradient; 

     } 

     public function getChunkedGradient() { 

      $stepCount = count($this->colors) - 1; 
      for($count = 0; $count < $stepCount; $count++) { 
       if(!is_array($this->colorSteps)) 
        $gradient[] = array_splice($this->gradient, 0, $this->colorSteps); 
       elseif(!isset($this->colorSteps[$count])) 
        $gradient[] = array_splice($this->gradient, 0, 2); 
       else 
        $gradient[] = array_splice($this->gradient, 0, $this->colorSteps[$count]); 
      } 
      $this->gradient = $gradient; 

     } 

     public function createSingleGradient() { 

      if(!is_array($this->colorSteps)) 
       $this->$gradient = $this->createGradient($this->colors[0], $this->colors[1], $this->colorSteps); 
      else 
       $this->$gradient = $this->createGradient($this->colors[0], $this->colors[1], $this->colorSteps[0]); 

     } 

     public function createMultipleGradient() { 

      foreach($this->colors as $k => $color) { 
       if(!isset($this->colors[$k+1])) 
        break; 

       if(!is_array($this->colorSteps)) 
        $this->gradient = array_merge($this->gradient, $this->createGradient($this->colors[$k], $this->colors[$k+1], $this->colorSteps)); 
       elseif(isset($this->colorSteps[$k])) 
        $this->gradient = array_merge($this->gradient, $this->createGradient($this->colors[$k], $this->colors[$k+1], $this->colorSteps[$k])); 
       else 
        $this->gradient = array_merge($this->gradient, $this->createGradient($this->colors[$k], $this->colors[$k+1], 2)); 

      } 

     } 

     public function createGradient($start, $end, $interval) { 
      $colors = ["r", "g", "b"]; 
      list($colorStart["r"], $colorStart["g"], $colorStart["b"]) = array_map("hexdec", str_split($start, 2)); 
      list($colorEnd["r"], $colorEnd["g"], $colorEnd["b"]) = array_map("hexdec", str_split($end, 2)); 

      foreach($colors as $color) 
       $colorSteps[$color] = ($colorStart[$color] - $colorEnd[$color])/($interval - 1); 

      for($count = 0; $count < $interval; $count++) { 
       foreach($colors as $color) 
        $rgb[$color] = floor($colorStart[$color] - ($colorSteps[$color] * $count)); 

        $hexRgb = array_combine($colors, array_map(function($v){ 
         return substr(sprintf('%02X', $v), 0, 2); 
        }, $rgb)); 

        $GradientColors[] = implode("", $hexRgb); 
      } 

      return $GradientColors;  

     } 

     public function setColors(array $colors = []) { 
      $this->colors = $colors; 
      return $this; 
     } 

     public function getColors() { 
      return $this->colors; 
     } 

     public function setSteps($colorSteps = 2) { 
      if(!is_array($colorSteps)) 
       $this->setSingleColorSteps($colorSteps); 
      else 
       $this->setMultipleColorSteps($colorSteps); 
      return $this; 
     } 

     public function setSingleColorSteps($colorSteps) { 
      $this->colorSteps = intval($colorSteps < 2 ? 2 : $colorSteps); 
     } 

     public function setMultipleColorSteps($colorSteps) { 
      $this->colorSteps = array_map(function($v){ 
        return intval($v < 2 ? 2 : $v); 
      }, $colorSteps); 
     } 

     public function getSteps() { 
      return $this->colorSteps; 
     } 

     public function setChunkedGradientState($chunkedGradient) { 
      $this->chunkedGradient = $chunkedGradient; 
      return $this; 
     } 

     public function getChunkedGradientState() { 
      return $this->chunkedGradient; 
     } 


    } 





    $gradienter = new Gradienter(); 
    $gradienter->setColors(["FD9B09", "B6E958", "F2F90B", "8FF2F8", "FB8CF8", "F05C3E"]); 
    $gradienter->setSteps([5, 30, 25, 60, 40]); 

    $gradients = $gradienter->getGradient(); 

    foreach($gradients as $k => $color) 
     echo "<div style='background-color:#" . $color . "'>" . $color . "</div>"; 


?> 

Demo 1 Demo 2