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