Итак, сегодня мы будем учиться рисовать программно в Дельфи градиенты. Эта информация может пригодиться тем, кто, например, собрался писать свои компоненты и хочет красиво их оформить, или же… может пригодиться как исходник к проектам, которые имеют такую опцию, как «выбор цвета» и т.п.
Что же такое градиент? Градиент – это плавный переход одного цвета в другой. Что такое цвет? Цвет – это видимое излучение. Вообще, стоит сказать, что такого разнообразия цветов какое можно создать на компьютере, в естественном мире добиться нельзя. А всё потому, что экран монитора сам излучает свет, и количество этого света мы можем регулировать программно.
Как устроен цвет? В естественном мире – всё понятно, тут в результате многочисленных отражений происходит сложение волн, имеющих разные длины (а значит и разный цвет) и в результате этого получаются совсем «новые» цвета, иногда можно даже наблюдать интерференционную картинку (она как раз наиболее близка к нашей теме).
В компьютере происходит примерно тоже самое. Но цвет здесь ВСЕГДА можно разложить по составляющим. Причём число и тип составляющих зависит от выбора системы представления цвета. А системы бывают разные, если обратиться к 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}
Вот и всё.