Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Вычисление градиента в формате RGB

Author wmas wmas | Category Category PHP

Вот попалась такая задачка — сделать градиет зная начальное и конечное значение RGB цвета. Задав процент отклонения ($prc), выводить промежуточный цвет. По сути, трёхмерная система со всеми вытекающими уравнениями. Признаться, я не очень силен в геометрии. Всё давно забылась, но осталась хоть какая-то логика. Мыслим так: значения RGB изменяются пропорционально, следовательно можно вывести отдельные уравнения для каждого из параметров.

К примеру, для цвета RED у нас известно начальное ($r1) и конечное ($r2) значения. Вычисляем разницу и в соответствии с $prc, находим нужную пропорцию. В общем, чтобы не буду пудрить вам мозги. Вот код вычисления $R:

if ( $r1==$r2 ) {
  $R = $r1;
} elseif( $r2>$r1 ) {
  $R = ceil(($r2-$r1) * $prc / 100) + $r1;
} else {
  $R = ceil(($r1-$r2) * (100-$prc) / 100) + $r2;
}

Спору нет — «велосипед», и не самой лучшей конструкции. Однако, оно работает и это вполне радует. Сам же код функции имеет следующий вид:

function grad ($r1, $g1, $b1, $r2, $g2, $b2, $prc) {
  if ( $r1==$r2 ) {
    $R = $r1;
  } elseif( $r2>$r1 ) {
    $R = ceil(($r2-$r1) * $prc / 100) + $r1;
  } else {
    $R = ceil(($r1-$r2) * (100-$prc) / 100) + $r2;
  }

  if ( $g1==$g2 ) {
    $G = $g1;
  } elseif( $g2>$g1 ) {
    $G = ceil(($g2-$g1) * $prc / 100) + $g1;
  } else {
    $G = ceil(($g1-$g2) * (100-$prc) / 100) + $g2;
  }

  if ( $b1==$b2 ) {
    $B = $b1;
  } elseif( $b2>$b1 ) {
    $B = ceil(($b2-$b1) * $prc / 100) + $b1;
  } else {
    $B = ceil(($b1-$b2) * (100-$prc) / 100) + $b2;
  }

  return $R.','.$G.','.$B;
}

Ну и живой пример применения функции:

for ($i=0; $i<=100; $i=$i+10) {
  echo '<div style="background: rgb('.grad(34,131,204,255,0,0,$i).')"> </div>';
}

Подводя итоги, скажу: "всегда рад альтернативным, более удобным и кратким решениям". Пишите, буду благодарен за информацию так как найти что-то в этом роде мне не удалось. Может быть просто плохо искал. Спасибо за внимание ;)

Publish: Суббота Мар 31, 2007

13 Responses for "Вычисление градиента в формате RGB"

feed for comments on this post

  • Комментарий #337 author: SwiZZeR Reply
    publish: Понедельник Май 21, 2007 at 10:38 пп

    Чего-то не пойму, октуда функция rgb() взялась?

  • Комментарий #338 author: lunux Reply
    publish: Понедельник Май 21, 2007 at 11:58 пп

    2SwiZZeR: Как откуда? Сам написал. Я ж код привёл.

  • Комментарий #339 author: SwiZZeR Reply
    publish: Вторник Май 22, 2007 at 1:07 пп

    Я могу ошибаться, но я не помню чтобы в php была функция rgb()

  • Комментарий #340 author: lunux Reply
    publish: Вторник Май 22, 2007 at 2:33 пп

    2SwiZZeR Э-э-э … я даже не знаю, что и ответить. Вроде написал, что её действительно нет. Написал так же что я её сам написал. Чтоб ещё такого сказать? :mrgreen:

  • Комментарий #341 author: SwiZZeR Reply
    publish: Вторник Май 22, 2007 at 2:38 пп

    Не понял, ты ничего не написал про то есть она или нет.
    &gt; вот вам, так сказать, живой пример функционирования:
    :mrgreen:

  • Комментарий #342 author: lunux Reply
    publish: Вторник Май 22, 2007 at 2:44 пп

    2SwiZZeR По всей видимости, вы читали заметку кусочками. Приведён код функции и живой пример её функционирования. Я просто не рассчитывал, на то, что читающий не знает о возможности создания своих функций в PHP. Да, наверно это пробел в моей заметке, но теперь всё выяснилось :roll:

  • Комментарий #343 author: SwiZZeR Reply
    publish: Вторник Май 22, 2007 at 2:58 пп

    Я не понял правильно, извиняюсь…

  • Комментарий #344 author: lunux Reply
    publish: Вторник Май 22, 2007 at 3:11 пп

    2SwiZZeR Ничего, бывает… Может действительно пишу не совсем понятно или просто код не слишком заметен. Так что попробую побаловаться с CSS, может будет более адекватно восприниматься… ;)

  • Комментарий #345 author: SwiZZeR Reply
    publish: Вторник Май 22, 2007 at 3:13 пп

    Как бы конвертнуть RGB значения в CSS вид, т.е. в #ffffff например.

  • Комментарий #346 author: lunux Reply
    publish: Вторник Май 22, 2007 at 11:09 пп

    2SwiZZeR Функция по сути и возвращает строку в формате пригодном для CSS посмотрите внимательней пример использования функции. Здесь я привожу пример с фоновым цветом DIV’а, т.е.: &lt;div style="background: rgb(…)">…

    По сути, можно и самому задать необходимый вид строки, или написать конвертер, скажем такой:

    function rgb2html($r,$g,$b) {
      $r = (int) $r; $g = (int) $g; $b = (int) $b;
    
      $r = dechex($r<0?0:($r>255?255:$r));
      $g = dechex($g<0?0:($g>255?255:$g));
      $b = dechex($b<0?0:($b>255?255:$b));
    
      $color = (strlen($r) < 2?'0':'').$r;
      $color.= (strlen($g) < 2?'0':'').$g;
      $color.= (strlen($b) < 2?'0':'').$b;
      return '#'.$color;
    }

    Как вы видите, параметры функции, это числовые значения R, G, B каналов колора, а мая функция возвращает именно строку. Потому чтобы функция rgb() выдовало, нечто вроде: #ffffff надо строку:

    return $R.','.$G.','.$B;

    заменить на:

    return rgb2html($R,$G,$B);

    Конечно, это подразумевает наличие в коде выше приведенного кода функции rgb2html()

  • Комментарий #1736 author: spamoney Reply (subscribed to comments)
    publish: Вторник Июл 8, 2008 at 8:33 дп

    Хм, а можно ли написать обратную функцию (html2rgb) конвертации допустим из: #ffffff в 255,255,255 ?
    т.е что бы можно было сделать так:

    $begin=html2rgb('#ffffff');
    $end=html2rgb('#000000');

  • Комментарий #1737 author: wmas Reply
    publish: Вторник Июл 8, 2008 at 9:55 дп

    2spamoney: Привет! Вообще, заметка несколько о другом :roll:
    А то, что тебе надо можешь глянуть тут

  • Комментарий #1742 author: spamoney Reply (subscribed to comments)
    publish: Среда Июл 9, 2008 at 2:48 пп

    Спасибо, это то что нужно ;)


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress