Рисуем градиенты программно.

Рисуем градиенты программно.

Итак, сегодня мы будем учиться рисовать программно в Дельфи градиенты. Эта информация может пригодиться тем, кто, например, собрался писать свои компоненты и хочет красиво их оформить, или же… может пригодиться как исходник к проектам, которые имеют такую опцию, как «выбор цвета» и т.п.

Что же такое градиент? Градиент – это плавный переход одного цвета в другой. Что такое цвет? Цвет – это видимое излучение. Вообще, стоит сказать, что такого разнообразия цветов какое можно создать на компьютере, в естественном мире добиться нельзя. А всё потому, что экран монитора сам излучает свет, и количество этого света мы можем регулировать программно.

Как устроен цвет? В естественном мире – всё понятно, тут в результате многочисленных отражений происходит сложение волн, имеющих разные длины (а значит и разный цвет) и в результате этого получаются совсем «новые» цвета, иногда можно даже наблюдать интерференционную картинку (она как раз наиболее близка к нашей теме).

В компьютере происходит примерно тоже самое. Но цвет здесь ВСЕГДА можно разложить по составляющим. Причём число и тип составляющих зависит от выбора системы представления цвета. А системы бывают разные, если обратиться к PhotoShop’у, то он поддерживает следующие системы: RGB, HSV (Hue Saturation Value), Lab, CMYK. Все они по-разному определяют цвет.

Наиболее привычной нам системой, разумеется, является RGB (Red Green Blue) она раскладывает цвет по 3-м составляющим: красному, зелёному и синему. Все значение цветов колеблются в диапазоне [0..255], таким образом, простыми математическими расчётами получаем, что максимально возможное число представимых цветов компьютером равно 16777216 (или 2^24). Дизайнерам вполне хватает :)

Теперь займёмся практикой. Начинаем новый проект Delphi, размещаем квадратную панельку (TPanel), внутрь неё 2 другие меньшие по размеру панельки. Всё как на рисунке. Затем справа на другую панель ставим TImage, на канву которого будем выводить градиент. Ниже этой панели – TtrackBar. Совсем справа разместите небольшую квадратную панель, на неё еще одну. Добавьте не визуальный компонент TColorDialog, с помощью которого мы будем выбирать исходный и конечный цвета градиента.

Я приведу лишь основной код, для создания градиента. Советую скачать исходник и попрактиковаться. Код:

procedure TForm1.DrawGradient(Sender: TObject);

var

StartC, EndC: TColor; // начальный и конечный цвета

GradRECT: TRect; // область, которой мы будем рисовать

StartRGB, EndRGB: array[0..2] of Byte; // разложенный цвет

Colors, i, Delta: Word; // число цветов, которые использовать для

// создания градиента

begin

// область заливки

GradRECT := Image1.ClientRect;

// цвета

StartC := ColorToRGB(C1.Color);

EndC := ColorToRGB(C2.Color);

// массив с исходными цветами (1)

StartRGB[0] := GetRValue(StartC);

StartRGB[1] := GetGValue(StartC);

StartRGB[2] := GetBValue(StartC);

// массив с конечными цветами (2)

EndRGB[0] := GetRValue(EndC);

EndRGB[1] := GetGValue(EndC);

EndRGB[2] := GetBValue(EndC);

// число градаций на ширину

Colors := Image1.Width div 2;

// число пикселей для одной градации

Delta := Image1.Width div Colors;

For i := 0 to Colors do begin

// определяем область для градации

GradRECT.Left := i*Delta;

GradRECT.Right := GradRECT.Left + Delta;

With Image1.Canvas do begin

Pen.Style := psSolid;

Brush.Color := RGB(

(StartRGB[0] + MulDiv(i, EndRGB[0] - StartRGB[0], Colors-1)),

(StartRGB[1] + MulDiv(i, EndRGB[1] - StartRGB[1], Colors-1)),

(StartRGB[2] + MulDiv(i, EndRGB[2] - StartRGB[2], Colors-1)));

// заливаем

FillRect(GradRect);

end;

end; { for.... }

end;{ END Procedure}

Вот и всё. С вами был UzesCCron ;)