Sign in Join
Wiki copytemporary

Developing with Graphics/ja: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: Developing with Graphics/ja

OldNewLine
1+このページは、どのようにビットマップや、その他のグラフィックスを扱うかのチュートリアルの最初のページになるでしょう。 私はグラフィクスに携わっていないので、専門的な経験を披露してくれる皆さんを招待します。 次の項目にリンクやページを追加して、Wikiを製作してください。
2+
3+このページで、一般的なお知らせをすることがあります。
4+
5+## その他のグラフィックス
6+
7+- [[GLScene/ja]] - OpenGL ライブラリの移植 [GLScene](http://www.glscene.org)
8+- [[TAChart/ja]] - Lazarus用のチャートコンポーネント
9+- [[PascalMagick/ja]] - インターフェース用の簡単なAPI　[ImageMagick](http://www.imagemagick.org),マルチプラットホームでのビットマップを扱うフリーソフトウエア
10+- [[PlotPanel/ja]] - アニメーショングラフのためのチャートや描画コンポーネント
11+
12+## TBitmapの作業
13+
14+まず覚えていただきたいことは、Lazarusはプラットホームに対して独立しているということです。 ですから、WindowsAPIの機能を使うメソッドは言うまでもなく、つかわないでください。 たとえば、Scanlineのようなメソッドは、Lazarusではサポートしません。 なぜなら、ScanlineはDevice Independant Bitmap(DIB)を扱い、結局GDI32.dllを使うことになるから（プラットホーム独立ではなくなるから）です。
15+
16+[[doc:lcl/graphics/tbitmap.html|TBitmapにwidth]],heightを特定しないなら、デフォルトはかなり小さいものになっているので、気をつけてください。
17+
18+### フェーディングの例
19+
20+フェーディングするピクチャを作る場合、Delphiでは、このように書けます。
21+
22+<code>
23+
24+`type`\
25+`  PRGBTripleArray = ^TRGBTripleArray;`\
26+`  TRGBTripleArray = array[0..32767] of TRGBTriple;`\
27+\
28+`procedure TForm1.FadeIn(aBitMap: TBitMap);`\
29+`var`\
30+`  Bitmap, BaseBitmap: TBitmap;`\
31+`  Row, BaseRow: PRGBTripleArray;`\
32+`  x, y, step: integer;`\
33+`begin`\
34+`  Bitmap := TBitmap.Create;`\
35+`  try`\
36+`    Bitmap.PixelFormat := pf32bit;  //  or pf24bit`\
37+`    Bitmap.Assign(aBitMap);`\
38+`    BaseBitmap := TBitmap.Create;`\
39+`    try`\
40+`      BaseBitmap.PixelFormat := pf32bit;`\
41+`      BaseBitmap.Assign(Bitmap);`\
42+`      for step := 0 to 32 do begin`\
43+`        for y := 0 to (Bitmap.Height - 1) do begin`\
44+`          BaseRow := BaseBitmap.Scanline[y];`\
45+`          Row := Bitmap.Scanline[y];`\
46+`          for x := 0 to (Bitmap.Width - 1) do begin`\
47+`            Row[x].rgbtRed := (step * BaseRow[x].rgbtRed) shr 5;`\
48+`            Row[x].rgbtGreen := (step * BaseRow[x].rgbtGreen) shr 5; // Fading`\
49+`            Row[x].rgbtBlue := (step * BaseRow[x].rgbtBlue) shr 5;`\
50+`          end;`\
51+`        end;`\
52+`        Form1.Canvas.Draw(0, 0, Bitmap);`\
53+`        InvalidateRect(Form1.Handle, nil, False);`\
54+`        RedrawWindow(Form1.Handle, nil, 0, RDW_UPDATENOW);`\
55+`      end;`\
56+`    finally`\
57+`      BaseBitmap.Free;`\
58+`    end;`\
59+`  finally`\
60+`    Bitmap.Free;`\
61+`  end;`\
62+`end;`
63+
64+</code>
65+
66+上の関数は、Lazarusでは、このように実装します：
67+
68+<code>
69+
70+`procedure TForm1.FadeIn(ABitMap: TBitMap);`\
71+`var`\
72+`  SrcIntfImg, TempIntfImg: TLazIntfImage;`\
73+`  ImgHandle,ImgMaskHandle: HBitmap;`\
74+`  FadeStep: Integer;`\
75+`  px, py: Integer;`\
76+`  CurColor: TFPColor;`\
77+`  TempBitmap: TBitmap;`\
78+`begin`\
79+`  SrcIntfImg:=TLazIntfImage.Create(0,0);`\
80+`  SrcIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);`\
81+`  TempIntfImg:=TLazIntfImage.Create(0,0);`\
82+`  TempIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);`\
83+`  TempBitmap:=TBitmap.Create;`\
84+`  for FadeStep:=1 to 32 do begin`\
85+`    for py:=0 to SrcIntfImg.Height-1 do begin`\
86+`      for px:=0 to SrcIntfImg.Width-1 do begin`\
87+`        CurColor:=SrcIntfImg.Colors[px,py];`\
88+`        CurColor.Red:=(CurColor.Red*FadeStep) shr 5;`\
89+`        CurColor.Green:=(CurColor.Green*FadeStep) shr 5;`\
90+`        CurColor.Blue:=(CurColor.Blue*FadeStep) shr 5;`\
91+`        TempIntfImg.Colors[px,py]:=CurColor;`\
92+`      end;`\
93+`    end;`\
94+`    TempIntfImg.CreateBitmap(ImgHandle,ImgMaskHandle,false);`\
95+`    TempBitmap.Handle:=ImgHandle;`\
96+`    TempBitmap.MaskHandle:=ImgMaskHandle;`\
97+`    Canvas.Draw(0,0,TempBitmap);`\
98+`  end;`\
99+`  SrcIntfImg.Free;`\
100+`  TempIntfImg.Free;`\
101+`  TempBitmap.Free;`\
102+`end;`
103+
104+</code>
105+
106+このページのLazarusのコードは、　\$LazarusPath/examples/lazintfimage/fadein1.lpi のプロジェクトから取ってきたものです。 もし、あなたが画像処理プログラムで早いスタートをしたいなら、この例を良く読みましょう。
107+
108+### 色（が）透明なビットマップを描く
109+
110+Lazarus 0.9.11で実装された新しい機能で、色透明ビットマップを描画することができます。 ビットマップファイル(*.BMP)は、透明性のどんな情報を持つことができません。しかし、ビットマップ上のある色を透明色と選択すれば、色透明ビットマップにすることができます。これは、Win32アプリケーションでよくつかわれてきたトリックです。
111+
112+次のサンプルはWindowsのリソースからビットマップをロードし、透明となる色(clFuchsia)を指定し、canvasに描画します。
113+
114+ procedure MyForm.MyButtonOnClick(Sender: TObject);
115+ var
116+ buffer: THandle;
117+ bmp: TBitmap;
118+ memstream: TMemoryStream;
119+ begin
120+ bmp := TBitmap.Create;
121+
122+ buffer := Windows.LoadBitmap(hInstance, MAKEINTRESOURCE(ResourceID));
123+
124+ if (buffer = 0) then exit; // Error loading the bitmap
125+
126+ bmp.Handle := buffer;
127+ memstream := TMemoryStream.create;
128+ try
129+ bmp.SaveToStream(memstream);
130+ memstream.position := 0;
131+ bmp.LoadFromStream(memstream);
132+ finally
133+ memstream.free;
134+ end;
135+
136+ bmp.Transparent := True;
137+ bmp.TransparentColor := clFuchsia;
138+
139+ MyCanvas.Draw(0, 0, bmp);
140+
141+ bmp.Free; // Release allocated resource
142+ end;
143+
144+[[doc:rtl/classes/tmemorystream.html|TMemoryStreamでメモリ]]操作を行っていることに注意してください。 それらは、読み込んだイメージを確実に操作するのに必要です。
145+
146+## 動きのあるグラフィックス - チラツキを防止する方法
147+
148+多くのプログラムが、2D画像としてGUIを描画します。 それらの画像は、高速に変更する必要がある場合、すぐ次のような問題に直面します。高速に更新する画像は、しばしばスクリーン上でチラツキをおこします。 時々、全体的なイメージをユーザーが見ている時、ほんの一部分だけ描画される時、発生します。 それは、描画の作業に時間がかかるのでおこります。
149+
150+しかし、どのようにしたらチラツキを防止し、最善の描画速度を得ることができるのでしょうか。もちろん、OpenGLを使ったハードウエアアクセラレーションを使うこともできます。しかし、この方法は小さなプログラムや古いコンピュータには、大変重いものです。 このチュートリアルでは、TCanvasに描画する方法に焦点をしぼります。 もし、OpenGLの助けが必要であれば、Lazarusについてくるサンプルを見てください。ほかにも、ダブルバッファをサポートしたcanvasや、スプライトコンポーネントのあるA.J.Venterのgamepackを使うこともできます。
151+
152+それでは、Canvasに描画するオプションを調べてみましょう。
153+
154+- Draw to a TImage
155+- Draw on the OnPaint event of the form, a TPaintBox or another control
156+- Create a custom control which draws itself
157+- Using A.J. Venter's gamepack
158+
159+### TImageに描画する
160+
161+TImageに描画するのにOnPaintイベントを使ってはいけません。 TImageはバッファされていますので、あなたが一度描画したり変更しさえすれば、TImageはずっとそのイメージを持続します。 しかし、コンスタントに再描画をおこなえば、チラツキが発生するでしょう。 この場合に、他の方法を試します。 TImageに描画することは、ほかの方法よりも遅いのです。
162+
163+<code>
164+
165+`procedure TForm1.BitBtn1Click(Sender: TObject);`\
166+`var`\
167+`  x, y: Integer;`\
168+`begin`\
169+`  // Draws the backgroung`\
170+`  MyImage.Canvas.Pen.Color := clWhite;`\
171+`  MyImage.Canvas.Rectangle(0, 0, Image.Width, Image.Height);`\
172+`  `\
173+`  // Draws squares`\
174+`  MyImage.Canvas.Pen.Color := clBlack;`\
175+`  for x := 1 to 8 do`\
176+`   for y := 1 to 8 do`\
177+`    MyImage.Canvas.Rectangle(Round((x - 1) * Image.Width / 8), Round((y - 1) * Image.Height / 8),`\
178+`       Round(x * Image.Width / 8), Round(y * Image.Height / 8));`\
179+`end;`
180+
181+</code>
182+
183+### OnPaintイベントで描画する
184+
185+この場合、フォームのOnPaintイベントで、すべての描画が終了しなければなりません。この方法ではTImageのように、バッファには残りません。
186+
187+### 自分自身を描画するカスタムコントロールを作成する
188+
189+カスタムコントロールを作成することは、あなたのコードを構造化し、そのコントロールを再利用できる、という利点があります。 この方法はとても高速ですが、まず、TBitmapに描画して、canvasにそれを転送しなければ、チラツキを発生することがあります。この方法では、コントロールのOnPaintイベントを必要としません。
190+
191+カスタムコントロールの例：
192+
193+<code>
194+
195+`type`\
196+`  TMyDrawingControl = class(TCustomControl)`\
197+`  public`\
198+`    procedure Paint; override;`\
199+`  end;`\
200+\
201+`implementation`\
202+\
203+`procedure TMyDrawingControl.Paint;`\
204+`var`\
205+`  x, y: Integer;`\
206+`  Bitmap: TBitmap;`\
207+`begin`\
208+`  Bitmap := TBitmap.Create;`\
209+`  try`\
210+`    // Initializes the Bitmap Size`\
211+`    Bitmap.Height := Height;`\
212+`    Bitmap.Width := Width;`\
213+` `\
214+`    // Draws the background`\
215+`    Bitmap.Canvas.Pen.Color := clWhite;`\
216+`    Bitmap.Canvas.Rectangle(0, 0, Width, Height);`\
217+\
218+`    // Draws squares`\
219+`    Bitmap.Canvas.Pen.Color := clBlack;`\
220+`    for x := 1 to 8 do`\
221+`     for y := 1 to 8 do`\
222+`      Bitmap.Canvas.Rectangle(Round((x - 1) * Width / 8), Round((y - 1) * Height / 8),`\
223+`       Round(x * Width / 8), Round(y * Height / 8));`\
224+`      `\
225+`    Canvas.Draw(0, 0, Bitmap);`\
226+`  finally`\
227+`    Bitmap.Free;`\
228+`  end;`\
229+\
230+`  inherited Paint;`\
231+`end;`
232+
233+</code>
234+
235+フォーム上で生成する方法は次のとおりです: <code>
236+
237+`procedure TMyForm.FormCreate(Sender: TObject);`\
238+`begin`\
239+`  MyDrawingControl:= TMyDrawingControl.Create(Self);`\
240+`  MyDrawingControl.Height := 400;`\
241+`  MyDrawingControl.Width := 500;`\
242+`  MyDrawingControl.Top := 0;`\
243+`  MyDrawingControl.Left := 0;`\
244+`  MyDrawingControl.Parent := Self;`\
245+`  MyDrawingControl.DoubleBuffered := True;`\
246+`end;`
247+
248+</code>
249+
250+destroyを忘れてはいけない。 （訳注： CreateでFormのSelfを指定しているから、いらないのでは？） just don´t forget to destroy it: <code>
251+
252+`procedure TMyForm.FormDestroy(Sender: TObject);`\
253+`begin`\
254+`  MyDrawingControl.Free;`\
255+`end;`
256+
257+</code>
258+
259+TopとLeftは、0が標準の位置なので、かならずしも設定する必要はありません。 しかし、これは、コントロールが置かれる位置を再設定します。
260+
261+"MyDrawingControl.Parent := Self;"は、とても重要です。これを書かなくては、コントロールが表示されません。
262+
263+"MyDrawingControl.DoubleBuffered := True;" は、Windows上でチラツキを防止するためのものです。gtk上では何の効果もありません。 (訳注：gtk上では、効果がないのか、そもそも、DoubleBufferdを指定する必要がないのか？どっちだろう。）
264+
265+### A.J.Venterのgamepackを使う
266+
267+gamepackによる方法は、すべてのものを、１つのダブルバッファされたcanvasに描画してしまおう、というものです。あなたが更新を準備できた時点で、、見えるcanvasの変更をおこなうことができます。多少コードを必要としますが、多くのスプライトをもつ"シーン"を、大幅に高速に描画更新できる、という利点があります。もし、このアプローチを使いたくなったら、Lazarusのゲーム開発コンポーネントセットであるA.J.Venterのgamepackに興味をもったでしょう。gamepackは、スプライト同様にダブルバッファを表示するエリアを提供してくれますし、ひとつひとつが、大変上手く統合されています。 gamepackはsubversionを通して得ることができます。\
268+`svn co `[`svn://silentcoder.co.za/lazarus/gamepack`](svn://silentcoder.co.za/lazarus/gamepack)
269+
270+`svn co `[`svn://silentcoder.co.za/lazarus/gamepack`](svn://silentcoder.co.za/lazarus/gamepack)
271+
272+---
273+*From the Free Pascal wiki, page "Developing with Graphics/ja", as it stood on 2008-03-31 after a change by Saeka-jp, out of the wiki's dump of 2024-05-26. 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).*

Back to history