沒有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