Difference between revisions of "BGRABitmap tutorial 2/ru"
(Created page with "{{BGRABitmap_tutorial_2}} {{BGRABitmap_tutorial_index}} This tutorial shows you how to load an image and draw it on a form. === Create a new project === Create a new proje...") |
m (Fixed syntax highlighting; deleted category already in page template) |
||
(3 intermediate revisions by one other user not shown) | |||
Line 3: | Line 3: | ||
{{BGRABitmap_tutorial_index}} | {{BGRABitmap_tutorial_index}} | ||
− | + | Из этого урока Вы узнаете, как загрузить изображение и нарисовать его на форме. | |
− | === | + | === Создаём новый проект === |
− | + | Создайте новый проект и добавьте ссылку на модуль [[BGRABitmap]], так же, как в [[BGRABitmap tutorial 1/ru|первом уроке]]. | |
− | === | + | === Загружаем растровое изображение (bitmap) === |
− | + | Скопируйте изображение в каталог вашего проекта. Предположим, имя файла '' image.png ''. | |
− | + | Добавьте переменную "image" в "private" область основной формы для хранения изображения: | |
− | <syntaxhighlight> TForm1 = class(TForm) | + | <syntaxhighlight lang="pascal"> TForm1 = class(TForm) |
private | private | ||
{ private declarations } | { private declarations } | ||
Line 22: | Line 22: | ||
end; </syntaxhighlight> | end; </syntaxhighlight> | ||
− | + | Загрузите изображение при создании формы. Для этого дважды щелкните форму, в редакторе кода должна появиться процедура. И добавьте [[TBGRACustomBitmap and IBGRAScanner#Load and save files|инструкцию загрузки изображения из файла]] в переменную "image": | |
− | <syntaxhighlight>procedure TForm1.FormCreate(Sender: TObject); | + | <syntaxhighlight lang="pascal">procedure TForm1.FormCreate(Sender: TObject); |
begin | begin | ||
image := TBGRABitmap.Create('image.png'); | image := TBGRABitmap.Create('image.png'); | ||
end; </syntaxhighlight> | end; </syntaxhighlight> | ||
− | === | + | === Нарисуем растровое изображение (bitmap) === |
− | + | Добавьте обработчик OnPaint. Для этого выберите основную форму, затем перейдите в инспектор объектов на вкладке событий и дважды щелкните строку OnPaint. Затем добавьте код для рисования: | |
− | <syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject); | + | <syntaxhighlight lang="pascal">procedure TForm1.FormPaint(Sender: TObject); |
begin | begin | ||
image.Draw(Canvas,0,0,True); | image.Draw(Canvas,0,0,True); | ||
end; </syntaxhighlight> | end; </syntaxhighlight> | ||
− | + | Обратите внимание, что последний параметр имеет значение True, что означает непрозрачность. Если вы хотите принять во внимание прозрачные пиксели, закодированные в альфа-канале, вы должны использовать вместо этого False. Однако использование прозрачного рисунка на стандартном холсте может быть медленным, поэтому, если в этом нет необходимости, используйте только непрозрачный рисунок. | |
− | === | + | === Весь код === |
− | + | <syntaxhighlight lang="pascal">unit UMain; | |
− | <syntaxhighlight>unit UMain; | ||
{$mode objfpc}{$H+} | {$mode objfpc}{$H+} | ||
Line 86: | Line 85: | ||
end.</syntaxhighlight> | end.</syntaxhighlight> | ||
− | === | + | === Запустим программу === |
− | + | Вы должны увидеть форму с изображением в верхнем левом углу. | |
[[Image:BGRATutorial2.png]] | [[Image:BGRATutorial2.png]] | ||
− | === | + | === Сделаем выравнивание по центру изображения === |
− | + | Вы можете центрировать изображение в форме. Для этого измените процедуру FormPaint: | |
− | <syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject); | + | <syntaxhighlight lang="pascal">procedure TForm1.FormPaint(Sender: TObject); |
var ImagePos: TPoint; | var ImagePos: TPoint; | ||
begin | begin | ||
Line 108: | Line 107: | ||
end;</syntaxhighlight> | end;</syntaxhighlight> | ||
− | + | Чтобы вычислить позицию, нам нужно вычислить пространство между изображением и левой границей (координата X) и пространство между изображением и верхней границей (координата Y). Выражение ClientWidth - Image.Width возвращает доступное горизонтальное пространство, и мы делим его на 2, чтобы получить левое поле. | |
− | + | Результат может быть отрицательным, если изображение больше ширины клиента. В этом случае отступ от края устанавливается на ноль. | |
− | + | Вы можете запустить программу и посмотреть, работает ли она. Обратите внимание, что произойдет, если мы удалим проверку на отрицательную позицию изображения относительно края. | |
− | === | + | === Растянем изображение === |
− | + | Чтобы растянуть изображение, нам нужно создать временное растянутое изображение: | |
− | <syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject); | + | <syntaxhighlight lang="pascal">procedure TForm1.FormPaint(Sender: TObject); |
var stretched: TBGRABitmap; | var stretched: TBGRABitmap; | ||
begin | begin | ||
Line 125: | Line 124: | ||
end;</syntaxhighlight> | end;</syntaxhighlight> | ||
− | + | По умолчанию используется точное копирование. Но вместо этого Вы можете использовать простое растяжение (работает быстрее): | |
− | <syntaxhighlight>stretched := image.Resample(ClientWidth, ClientHeight, rmSimpleStretch) as TBGRABitmap;</syntaxhighlight> | + | <syntaxhighlight lang="pascal">stretched := image.Resample(ClientWidth, ClientHeight, rmSimpleStretch) as TBGRABitmap;</syntaxhighlight> |
− | + | Вы также можете указать интерполяционный фильтр с помощью свойства [[TBGRACustomBitmap and IBGRAScanner#TBGRACustomBitmap|ResampleFilter]]: | |
− | <syntaxhighlight>image.ResampleFilter := rfMitchell; | + | <syntaxhighlight lang="pascal">image.ResampleFilter := rfMitchell; |
stretched := image.Resample(ClientWidth, ClientHeight) as TBGRABitmap;</syntaxhighlight> | stretched := image.Resample(ClientWidth, ClientHeight) as TBGRABitmap;</syntaxhighlight> | ||
− | [[BGRABitmap tutorial 1| | + | [[BGRABitmap tutorial 1/ru|Первый урок]] | [[BGRABitmap tutorial 3|Следующий урок (Рисование с помощью мыши (No. 3))]] |
− | |||
− | |||
− |
Latest revision as of 07:01, 10 February 2020
│ Deutsch (de) │ English (en) │ español (es) │ français (fr) │ русский (ru) │
Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Tutorial 13 | Tutorial 14 | Tutorial 15 | Tutorial 16 | Edit
Из этого урока Вы узнаете, как загрузить изображение и нарисовать его на форме.
Создаём новый проект
Создайте новый проект и добавьте ссылку на модуль BGRABitmap, так же, как в первом уроке.
Загружаем растровое изображение (bitmap)
Скопируйте изображение в каталог вашего проекта. Предположим, имя файла image.png .
Добавьте переменную "image" в "private" область основной формы для хранения изображения:
TForm1 = class(TForm)
private
{ private declarations }
image: TBGRABitmap;
public
{ public declarations }
end;
Загрузите изображение при создании формы. Для этого дважды щелкните форму, в редакторе кода должна появиться процедура. И добавьте инструкцию загрузки изображения из файла в переменную "image":
procedure TForm1.FormCreate(Sender: TObject);
begin
image := TBGRABitmap.Create('image.png');
end;
Нарисуем растровое изображение (bitmap)
Добавьте обработчик OnPaint. Для этого выберите основную форму, затем перейдите в инспектор объектов на вкладке событий и дважды щелкните строку OnPaint. Затем добавьте код для рисования:
procedure TForm1.FormPaint(Sender: TObject);
begin
image.Draw(Canvas,0,0,True);
end;
Обратите внимание, что последний параметр имеет значение True, что означает непрозрачность. Если вы хотите принять во внимание прозрачные пиксели, закодированные в альфа-канале, вы должны использовать вместо этого False. Однако использование прозрачного рисунка на стандартном холсте может быть медленным, поэтому, если в этом нет необходимости, используйте только непрозрачный рисунок.
Весь код
unit UMain;
{$mode objfpc}{$H+}
interface
uses
Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
BGRABitmap, BGRABitmapTypes;
type
{ TForm1 }
TForm1 = class(TForm)
procedure FormCreate(Sender: TObject);
procedure FormPaint(Sender: TObject);
private
{ private declarations }
image: TBGRABitmap;
public
{ public declarations }
end;
var
Form1: TForm1;
implementation
{ TForm1 }
procedure TForm1.FormCreate(Sender: TObject);
begin
image := TBGRABitmap.Create('image.png');
end;
procedure TForm1.FormPaint(Sender: TObject);
begin
image.Draw(Canvas,0,0,True);
end;
initialization
{$I UMain.lrs}
end.
Запустим программу
Вы должны увидеть форму с изображением в верхнем левом углу.
Сделаем выравнивание по центру изображения
Вы можете центрировать изображение в форме. Для этого измените процедуру FormPaint:
procedure TForm1.FormPaint(Sender: TObject);
var ImagePos: TPoint;
begin
ImagePos := Point( (ClientWidth - Image.Width) div 2,
(ClientHeight - Image.Height) div 2 );
// test for negative position
if ImagePos.X < 0 then ImagePos.X := 0;
if ImagePos.Y < 0 then ImagePos.Y := 0;
image.Draw(Canvas,ImagePos.X,ImagePos.Y,True);
end;
Чтобы вычислить позицию, нам нужно вычислить пространство между изображением и левой границей (координата X) и пространство между изображением и верхней границей (координата Y). Выражение ClientWidth - Image.Width возвращает доступное горизонтальное пространство, и мы делим его на 2, чтобы получить левое поле.
Результат может быть отрицательным, если изображение больше ширины клиента. В этом случае отступ от края устанавливается на ноль.
Вы можете запустить программу и посмотреть, работает ли она. Обратите внимание, что произойдет, если мы удалим проверку на отрицательную позицию изображения относительно края.
Растянем изображение
Чтобы растянуть изображение, нам нужно создать временное растянутое изображение:
procedure TForm1.FormPaint(Sender: TObject);
var stretched: TBGRABitmap;
begin
stretched := image.Resample(ClientWidth, ClientHeight) as TBGRABitmap;
stretched.Draw(Canvas,0,0,True);
stretched.Free;
end;
По умолчанию используется точное копирование. Но вместо этого Вы можете использовать простое растяжение (работает быстрее):
stretched := image.Resample(ClientWidth, ClientHeight, rmSimpleStretch) as TBGRABitmap;
Вы также можете указать интерполяционный фильтр с помощью свойства ResampleFilter:
image.ResampleFilter := rfMitchell;
stretched := image.Resample(ClientWidth, ClientHeight) as TBGRABitmap;
Первый урок | Следующий урок (Рисование с помощью мыши (No. 3))