Difference between revisions of "BGRABitmap tutorial 2/ru"

From Lazarus wiki
Jump to navigationJump to search
(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}}
  
This tutorial shows you how to load an image and draw it on a form.
+
Из этого урока Вы узнаете, как загрузить изображение и нарисовать его на форме.
  
=== Create a new project ===
+
=== Создаём новый проект ===
  
Create a new project and add a reference to [[BGRABitmap]], the same way as in [[BGRABitmap tutorial|the first tutorial]].
+
Создайте новый проект и добавьте ссылку на модуль [[BGRABitmap]], так же, как в [[BGRABitmap tutorial 1/ru|первом уроке]].
  
=== Load the bitmap ===
+
=== Загружаем растровое изображение (bitmap) ===
  
Copy an image into your project directory. Let's suppose it's name is ''image.png''.
+
Скопируйте изображение в каталог вашего проекта. Предположим, имя файла '' image.png ''.
  
Add a private variable to the main form to store the image :
+
Добавьте переменную "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>
  
Load the image when the form is created. To do this, double-click on the form, a procedure should appear in the code editor. Add the [[TBGRACustomBitmap and IBGRAScanner#Load and save files|loading instruction]] :
+
Загрузите изображение при создании формы. Для этого дважды щелкните форму, в редакторе кода должна появиться процедура. И добавьте [[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>
  
=== Draw the bitmap ===
+
=== Нарисуем растровое изображение (bitmap) ===
  
Add an OnPaint handler. To do this, select the main form, then go to the object inspector, in the event tab, and double-click on the OnPaint line. Then, add the drawing code :
+
Добавьте обработчик 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>
  
Notice that the last parameter is set to True, which means opaque. If you want to take transparent pixels into account, encoded in the alpha channel, you must use False instead. But it can be slow to use transparent drawing on standard canvas, so if it is not necessary, use opaque drawing only.
+
Обратите внимание, что последний параметр имеет значение True, что означает непрозрачность. Если вы хотите принять во внимание прозрачные пиксели, закодированные в альфа-канале, вы должны использовать вместо этого False. Однако использование прозрачного рисунка на стандартном холсте может быть медленным, поэтому, если в этом нет необходимости, используйте только непрозрачный рисунок.
  
=== Code ===
+
=== Весь код ===
  
Finally you should have something like :
+
<syntaxhighlight lang="pascal">unit UMain;
<syntaxhighlight>unit UMain;
 
  
 
{$mode objfpc}{$H+}
 
{$mode objfpc}{$H+}
Line 86: Line 85:
 
end.</syntaxhighlight>
 
end.</syntaxhighlight>
  
=== Run the program ===
+
=== Запустим программу ===
  
You should see a form with an image drawn in it at the upper-left corner.
+
Вы должны увидеть форму с изображением в верхнем левом углу.
  
 
[[Image:BGRATutorial2.png]]
 
[[Image:BGRATutorial2.png]]
  
=== Center the image ===
+
=== Сделаем выравнивание по центру изображения ===
  
You may want to center the image on the form. To do this, modify the FormPaint procedure :
+
Вы можете центрировать изображение в форме. Для этого измените процедуру 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>
  
To compute the position, we need to calculate the space between the image and the left border (X coordinate) and the space between the image and the top border (Y coordinate). The expression ClientWidth - Image.Width returns the available horizontal space, and we divide it by 2 to obtain the left margin.
+
Чтобы вычислить позицию, нам нужно вычислить пространство между изображением и левой границей (координата X) и пространство между изображением и верхней границей (координата Y). Выражение ClientWidth - Image.Width возвращает доступное горизонтальное пространство, и мы делим его на 2, чтобы получить левое поле.
  
The result can be negative if the image is bigger than the client width. In this case, the margin is just set to zero.
+
Результат может быть отрицательным, если изображение больше ширины клиента. В этом случае отступ от края устанавливается на ноль.
  
You can run the program and see if it works. Notice what happens if we remove the test for negative position.
+
Вы можете запустить программу и посмотреть, работает ли она. Обратите внимание, что произойдет, если мы удалим проверку на отрицательную позицию изображения относительно края.
  
=== Stretch the image ===
+
=== Растянем изображение ===
  
To stretch the image, we need to create a temporary stretched image :
+
Чтобы растянуть изображение, нам нужно создать временное растянутое изображение:
<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>
  
By default, it uses fine resample, but you can precise if you want to use simple stretch instead (faster) :
+
По умолчанию используется точное копирование. Но вместо этого Вы можете использовать простое растяжение (работает быстрее):
<syntaxhighlight>stretched := image.Resample(ClientWidth, ClientHeight, rmSimpleStretch) as TBGRABitmap;</syntaxhighlight>
+
<syntaxhighlight lang="pascal">stretched := image.Resample(ClientWidth, ClientHeight, rmSimpleStretch) as TBGRABitmap;</syntaxhighlight>
  
You can also specify the interpolation filter with the [[TBGRACustomBitmap and IBGRAScanner#TBGRACustomBitmap|ResampleFilter]] property:
+
Вы также можете указать интерполяционный фильтр с помощью свойства [[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|First tutorial]] | [[BGRABitmap tutorial 3|Next tutorial (drawing with the mouse)]]
+
[[BGRABitmap tutorial 1/ru|Первый урок]] | [[BGRABitmap tutorial 3|Следующий урок (Рисование с помощью мыши (No. 3))]]
 
 
[[Category:Graphics]]
 
[[Category: BGRABitmap]]
 

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.

Запустим программу

Вы должны увидеть форму с изображением в верхнем левом углу.

BGRATutorial2.png

Сделаем выравнивание по центру изображения

Вы можете центрировать изображение в форме. Для этого измените процедуру 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))