Sign in Join
Wiki copytemporary

Revision 1 of 1, by Trev on 2-9-2020. The page as it is now.

Developing with Graphics/ko

이 페이지는 비트맵과 다른 그래픽들 다루는 튜토리얼의 시작이 될 것이다. 나는 프로그래머가 아니지만, 자신의 경험을 나눌 수 있는 사람은 누구나 다 초대한다! 다음 섹션에 링크를 추가하고 페이지를 더하고 자신의 WiKi 문서를 만들기만 하면 된다.

이 페이지에선 일반적인 정보를 줄 것이다.

라이브러리

그래픽 라이브러리 - 이곳에서는 개발에 사용할 수 있는 주요한 그래픽 라이브러리 들을 볼 수 있을 것이다.

다른 그래픽 문서

2D 그리기

3D 그리기

챠트

LCL의 그래픽 모델에 대한 소개

The LCL provides two kinds of drawing class: Native classes and non-native classes. Native graphics classes are the most traditional way of drawing graphics in the LCL and are also the most important one, while the non-native classes are complementary, but also very important. The native classes are mostly located in the unit Graphics of the LCL and are the well known classes: TBitmap, TCanvas, TFont, TBrush, TPen, TPortableNetworkGraphic, etc.

TCanvas is a class capable of executing drawings. It cannot exist alone and must either be attached to something visible (or at least which may possibly be visible), such as a visual control descending from TControl, or be attached to an off-screen buffer from a TRasterImage descendent (TBitmap is the most commonly used). TFont, TBrush and TPen describe how the drawing of various operations will be executed in the Canvas.

TRasterImage (usually used via its descendant TBitmap) is a memory area reserved for drawing graphics, but it is created for maximum compatibility with the native Canvas and therefore in LCL-Gtk2 in X11 it is located in the X11 server, which makes pixel access via the Pixels property extremely slow. In Windows it is very fast because Windows allows creating a locally allocated image which can receive drawings from a Windows Canvas.

Besides these there are also non-native drawing classes located in the units graphtype (TRawImage), intfgraphics (TLazIntfImage) and lazcanvas (TLazCanvas, this one exists in Lazarus 0.9.31+). TRawImage is the storage and description of a memory area which contains an image. TLazIntfImage is an image which attaches itself to a TRawImage and takes care of converting between TFPColor and the real pixel format of the TRawImage. TLazCanvas is a non-native Canvas which can draw to an image in a TLazIntfImage.

The main difference between the native classes and the non-native ones is that the native ones do not perform exactly the same in all platforms, because the drawing is done by the underlying platform itself. The speed and also the exact final result of the image drawing can have differences. The non-native classes are guaranteed to perform exactly the same drawing in all platforms with a pixel level precision and they all perform reasonably fast in all platforms.

In the widgetset LCL-CustomDrawn the native classes are implemented using the non-native ones.

All of these classes will be better described in the sections below.

TCanvas로 작업하기

디폴트 GUI 폰트 사용하기

다음 샘플코드로 사용이 가능하다:

pascal
SelectObject(Canvas.Handle, GetStockObject(DEFAULT_GUI_FONT));

폭이 제한된 텍스트 그리기

DrawText 루틴을 사용해라, 처음에는 DT_CALCRECT와 함께 다음에는 없이 사용한다.

pascal
// First calculate the text size then draw it
      TextBox := Rect(0, currentPos.Y, Width, High(Integer));
      DrawText(ACanvas.Handle, PChar(Text), Length(Text),
        TextBox, DT_WORDBREAK or DT_INTERNAL or DT_CALCRECT);
    
      DrawText(ACanvas.Handle, PChar(Text), Length(Text),
        TextBox, DT_WORDBREAK or DT_INTERNAL);

날카로운 에지를 가진 텍스트 그리기(안티알리아싱 없음)

몇몇 위젯 다음을 통해 이를 지원한다:

pascal
Canvas.Font.Quality:=fqNonAntialiased

gtk2 같은 몇몇 위젯 셋은 이를 지원하지 않고 항상 엘리아스로 그린다. gtk2에서 날카로운 모서리를 가진 텍스트를 그리는 간단한 procedure가 있다. 모든 경우를 고려한 것이 아니고 아이디어만 제공한다:

pascal
procedure PaintAliased(Canvas: TCanvas; x,y: integer; const TheText: string);
    var
      w,h: integer;
      IntfImg: TLazIntfImage;
      Img: TBitmap;
      dy: Integer;
      dx: Integer;
      col: TFPColor;
      FontColor: TColor;
      c: TColor;
    begin
      w:=0;
      h:=0;
      Canvas.GetTextSize(TheText,w,h);
      if (w<=0) or (h<=0) then exit;
      Img:=TBitmap.Create;
      IntfImg:=nil;
      try
        // 비트맵에 텍스트를 그림
        Img.Masked:=true;
        Img.SetSize(w,h);
        Img.Canvas.Brush.Style:=bsSolid;
        Img.Canvas.Brush.Color:=clWhite;
        Img.Canvas.FillRect(0,0,w,h);
        Img.Canvas.Font:=Canvas.Font;
        Img.Canvas.TextOut(0,0,TheText);
        // 메모리 이미지를 얻어온다
        IntfImg:=Img.CreateIntfImage;
        // 회색 픽셀을 치환
        FontColor:=ColorToRGB(Canvas.Font.Color);
        for dy:=0 to h-1 do begin
          for dx:=0 to w-1 do begin
            col:=IntfImg.Colors[dx,dy];
            c:=FPColorToTColor(col);
            if c<>FontColor then
              IntfImg.Colors[dx,dy]:=colTransparent;
          end;
        end;
        // 비트맵 생성
        Img.LoadFromIntfImage(IntfImg);
        // 페인트
        Canvas.Draw(x,y,Img);
      finally
        IntfImg.Free;
        Img.Free;
      end;
    end;

TBitmap과 다른 TGraphics 자손으로 작업하기

TBitmap 객체는 스크린에 보여주기 전에 비트맵을 저장한다. 비트맵을 생성할 때 높이와 넓이를 지정해야만 하며 지정하지 않으면 크기는 0이 되고 아무것도 그릴 수 없게 된다. 그리고 일반적으로 모든 다른 TRasterImage 의 자손들은 동일한 능력을 제공한다. 디스크에서 입출력하려는 포맷과 일치하는 것을 사용하여야 하며 그렇지 않다면 윈도우즈 비트맵(*bmp)일 경우 TBitmap에 관한 디스크 동작은 수행되지 않을 것이다.

(맨 먼저 기억해야 할 것은 라자루스는 플랫폼에 독립적이라는 것이므로, 윈도우즈 API 함수를 사용하는 어떠한 메써드도 질문의 대상이 아니라는 것이다. 그러므로 ScanLine 같은 메써드는 라자루스에서 지원하지 않는다. 라자루스는 장치 독립적인 Bitmap과 GDI32.dll에 있는 함수를 사용하고자 하기 때문입니다

당신이 TBitmap의 높이와 폭을 정의하지 않았다면 그것은 표준적인 것이고 매우 작은 것이라는 것을 명심해라)

Loading/Saving an image from/to the disk

To load an image from the disk use TGraphic.LoadFromFile and to save it to another disk file use TGraphic.SaveToFile. Use the appropriate TGraphic descendent which matches the format expected. See Developing_with_Graphics#Image_formats for a list of available image format classes.

pascal
var
      MyBitmap: TBitmap;
    begin
      MyBitmap := TBitmap.Create;
      try
        // Load from disk
        MyBitmap.LoadFromFile(MyEdit.Text);
    
        // Here you can use MyBitmap.Canvas to read/write to/from the image
    
        // Write back to another disk file
        MyBitmap.SaveToFile(MyEdit2.Text);
      finally
        MyBitmap.Free;
      end;
    end;

When using any other format the process is compelely identical, just use the adequate class. For example, for PNG images:

pascal
var
      MyPNG: TPortableNetworkGraphic;
    begin
      MyPNG := TPortableNetworkGraphic.Create;
      try
        // Load from disk
        MyPNG.LoadFromFile(MyEdit.Text);
    
        // Here you can use MyPNG.Canvas to read/write to/from the image
    
        // Write back to another disk file
        MyPNG.SaveToFile(MyEdit2.Text);
      finally
        MyPNG.Free;
      end;
    end;

If you don't know beforehand the format of the image, use TPicture which will determine the format based in the file extension. Note that TPicture does not support all formats supported by Lazarus, as of Lazarus 0.9.31 it supports BMP, PNG, JPEG, Pixmap and PNM while Lazarus also supports ICNS and other formats:

pascal
var
      MyPicture: TPicture;
    begin
      MyPicture := TPicture.Create;
      try
        // Load from disk
        MyPicture.LoadFromFile(MyEdit.Text);
    
        // Here you can use MyPicture.Graphic.Canvas to read/write to/from the image
    
        // Write back to another disk file
        MyPicture.SaveToFile(MyEdit2.Text);
      finally
        MyPicture.Free;
      end;
    end;

Direct pixel access

To do directly access the pixels of bitmaps one can either use external libraries, such as BGRABitmap, LazRGBGraphics and Graphics32 or use the Lazarus native TLazIntfImage. For a comparison of pixel access methods, see fast direct pixel access.

On some Lazarus widgetsets (notably LCL-Gtk2), the bitmap data is not stored in memory location which can be accessed by the application and in general the LCL native interfaces draw only through native Canvas routines, so each SetPixel / GetPixel operation involves a slow call to the native Canvas API. In LCL-CustomDrawn this is not the case since the bitmap is locally stored for all backends and SetPixel / GetPixel is fast. For obtaining a solution which works in all widgetsets one should use TLazIntfImage. As Lazarus is meant to be platform independent and work in gtk2, the TBitmap class does not provide a property like Scanline. There is a GetDataLineStart function, equivalent to Scanline, but only available for memory images like TLazIntfImage which internally uses TRawImage.

To sum it up, with the standard TBitmap, you can only change pixels indirectly, by using TCanvas.Pixels. Calling a native API to draw / read an individual pixel is course slower than direct pixel access, notably so in LCL-gtk2 and LCL-Carbon.

컬러가 투명한 비트맵 그리기

라자루스 0.9.11에서 구현된 새로운 특징은 컬러 투명한 비트맵이다. 비트맵 파일(*.BMP)파일은 투명도를 저장 할 수 있는 어떠한 정보도 저장할 수 없지만, 투명영역을 표현하기위한 컬러를 선택한다면 그 정보를 가진 것 처럼 동작한다. 이것은 Win32 어플리케이션에서 사용된 일반적인 트릭이다.

다음 예제는 윈도우즈 리소스에서 비트맵을 로드하고, 투명하기 원하는 색상(clFuchsia)을 선택하고 그것을 캔버스에 그린다.

pascal
procedure MyForm.MyButtonOnClick(Sender: TObject);
    var
      buffer: THandle;
      bmp: TBitmap;
      memstream: TMemoryStream;
    begin
      bmp:= TBitmap.Create;
    
      buffer:= Windows.LoadBitmap(hInstance, MAKEINTRESOURCE(ResourceID));
    
      if (buffer = 0) then exit; // 비트맵을 로딩하다가 에러
    
      bmp.Handle:= buffer;
      memstream:= TMemoryStream.create;
      try
        bmp.SaveToStream(memstream);
        memstream.position:= 0;
        bmp.LoadFromStream(memstream);
      finally
        memstream.free;
      end;
    
      bmp.Transparent:= True;
      bmp.TransparentColor:= clFuchsia;
    
      MyCanvas.Draw(0, 0, bmp);
    
      bmp.Free; // 할당된 비트맵을 해제한다.
    end;

메모리 할당은 TMemoryStream으로 수행한다는 것을 명심하라. 이미지를 정확히 로딩하는지 확인하는 것은 필수이다.

스크린의 스크린 샷 얻기

라자루스 0.9.16 이래크로스 플랫폼상에서 스크린의 스크린샷을 얻기 위해 LCL을 사용할 수 있다. 다음 예제 코드가 그렇게 한다(gtk2와 win32상에서 동작하지만, gtk1에서는 현재 동작하지 않는다):

pascal
uses LCLIntf, LCLType;
    
      ...
    
    var
      MyBitmap: TBitmap;
      ScreenDC: HDC;
    begin
      MyBitmap:= TBitmap.Create;
      ScreenDC:= GetDC(0);
      MyBitmap.LoadFromDevice(ScreenDC);
      ReleaseDC(ScreenDC);
    
      ...

서서히 사라지는 예

Fading 그림을 만들려고 한다면, 델파이에서는 다음과 같을 것이다:

`

pascal
type
      PRGBTripleArray = ^TRGBTripleArray;
      TRGBTripleArray = array[0..32767] of TRGBTriple;
    
    procedure TForm1.FadeIn(aBitMap: TBitMap);
    var
      Bitmap, BaseBitmap: TBitmap;
      Row, BaseRow: PRGBTripleArray;
      x, y, step: integer;
    begin
      Bitmap:= TBitmap.Create;
      try
        Bitmap.PixelFormat:= pf32bit;  //  pf24bit
        Bitmap.Assign(aBitMap);
        BaseBitmap:= TBitmap.Create;
        try
          BaseBitmap.PixelFormat:= pf32bit;
          BaseBitmap.Assign(Bitmap);
          for step:= 0 to 32 do begin
            for y:= 0 to (Bitmap.Height - 1) do begin
              BaseRow:= BaseBitmap.Scanline[y];
              Row:= Bitmap.Scanline[y];
              for x:= 0 to (Bitmap.Width - 1) do begin
                Row[x].rgbtRed:= (step * BaseRow[x].rgbtRed) shr 5;
                Row[x].rgbtGreen:= (step * BaseRow[x].rgbtGreen) shr 5; // Fading
                Row[x].rgbtBlue:= (step * BaseRow[x].rgbtBlue) shr 5;
              end;
            end;
            Form1.Canvas.Draw(0, 0, Bitmap);
            InvalidateRect(Form1.Handle, nil, False);
            RedrawWindow(Form1.Handle, nil, 0, RDW_UPDATENOW);
          end;
        finally
          BaseBitmap.Free;
        end;
      finally
        Bitmap.Free;
      end;
    end;
pascal

``      :

uses LCLType, // HBitmap 타입 IntfGraphics, // TLazIntfImage 타입 fpImage; // TFPColor 타입 ... procedure TForm1.FadeIn(ABitMap: TBitMap); var SrcIntfImg, TempIntfImg: TLazIntfImage; ImgHandle,ImgMaskHandle: HBitmap; FadeStep: Integer; px, py: Integer; CurColor: TFPColor; TempBitmap: TBitmap; begin SrcIntfImg:=TLazIntfImage.Create(0,0); SrcIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle); TempIntfImg:=TLazIntfImage.Create(0,0); TempIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle); TempBitmap:=TBitmap.Create; for FadeStep:=1 to 32 do begin for py:=0 to SrcIntfImg.Height-1 do begin for px:=0 to SrcIntfImg.Width-1 do begin CurColor:=SrcIntfImg.Colors[px,py]; CurColor.Red:=(CurColor.RedFadeStep) shr 5; CurColor.Green:=(CurColor.GreenFadeStep) shr 5; CurColor.Blue:=(CurColor.Blue*FadeStep) shr 5; TempIntfImg.Colors[px,py]:=CurColor; end; end; TempIntfImg.CreateBitmaps(ImgHandle,ImgMaskHandle,false); TempBitmap.Handle:=ImgHandle; TempBitmap.MaskHandle:=ImgMaskHandle; Canvas.Draw(0,0,TempBitmap); end; SrcIntfImg.Free; TempIntfImg.Free; TempBitmap.Free; end;

pascal

    $LazarusPath/examples/lazintfimage/fadein1.lpi   .           . 

### TLazIntfImage Canvas 

ScanLines   TBitmap   , Bitmap scanline      TLazIntfImage  .  TBitmap TLazIntfImage      Canvas TLazIntfImage    .

uses ...GraphType, IntfGraphics, LCLType, LCLProc, LCLIntf ...

pascal
procedure TForm1.Button4Click(Sender: TObject);
var
  b: TBitmap;
  t: TLazIntfImage;
  bmp, old: HBitmap;
  msk: HBitmap;
  tmpDC: HDC;
begin
  b:= TBitmap.Create;
  try
    b.LoadFromFile('test.bmp');
    t:= b.CreateIntfImage;
    t.CreateBitmaps(bmp, msk, false);
pascal
tmpDC:= CreateCompatibleDC(Canvas.Handle);
old:= SelectObject(tmpDC, bmp);
BitBlt(Canvas.Handle, 0, 0, t.Width, t.Height, tmpDC, 0, 0, SRCCOPY);
DeleteObject(SelectObject(tmpDC, old));
DeleteObject(msk);
DeleteDC(tmpDC);
pascal
finally
  t.Free;
  b.Free;
end;
pascal
end;
pascal

## Working with TLazIntfImage, TRawImage and TLazCanvas

TLazIntfImage is a non-native equivalent of TRasterImage (more commonly utilized in the form of it's descendent TBitmap). The first thing to be aware about this class is that unlike TBitmap it will not automatically allocate a memory area for the bitmap, one should first initialize a memory area and then give it to the TLazIntfImage. Right after creating a TLazIntfImage one should either connect it to a TRawImage or load it from a TBitmap. 

TRawImage is of the type object and therefore does not need to be created nor freed. It can either allocate the image memory itself when one calls TRawImage.CreateData or one can pass a memory block allocated for examply by a 3rd party library such as the Windows API of the Cocoa Framework from Mac OS X and pass the information of the image in TRawImage.Description, TRawImage.Data and TRawImage.DataSize. Instead of attaching it to a RawImage one could also load it from a TBitmap which will copy the data from the TBitmap and won't be syncronized with it afterwards. The TLazCanvas cannot exist alone and must always be attached to a TLazIntfImage. 

The example below shows how to choose a format for the data and ask the TRawImage to create it for us and then we attach it to a TLazIntfImage and then attach a TLazCanvas to it:

uses graphtype, intfgraphics, lazcanvas;

pascal
var
  AImage: TLazIntfImage;
  ACanvas: TLazCanvas;
  lRawImage: TRawImage;
begin
    lRawImage.Init;
    lRawImage.Description.Init_BPP32_A8R8G8B8_BIO_TTB(AWidth, AHeight);
    lRawImage.CreateData(True);
    AImage := TLazIntfImage.Create(0,0);
    AImage.SetRawImage(lRawImage);
    ACanvas := TLazCanvas.Create(AImage);
pascal

### Initializing a TLazIntfImage

One cannot simply create an instance of TLazIntfImage and start using it. It needs to add a storage to it. There are 3 ways to do this: 

1\. Attach it to a TRawImage 

2\. Load it from a TBitmap. Note that it will copy the memory of the TBitmap so it won't remain connected to it.

SrcIntfImg:=TLazIntfImage.Create(0,0); SrcIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);

pascal

3\. Load it from a raw image description, like this:

IntfImg := TLazIntfImage.Create(0,0); IntfImg.DataDescription:=GetDescriptionFromDevice(0); IntfImg.SetSize(10,10);

pascal

The 0 device in **GetDescriptionFromDevice(0)** uses the current screen format. 

### TLazIntfImage.LoadFromFile

Here is an example how to load an image directly into a TLazIntfImage. It initializes the TLazIntfImage to a 32bit RGBA format. Keep in mind that this is probably not the native format of your screen.

uses LazLogger, Graphics, IntfGraphics, GraphType; procedure TForm1.FormCreate(Sender: TObject); var AImage: TLazIntfImage; lRawImage: TRawImage; begin // create a TLazIntfImage with 32 bits per pixel, alpha 8bit, red 8 bit, green 8bit, blue 8bit, // Bits In Order: bit 0 is pixel 0, Top To Bottom: line 0 is top lRawImage.Init; lRawImage.Description.Init_BPP32_A8R8G8B8_BIO_TTB(0,0); lRawImage.CreateData(false); AImage := TLazIntfImage.Create(0,0); try AImage.SetRawImage(lRawImage); // Load an image from disk. // It uses the file extension to select the right registered image reader. // The AImage will be resized to the width, height of the loaded image. AImage.LoadFromFile('lazarus/examples/openglcontrol/data/texture1.png'); debugln(['TForm1.FormCreate ',AImage.Width,' ',AImage.Height]); finally AImage.Free; end; end;

pascal

### Loading a TLazIntfImage into a TImage

The pixel data of a **TImage** is the **TImage.Picture** property, which is of type _TPicture_. **TPicture** is a multi format container containing one of several common image formats like Bitmap, Icon, Jpeg or PNG . Usually you will use the _TPicture.Bitmap_ to load a **TLazIntfImage** :

Image1.Picture.Bitmap.LoadFromIntfImage(IntfImg);

pascal

**Notes:**

  * To load a **transparent** TLazIntfImage you have to set the **Image1.Transparent** to true.
  * TImage uses the screen format. If the TLazIntfImage has a different format then the pixels will be converted. Hint: You can use **IntfImg.DataDescription:=GetDescriptionFromDevice(0);** to initialize the TLazIntfImage with the screen format.

###   

TLazIntfImage

{ This code has been taken from the $LazarusPath/examples/lazintfimage/fadein1.lpi project. } uses LCLType, // HBitmap 타입 IntfGraphics, // TLazIntfImage 타입 fpImage; // TFPColor 타입 ... procedure TForm1.FadeIn(ABitMap: TBitMap); var SrcIntfImg, TempIntfImg: TLazIntfImage; ImgHandle,ImgMaskHandle: HBitmap; FadeStep: Integer; px, py: Integer; CurColor: TFPColor; TempBitmap: TBitmap; begin SrcIntfImg:=TLazIntfImage.Create(0,0); SrcIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle); TempIntfImg:=TLazIntfImage.Create(0,0); TempIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle); TempBitmap:=TBitmap.Create; for FadeStep:=1 to 32 do begin for py:=0 to SrcIntfImg.Height-1 do begin for px:=0 to SrcIntfImg.Width-1 do begin CurColor:=SrcIntfImg.Colors[px,py]; CurColor.Red:=(CurColor.RedFadeStep) shr 5; CurColor.Green:=(CurColor.GreenFadeStep) shr 5; CurColor.Blue:=(CurColor.Blue*FadeStep) shr 5; TempIntfImg.Colors[px,py]:=CurColor; end; end; TempIntfImg.CreateBitmaps(ImgHandle,ImgMaskHandle,false); TempBitmap.Handle:=ImgHandle; TempBitmap.MaskHandle:=ImgMaskHandle; Canvas.Draw(0,0,TempBitmap); end; SrcIntfImg.Free; TempIntfImg.Free; TempBitmap.Free; end;

pascal

### Image format specific example

If you know that the TBitmap is using blue 8bit, green 8bit, red 8bit you can directly access the bytes, which is somewhat faster:

uses LCLType, // HBitmap type IntfGraphics, // TLazIntfImage type fpImage; // TFPColor type ... type TRGBTripleArray = array[0..32767] of TRGBTriple; PRGBTripleArray = ^TRGBTripleArray;

pascal
procedure TForm1.FadeIn2(aBitMap: TBitMap);
 var
   IntfImg1, IntfImg2: TLazIntfImage;
   ImgHandle,ImgMaskHandle: HBitmap;
   FadeStep: Integer;
   px, py: Integer;
   CurColor: TFPColor;
   TempBitmap: TBitmap;
   Row1, Row2: PRGBTripleArray;
 begin
   IntfImg1:=TLazIntfImage.Create(0,0);
   IntfImg1.LoadFromBitmap(aBitmap.Handle,aBitmap.MaskHandle);
pascal
IntfImg2:=TLazIntfImage.Create(0,0);
IntfImg2.LoadFromBitmap(aBitmap.Handle,aBitmap.MaskHandle);
pascal
TempBitmap:=TBitmap.Create;
pascal
//with Scanline-like
for FadeStep:=1 to 32 do begin
  for py:=0 to IntfImg1.Height-1 do begin
    Row1 := IntfImg1.GetDataLineStart(py); //like Delphi TBitMap.ScanLine
    Row2 := IntfImg2.GetDataLineStart(py); //like Delphi TBitMap.ScanLine
    for px:=0 to IntfImg1.Width-1 do begin
      Row2^[px].rgbtRed:= (FadeStep * Row1^[px].rgbtRed) shr 5;
      Row2^[px].rgbtGreen := (FadeStep * Row1^[px].rgbtGreen) shr 5; // Fading
      Row2^[px].rgbtBlue := (FadeStep * Row1^[px].rgbtBlue) shr 5;
    end;
  end;
  IntfImg2.CreateBitmaps(ImgHandle,ImgMaskHandle,false);
pascal
TempBitmap.Handle:=ImgHandle;
TempBitmap.MaskHandle:=ImgMaskHandle;
Canvas.Draw(0,0,TempBitmap);
pascal
end;
pascal
IntfImg1.Free;
IntfImg2.Free;
TempBitmap.Free;
pascal
end;
pascal

### Conversion between TLazIntfImage and TBitmap

Since Lazarus has no TBitmap.ScanLines property, the best way to access the pixels of an image in a fast way for both reading and writing is by using TLazIntfImage. The TBitmap can be converted to a TLazIntfImage by using TBitmap.CreateIntfImage() and after modifying the pixels it can be converted back to a TBitmap by using TBitmap.LoadFromIntfImage(); Here's the sample on how to create TLazIntfImage from TBitmap, modify it and then go back to the TBitmap.

uses ...GraphType, IntfGraphics, LCLType, LCLProc, LCLIntf ...

pascal
procedure TForm1.Button4Click(Sender: TObject);
var
  b: TBitmap;
  t: TLazIntfImage;
begin
  b := TBitmap.Create;
  try
    b.LoadFromFile('test.bmp');
    t := b.CreateIntfImage;
pascal
// Read and/or write to the pixels
t.Colors[10,20] := colGreen;
pascal
b.LoadFromIntfImage(t);
pascal
finally
  t.Free;
  b.Free;
end;
pascal
end;
pascal

### Using the non-native StretchDraw from LazCanvas

Just like TCanvas.StretchDraw there is TLazCanvas.StretchDraw but you need to specify the interpolation which you desire to use. The interpolation which provides a Windows-like StretchDraw with a very sharp result (the opposite of anti-aliased) can be added with: TLazCanvas.Interpolation := TFPSharpInterpolation.Create; 

There are other interpolations available in the unit fpcanvas.

uses intfgraphics, lazcanvas;

pascal
procedure TForm1.StretchDrawBitmapToBitmap(SourceBitmap, DestBitmap: TBitmap; DestWidth, DestHeight: integer);
var
  DestIntfImage, SourceIntfImage: TLazIntfImage;
  DestCanvas: TLazCanvas;
begin
  // Prepare the destination
pascal
DestIntfImage := TLazIntfImage.Create(0, 0);
DestIntfImage.LoadFromBitmap(DestBitmap.Handle, 0);
pascal
DestCanvas := TLazCanvas.Create(DestIntfImage);
pascal
//Prepare the source
SourceIntfImage := TLazIntfImage.Create(0, 0);
SourceIntfImage.LoadFromBitmap(SourceBitmap.Handle, 0);
pascal
// Execute the stretch draw via TFPSharpInterpolation
DestCanvas.Interpolation := TFPSharpInterpolation.Create;
DestCanvas.StretchDraw(0, 0, DestWidth, DestHeight, SourceIntfImage);
pascal
// Reload the image into the TBitmap
DestBitmap.LoadFromIntfImage(DestIntfImage);
pascal
SourceIntfImage.Free;
DestCanvas.Interpolation.Free;  
DestCanvas.Free;
DestIntfImage.Free;
pascal
end;
pascal
procedure TForm1.FormPaint(Sender: TObject);
var
  Bmp, DestBitmap: TBitmap;
begin
  // Prepare the destination
  DestBitmap := TBitmap.Create;
  DestBitmap.Width := 100;
  DestBitmap.Height := 100;
pascal
Bmp := TBitmap.Create;
Bmp.Width := 10;
Bmp.Height := 10;
Bmp.Canvas.Pen.Color := clYellow;
Bmp.Canvas.Brush.Color := clYellow;
Bmp.Canvas.Rectangle(0, 0, 10, 10);
StretchDrawBitmapToBitmap(Bmp, DestBitmap, 100, 100);
Canvas.Draw(0, 0, Bmp);
Canvas.Draw(100, 100, DestBitmap);
pascal
end;
pascal

##   -   

  2D  GUI  .         :       .           .        . 

         ?  OpenGL       ,            . OpenGL       .  A.J. Venter gamepack   ,      . 

Canvas         : 

  * TImage 
  * , TPaintBox    OnPaint 
  *       
  * A.J. Venter  

### TImage 

TImage   . TGraphic,  TBitmap,      OnPaint   . TImage   bitmap   ****. ( ) Image1.Picture.Graphic ( Image1.Picture.Bitmap)    .  Image1.Picture.Bitmap.Canvas. TImage    Image1.Canvas  Image1.OnPaint     . 

**** : TImage graphic/bitmap   Image1  OnPaint  . TImage graphic   ,           .         .      . TImage      . 

#### TImage   

Note: OnPaint   .

with Image1.Picture.Bitmap do begin Width:=100; Height:=120; end;

pascal

#### TImage  

Note: OnPaint   .

with Image1.Picture.Bitmap.Canvas do begin // 모든 비트맵을 빨강으로 채우기 Brush.Color:=clRed; FillRect(0,0,Width,Height); end;

pascal

Note: Image1.OnPaint  Image1.Canvas volatile visible  . Image1.OnPaint  Image1.Canvas Image1.Picture.Bitmap.Canvas . 

 : 

` `

`

procedure TForm1.BitBtn1Click(Sender: TObject); var x, y: Integer; begin // 배경 그리기 MyImage.Canvas.Pen.Color := clWhite; MyImage.Canvas.Rectangle(0, 0, Image.Width, Image.Height);

pascal
// 사각형 그리기
MyImage.Canvas.Pen.Color:= clBlack;
for x:= 1 to 8 do
 for y:= 1 to 8 do
  MyImage.Canvas.Rectangle(Round((x - 1) * Image.Width / 8), Round((y - 1) * Image.Height / 8),
     Round(x * Image.Width / 8), Round(y * Image.Height / 8));
pascal
end;
pascal

``

TImage의 volatile visual 영역에 페인팅하기

OnPaint 동안 이 영역에만 페인트 할 수 있다. 그 영역이 무효화 될 때 결국 LCL은 자동으로 OnPaint를 부른다. Image1.Invalidate로 수동적으로 그 여역을 무효화 시킬 수 있다.이는 즉시 OnPaint를 부르는 것이 아니므로 원할 때마다 Invalidate를 부를 수 있다.

pascal
procedure TForm.Image1Paint(Sender: TObject);
     begin
       with Image1.Canvas do begin
         // 선을 페인트한다.
         Pen.Color:=clRed;
         Line(0,0,Width,Height);
       end;
     end;

OnPaint 이벤트에 그리기

이 경우 모든 드로잉은 폼의 OnPaint 이벤트에서 이루어져야 한다. TImage 처럼 버퍼에 남아있지 않는다.

자체적으로 그릴 수 있는 커스텀 컨트롤 생성하기

커스텀 컨트롤을 생성하는 것은 코드를 구조화 시키는 장점이 있으며 컨트롤을 재사용할 수 있다. 이 접근 법은 매우 빠르지만 TBitmap을 먼저 그리지 않고 캔버스에 그린다면 여전히 번쩍임이 나타날 것이다. 이러한 경우 컨트롤의 OnPaint 이벤트를 사용할 필요가 없다.

다음은 커스텀 컨트롤에 대한 예제이다:

`

pascal
uses
     Classes, SysUtils, Controls, Graphics, LCLType;
    
    type
      TMyDrawingControl = class(TCustomControl)
      public
        procedure EraseBackground(DC: HDC); override;
        procedure Paint; override;
      end;
    
    implementation
    
    procedure TMyDrawingControl.EraseBackground(DC: HDC);
    begin
      // 디폴트 배경 지우기를 가능하게 하려면 다음의 코멘트를 지워라
      //inherited EraseBackground(DC);
    end; 
    
    procedure TMyDrawingControl.Paint;
    var
      x, y: Integer;
      Bitmap: TBitmap;
    begin
      Bitmap:= TBitmap.Create;
      try
        // Bitmap 크기 초기화
        Bitmap.Height:= Height;
        Bitmap.Width:= Width;
     
        // 배경 그리기
        Bitmap.Canvas.Pen.Color:= clWhite;
        Bitmap.Canvas.Rectangle(0, 0, Width, Height);
    
        // 사각형 그리기
        Bitmap.Canvas.Pen.Color:= clBlack;
        for x:= 1 to 8 do
         for y:= 1 to 8 do
          Bitmap.Canvas.Rectangle(Round((x - 1) * Width / 8), Round((y - 1) * Height / 8),
           Round(x * Width / 8), Round(y * Height / 8));
          
        Canvas.Draw(0, 0, Bitmap);
      finally
        Bitmap.Free;
      end;
    
      inherited Paint;
    end;
pascal

``

    : 

` `

`

procedure TMyForm.FormCreate(Sender: TObject); begin MyDrawingControl:= TMyDrawingControl.Create(Self); MyDrawingControl.Height := 400; MyDrawingControl.Width := 500; MyDrawingControl.Top := 0; MyDrawingControl.Left := 0; MyDrawingControl.Parent := Self; MyDrawingControl.DoubleBuffered := True; end;

pascal

``

해제하는 것을 잊으면 안된다:

`

pascal
procedure TMyForm.FormDestroy(Sender: TObject);
    begin
      MyDrawingControl.Free;
    end;
pascal

``

    , Top Left 0   ,        . 

"MyDrawingControl.Parent := Self;"           . 

"MyDrawingControl.DoubleBuffered := True;"    . gtk  . 

### A.J. Venter  

         , ,    .     ,            .   ,A.J. Venter gamepack   .            -          .  subversion:  
    . 

` svn co <svn://silentcoder.co.za/lazarus/gamepack> ` 추가적인 정보와 문서 그리고 다운로드는 [홈페이지](<http://outkastsolutions.co.za/outkast/index.php?option=com_openwiki&Itemid=&id=gamepack>)에서 구할 수 있다. 

##  

         . 

  |    |    
---|---|---  
(cur) | TCursor | Graphics   
(bmp) | TBitmap | Graphics   
  (ico) | TIcon | Graphics   
Mac OS X (icns) | TicnsIcon | Graphics   
Pixmap (xpm) | TPixmap | Graphics   
Portable Network Graphic (png) | TPortableNetworkGraphic | Graphics   
JPEG (jpg, jpeg) | TJpegImage | Graphics   
PNM (pnm) | TPortableAnyMapGraphic | Graphics   
  
[[fcl-image|fcl-image  ]]  . 

###  

        .        TBitmap  .   TBitmap   . 

Bitmap PNG    :

procedure SaveToPng(const bmp: TBitmap; PngFileName: String); var png : TPortableNetworkGraphic; begin png := TPortableNetworkGraphic.Create; try png.Assign(bmp); png.SaveToFile(PngFileName); finally png.Free; end; end;

pascal

##  

### TColor

LCL TColor     XXBBGGRR      AARRGGBB     . XX   fixed     XX 00 ,    .      . 

 RGB  TColor    :

RGBToColor(RedVal, GreenVal, BlueVal);

pascal

TColor     Red, Green  Blue  :

RedVal := Red(MyColor); GreenVal := Green(MyColor); BlueVal := Blue(MyColor);

pascal

### TFPColor

TFPColor    AARRGGBB  . 

## LCL  

LCL    .             .   FPImage( fcl-image)   ,        .  LCL  FPImage  (winapi, gtk, carbon, ...)     . 

 200x100         .png     :

program fontdraw;

pascal
{$mode objfpc}{$H+}
pascal
uses
  Classes, SysUtils, FPimage, FPImgCanv, ftfont, FPWritePNG, FPCanvas;
pascal
procedure TestFPImgFont;
var
  Img: TFPMemoryImage;
  Writer: TFPWriterPNG;
  ms: TMemoryStream;
  ImgCanvas: TFPImageCanvas;
  fs: TFileStream;
  AFont: TFreeTypeFont;
begin
  Img:=nil;
  ImgCanvas:=nil;
  Writer:=nil;
  ms:=nil;
  fs:=nil;
  AFont:=nil;
  try
    // 프리타입 폰트 매니저 초기화
    ftfont.InitEngine;
    FontMgr.SearchPath:='/usr/share/fonts/truetype/ttf-dejavu/';
    AFont:=TFreeTypeFont.Create;
pascal
// 폭 200, 높이 100의 이미지 생성
Img:=TFPMemoryImage.Create(200,100);
Img.UsePalette:=false;
// 드로잉 동작을 통해 캔버스 생성
ImgCanvas:=TFPImageCanvas.create(Img);
pascal
// 하얀 배경 칠함
ImgCanvas.Brush.FPColor:=colWhite;
ImgCanvas.Brush.Style:=bsSolid;
ImgCanvas.Rectangle(0,0,Img.Width,Img.Height);
pascal
// 텍스트 그리기
ImgCanvas.Font:=AFont;
ImgCanvas.Font.Name:='DejaVuSans';
ImgCanvas.Font.Size:=20;
ImgCanvas.TextOut(10,30,'Test');
pascal
// 메모리 스트림에 png로 이미지 쓰기
Writer:=TFPWriterPNG.create;
ms:=TMemoryStream.Create;
writer.ImageWrite(ms,Img);
// 메모리 스트림을 파일에 쓰기
ms.Position:=0;
fs:=TFileStream.Create('testfont.png',fmCreate);
fs.CopyFrom(ms,ms.Size);
pascal
finally
  AFont.Free;
  ms.Free;
  Writer.Free;
  ImgCanvas.Free;
  Img.Free;
  fs.Free;
end;
pascal
end;
pascal
begin
  TestFPImgFont;
end.
pascal

  * [[Free Pascal Tutorial| ]] \- [Tao Yue's](<http://www.taoyue.com/>) [Pascal Tutorial](<http://www.taoyue.com/tutorials/pascal/>)
  * [[Free Pascal videos|Free Pascal video tutorials]]

---
*From the Free Pascal wiki, page "Developing with Graphics/ko", as the Internet Archive kept it on 2025-02-19, last changed on 2020-02-09. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*