11.3. Компоненты типа Image и Paint

Для собственно рисования имеются компоненты PaintBox и Image (обычно для иллюстраций) из группы Shapes, имеющие свойства для рисования: Bitmap, Canvas, Begin Scene и End Scene (внутри которых происходит подготовка к рисованию), для загрузки рисунков – загрузка из файла и из потока: LoadFromFile (директория, имя файлы,) LoadFromStreem (…); сохранить и распечатать рисунок:

Chart1.SaveToBitmapFile('c:\Папка\btmp.jpg’);

ShellExecute (0, ’print’, 'c:\Папка\btmp.jpg’, nil, nil, 0);

В свойстве WrapMode: Stretch: отображать целиком с искажениями по размеру компонента; Center: отображается только центральная часть иллюстрации; Fit: масштабирование без искажений; Original: отображается левая верхняя граница в пределах компонента; Tile: если размер картинки меньше, то выводятся «плитки» картинки.

Вывод подготовленных ранее рисунков осуществляется с помщью PaintBox1.PaintTo () с указанием Canvas и области выведения: константы Rect; PaintBox1.Canvas. DrawBitmap () с указанием Bitmap и областей Rect начального и конечного переноса.

Методы рисования позволяют нарисовать элементарные фигуры например, PaintBox1.Canvas.FillRect () – закрашенный прямоугольник с закругленными краями, и др. Доступ к Image, являющимся объектом TCanvas, осуществляется через свойство Bitmap.

В общем виде вывод рисунка проводится как:

Объект.Canvas. Метод (параметры): PaintBox1.Canvas.FillRect ().

Свойство Canvas имеет возможности нарисовать различные фигуры (draw) – линию, прямоугольник, эллипс, и закрасить их (Fill). Цвет можно определить через TAlphaColor. Blue (и др. цвета выводимые подсказкой). Толщину и вид линии определяют свойтва Stroke, Thickness и StokeDash, а стиль закраски – FillKind.

Важно: для вывода рисунка его надо оформить внутри Begin Scene и End Scene. Координаты задаются для линии точками X и Y начала и конца линии, объекта TPoint; для других фигур – объектом TRect, описывающий область. Код для рисования линии на компоненте Image1 при открытии приложения:

procedure TForm1.FormPaint (Sender: TObject; Canvas: TCanvas; const ARect: TRectF);

var

p1,p2:TPointF;

begin

p1.X:=Image1.Position. X;

p1.Y:=Image1.Position. Y;

p2.X:=Image1.Position. X+100;

p2.Y:=Image1.Position. Y+150;

if Canvas.BeginScene =true then

try

Canvas.Stroke.Kind:=TBrushKind.Solid;

Canvas. DrawLine (p1,p2,10);

finally

Canvas. EndScene;

end; end;

var

p1,p2:TPoint;

begin // Рисует линию

p1.X:= 40;

p1.Y:= 40;

p2.X:= 100;

p2.Y:= 100;

Image1.Canvas.BeginScene;

Image1.Canvas. DrawLine (p1,p2,1.0);

Image1.Canvas. EndScene;

end;

//Рисует квадрат

Var

R: Trect;

begin

R. Left:= 30;

R.Top:= 30;

R. Right:= 100;

R.Bottom:= 100; // Y1

Image1.Canvas.BeginScene; //создание графической сцены

Canvas.Fill.Kind:= TBrushKind. bkSolid; // Тип линии

Canvas.Fill.Color:= TAlphaColors. Blue; // Цвет закраски области

Image1.Canvas.DrawRect(r,5,5,[TCorner.TopLeft,

TCorner.BottomLeft],0.8);

Image1.Canvas. EndScene; //завершение сцены и вывод изображения на экран

end;

DrawRect(r,5,5,[TCorner.TopLeft, TCorner.BottomLeft],0.8) – включает указания на область вывода прямоугольника (r), радиусы закругления углов (5,5) с указанием какие именно углы следует закруглить [TCorner.TopLeft, TCorner.BottomLeft] и указать степень прозрачности фигуры (0.8).

Для прорисовки на поверхности холста графического образа следует создать Bitmap: метод DrawBitmap (const ABitmap: TBitmap; const SrcRect, DstRect: TRectF; const AOpacity: Single; const HighSpeed: Boolean = False):

var

ABitmap: TBitmap;

aWidth, aHeight: integer;

SrcRect, DstRect: TRectF;

begin

with Form1.Canvas do

begin

ABitmap:= TBitmap.Create;

aWidth:= ABitmap. Width;

aHeight:= ABitmap. Height;

SrcRect:= RectF (0,0,aWidth, aHeight);

DstRect:= SrcRect;

if BeginScene then

begin

DrawBitmap (ABitmap, SrcRect, DstRect,1,true);

EndScene;

end;

end; end;

Изображение ABitmap полностью или его части представлено SrcRect, место вывода и размеры – в параметре DstRect.

Параметр HighSpeed позволяет предпочтение скорости (true) или качеству (false) вывода.

Фрагмент исходного рисунка, можно ограничить в SrcRect. Управляя размерами области DstRect, можем увеличить или уменьшить рисунок.

Метод Paint: PaintTo (const ACanvas: TCanvas; const ARect: TRectF; const AParent: TFmxObject = nil); пример: рисуем увеличенную в 2 раза кнопку:

Form1.Canvas.BeginScene;

Button1.PaintTo(Form1.Canvas, RectF (0,0,Button1.Width* 2,Button1. Height*2));

Form1.Canvas. EndScene;

Надо отметить, что если в событии OnPaint Формы все рисуется прекрасно, то при попытке сделать это же при нажатии кнопки можно получить что угодно, а обычно ничего, или кратковременный вывод рисунка на экран, который тут же исчезает. Чтобы получить устойчивую фигуру нужно сделать довольно много, в отличие от обычного Delphi 7. На примере компонента Path, позволяющего рисовать полилинии:

Вначале определяется глобальная переменная Path:

var

Form1: TForm1;

Path: TPathData;

Затем при открытии формы создается траектория Path:

procedure TForm1.FormCreate (Sender: TObject);

begin

Path:= TPathData.Create; //Создаем траекторию

end;

Определяется событие OnPaint для Image (или для Form1):

procedure TForm1.Image1Paint (Sender: TObject; Canvas: TCanvas; const ARect: TRectF);

begin

with Canvas do

if (Path.Count> 0) and (BeginScene) then

try

Clear (TAlphaColorRec. White);

Stroke.Kind:= TBrushKind.Solid;

Stroke.Thickness:= 1;

DrawPath (Path,1); //Рисовать Path при обращении

finally

EndScene;

end;

Собственно рисуем линию на Image по щелчку на кнопке:

procedure TForm1.Button1Click (Sender: TObject);

var

p,p1:TPointF;

begin

p.X:= Image1.Position. X;

p.Y:= Image1.Position. Y;

Path.Clear; // Очистить Path

Path.MoveTo (p1); // Начальная точка рисования

p1.X:= Image1.Position. X+100;

p1.Y:= Image1.Position. Y+150;

Path.LineTo (p1); // Линия от начальной точки

Path.ClosePath; // Оконачание создания Path

// Вывод созданной Path в Image

Image1.OnPaint(Sender,Image1.Canvas,Image1.ClipRect);

end;

Для добавления элементов используют Path1.Data.Add…

(или: Image1.AddObject (TEllipse)):

for i:= 0 to Memo1.Lines.Count – 1 do

begin

X:=X+5; // X с шагом = 5 точек

R.Top:=Path1.Height – StrToInt(Memo1.Lines [i]) // Y

R.Bottom:=R.Top +3; // Диаметр кружка: 1+3=4

R. Left:= X;

R. Right:=R. Left +3;

Path1.Data.AddEllipse (R); //Рисуем кружок

end;

Как видите, рисование в Android не доставляет того же удовольствия, как в Delphi 7. Поэтому гораздо проще использовать фигуры из группы Shape, которые не требует ничего этого и свойства которых можно определять в Object Inspector.

11.4. РИСОВАНИЕ СРЕДСТВАМИ DELPHI ANDROID

Основной класс для для графики в Delphi Android – TCanvas (т.н. «холст») модуля FMX.Graphics. В отличие от обычного Delphi рисование средствами Delphi Android, в результате попыток создания мультиплатформенности, оказывается резко усложнено и вначале может вообще ничего не получиться с выводом рисунка на экран, а в особенности с динамическим выводом данных, хотя для последнего существует специальный компонент для вывода графиков TChart.

Основу рисования составляет Canvas: TCanvas, который внедрен во многие компоненты и обеспечивает рисование на них. Вывод графики лучше осуществлять в рамках события OnPaint, присутствующего у многих компонентов.

Для оценки цвета можно использовать канал RBG (Red, Blue, Green), максимальное значение 255, у яркости максимальное 240. При переводе в градации серого используется:

Яркость = 0.6*Зеленый +0.3*Красный +0.1*Синий. Коэффициенты отражают неравномерность чувствительности глаза к разным участкам спектра.

В Uses следует добавить: System. UITypes.

Создать цвет, например, для компонента прямоугольник, можно смешав 3 цвета (A: Byte = $FF – прозрачность до 255):

var

col: TAlphaColorRec;

begin

col. R:= 255;

col. G:= 255;

col. B:= 255;

col. A:= 255;

Rectangle1.Fill.Color:= TAlphaColor (col);

Rectangle1.Fill.Kind:= TBrushKind.Solid;

end;

Для назначения цвета можно использовать вывод его в 16-ричном формате: $FFF000000 соответствует непрозрачному красному цвету; но удобнее и чаще всего используют TAlphaColor, который использует и 16-речные значения и стандартные цвета:

var color: TAlphaColors;

color:= TAlphaColors.Red;//Подсказка выводится после точки

Предусмотрены также ряд специализированных компонентов на вкладке Color: TColorPanel, TComboBoxColorPanel, TColotListBox, TColorComboBox, TColorPicker и др.

Рисование фигур включает прежде всего описание их свойств внутри BeginScene….EndScene. Так, единственный метод вывода линии ранее:

DrawLine (P1, P2, 1);

теперь превращается в целую историю:

в событии OnPaint основной Form1 подготавливаем сцену:

constant R: TREctF;

var

P1, P2: TPointF;

x1, y1,x2, y2: Integer;

color: TAlphaColor;

Begin

x1:= 10;

y1:= 20;

x2:= 100;

y2:= 200;

P1.X:= x1;

P1.Y:= y1;

P2.X:= x2;

P2.Y:= y2;

with Canvas do

if (Edit1.Text = «1») and (BeginScene) then

try

Stroke.Kind:=TBrushKind.Solid;

Stroke.Color:=TAlphaColors. Blue;

Stroke.Thickness:=2;

Canvas. DrawLine (P1, P2, 1);

finally

endScene;

end;

Для вывода рисунка здесь нужно нажать Button и присвоить Edit1.Text значение «1». При не ограничении вывода рисунок появится прямо при открытии Приложения.

Методы Canvas:

Filll – используемая кисть, имеет множество возможностей;

Stroke – кисть-перо для рисования линий;

Font – для шрифта (Name, Size, Color).

Пример для вывода шрифта:

FillText (RectF (20,30, 200,300), «Текст вывода», true, 1, [], TTextAlign. Center);

Заливка фигур осуществляется методом Fill… для прямоугольника (Rect), эллипса (Ellpise), дуги (Arc), полигональной линии (Polygon) и тректории (Path); полные свойства выводятся автоматически при написании в программе.

При этом Path: TPathData уже не конфликтует с путем для файлов Path: TPath, как это имеет место для Path: TPath группы Shape, однако, рисовать Path: TPathData гораздо менее удобно, чем работать с уже готовыми фигурами Path: TPath.

Для Path: TPathData работают известные методы – перемещение в точку:

MoveTo (const P: TPointF);

и проведение линии от предыдущей точки:

LineTo (const P: TPointF);

Для доступа из любого места программы нужно создать глобальную переменную:

var

Form1: TForm1;

Path: TPathData;

При открытии на OnCreate в Form1 создаем траекторию:

Path:=TpathData.Create;

Подготавливаем сцену для визуализаци в OnPaint и Form1:

with Canvas do

if (Path.Count> 0) and (BeginScene) then

try

Stroke.Kind:=TBrushKind.Solid;

Stroke.Color:=TAlphaColors. Blue;

Stroke.Thickness:=2;

DrawPath (Path,1);

finally

endScene;

end;

Для рисования полилинии на экране, например при движении пальцем, используем метод OnTouch в Form1:

OnTouch в Form1:

case Action of

TTouchAction.Down: begin

Path.MoveTo (Touches [0].Location);

end;

TTouchAction.Move: begin

Path.LineTo (Touches [High (Touches)].Location);

FormPaint(Sender,Form1.Canvas,Form1.ClientRect);

end;

Очистить холст можно методами:

Canvas.Clear (const AColor: TAlphaColor = 0)

или только область:

Canvas.Clear (const ARectF; const AColor: TAlphaColor = 0).

Для прорисовки на поверхности холста графической фигуры существует метод DrawBitmap (константы: ABitmap: TBitmap; SrcRect и Dstrect: TRectF: AOpasity: Single; HighSpeed: Boolean = false): выводится все изображение или его часть (SrcRect в область DstRect). Загружать образ фигуры можно из файла:

var ABitmap:= TBitmap.CreateFromFile («Путь и Имя файла»);

для вывода рисунка:

if BeginScene then

begin

DrawBitmap (ABitmap,1,true);

EndScene;

end;

Сохранить настройки холста можно функцией:

SaveState: TCanvasSaveState;

Восстановить:

RestoreState (SaveState: TCanvasSaveState).

Сохранить и загрузить рисунок в Bitmap можно из Object Inspector или программно:

ABitmap. LoadFromFile ();

ABitmap.SaveToFile ();

ABitmap.SaveToStrem ().

Как отмечалось, во многих случаях удобнее отображать данные (которые удобно направлять в Memo) компонентом Path: TPathData, не конфликтующим с Path: TPath путем для файлов. Для этого вначале создаем глобальную переменную:

var Form1: TForm1; Path: TPathData;

При открытии на OnCreate в Form1 создаем траекторию:

Path:=TpathData.Create;

Подготавливаем сцену для визуализаци в OnPaint и Form1:

with Canvas do

if (Edit1.Text = «1») and (BeginScene) then

try

Stroke.Kind:=TBrushKind.Solid;

Stroke.Color:=TAlphaColors. Blue;

Stroke.Thickness:=2;

DrawPath (Path,1);

finally

endScene;

end;

Начало рисования ограничиваем Edit1.Text = «1», который контролируем Button.

Для рисования используем свойство OnPaint для Button:

procedure TForm1.Button3Paint (Sender: TObject; Canvas: TCanvas;

const ARect: TRectF);

var

P: TPointF;

i: Integer;

begin

P.X:= 0;

P.Y:= StrToInt(Memo1.Lines [0]);

Path.MoveTo (P);

for i:= 0 to Memo1.Lines.Count – 2 do

begin

P.X:= i*4;

P.Y:= PlotGrid1.Height – StrToInt(Memo1.Lines [i]);

Path.LineTo (P);

end;

end;

Результат можно видеть на рисунке: накапливаемые данные тут же отражаются на графике (перерисовывается график для данных в Memo пока Edit1.Text = «1»).

Все же, гораздо удобнее и проще использовать для вывода данных на график специальный компонент, для этого предназначенный: Chart.