Delphiでお手軽プログラミング

Delphiでお手軽プログラミングメニュー

DelphiのCanvasを使ってBitmap画像に色を塗ったり線を引いたりテキストを出力したりする

~ VCL 及び FMX


ソースコード

VCLの場合

「ファイル」⇒「新規作成」⇒「Windows VCLアプリケーション」をクリック
 
 
フォームにTImageとTButtonをドラッグ&ドロップする

Button1をダブルクリックして以下ソースコードを入力する
unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils,
  System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls,
  Vcl.ExtCtrls;

type
  TForm1 = class(TForm)
    Image1: TImage;
    Button1: TButton;
    procedure Button1Click(Sender: TObject);
  private
    { Private 宣言 }
  public
    { Public 宣言 }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.Button1Click(Sender: TObject); var r:TRect; text:String; begin //■■■ Image1の初期設定 ■■■ //Image1の幅高さ設定 Image1.Width:=200; Image1.Height:=200; //TImageが内部保持画像データ(TBitmap)の幅高さ設定 Image1.Picture.Bitmap.Width:=100; Image1.Picture.Bitmap.Height:=100; //RGB(24bit色)に設定する Image1.Picture.Bitmap.PixelFormat:=TPixelFormat.pf24bit; //表示時に画像データの縦横比を保持するよう設定 Image1.Proportional:=True; //TImageのサイズに画像を拡大又は縮小表示するように設定 //つまり、100×100の画像を200×200に引き延ばして表示する Image1.Stretch:=True;
//■■■ 塗りつぶし ■■■ Image1.Picture.Bitmap.Canvas.Brush.Color:=$00ff00;//緑 Image1.Picture.Bitmap.Canvas.Brush.Style:=TBrushStyle.bsSolid; //塗りつぶす(0,0)-(100-1,100-1)の領域 Image1.Picture.Bitmap.Canvas.FillRect( Rect(0,0,100,100) );
//■■■ 線を描画する ■■■ //線(ペン)の設定 Image1.Picture.Bitmap.Canvas.Pen.Width:=1; Image1.Picture.Bitmap.Canvas.Pen.Style:=TPenStyle.psSolid; Image1.Picture.Bitmap.Canvas.Pen.Color:=$ff0000;//青色 //(0,0)-(100-1,100-1)に線を引き、ペンを100,100の位置に移動 Image1.Picture.Bitmap.Canvas.MoveTo(0,0); Image1.Picture.Bitmap.Canvas.LineTo(100,100);
//■■■ 文字を描画する ■■■ //色、スタイル設定 Image1.Picture.Bitmap.Canvas.Font.Color:=$0000ff;//赤色 Image1.Picture.Bitmap.Canvas.Brush.Style:=TBrushStyle.bsSolid; //フォントサイズのピクセル単位で設定 Image1.Picture.Bitmap.Canvas.Font.Height:=10; //10ピクセル //太字設定 Image1.Picture.Bitmap.Canvas.Font.Style:=[TFontStyle.fsBold]; //フォント名設定 Image1.Picture.Bitmap.Canvas.Font.Name:='MS Pゴシック'; //文字の出力 text:='出力しますが自動改行でクリッピングします'; r:=Rect(0,20,50,60);//出力範囲 Image1.Picture.Bitmap.Canvas.TextRect( r, text, [ TTextFormats.tfLeft,TTextFormats.tfTop, TTextFormats.tfWordBreak ] );
end; end.

実行

実行して、Button1をクリック

FMXの場合

「ファイル」⇒「新規作成」⇒「マルチデバイスアプリケーション」をクリック
「空のアプリケーション」をクリック
 
フォームにTImageとTButtonをドラッグ&ドロップする

Button1をダブルクリックして以下ソースコードを入力する
unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes,
  System.Classes, System.Variants,FMX.Types, FMX.Controls,
  FMX.Forms, FMX.Graphics, FMX.Controls.Presentation,
  FMX.StdCtrls, FMX.Objects;

type
  TForm1 = class(TForm)
    Image1: TImage;
    Button1: TButton;
    procedure Button1Click(Sender: TObject);
  private
    { private 宣言 }
  public
    { public 宣言 }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.Button1Click(Sender: TObject); begin //■■■ Image1の初期設定 ■■■ //Image1の幅高さ設定 Image1.Width:=200; Image1.Height:=200; //TImageが内部で保持している画像データ(TBitmap)の幅高さ設定 Image1.Bitmap.Width:=100; Image1.Bitmap.Height:=100; //FMXではBGR(24bit色)に出来ない BGRA固定と思われる // 不可Image1.Bitmap.PixelFormat:=TPixelFormat.BGR; //表示時に画像の縦横比を保持するよう設定 //TImageのサイズに画像データを拡大又は縮小表示するように設定 //つまり、100×100の画像を200×200に引き延ばして表示する Image1.WrapMode:=TImageWrapMode.Fit; //描画前に呼び出す Image1.Bitmap.Canvas.BeginScene();
//■■■ 塗りつぶし ■■■ Image1.Bitmap.Canvas.Fill.Color:=$ff00ff00;//緑 Image1.Bitmap.Canvas.Fill.Kind:=TBrushKind.Solid; //塗りつぶす(0,0)-(99,99)の領域 Image1.Bitmap.Canvas.FillRect( RectF(0,0,99,99),0,0,[],1 );
//■■■ 線を描画する ■■■ //線(ペン)の設定 Image1.Bitmap.Canvas.Stroke.Thickness:=1; Image1.Bitmap.Canvas.Stroke.Dash:=TStrokeDash.Solid; Image1.Bitmap.Canvas.Stroke.Color:=$ff0000ff;//青色 //(0,0)-(99,99)に線を引く Image1.Bitmap.Canvas.DrawLine(PointF(0,0),PointF(99,99),1);
//■■■ 文字を描画する ■■■ //色、スタイル設定 Image1.Bitmap.Canvas.Fill.Color:=$ffff0000;//赤色 Image1.Bitmap.Canvas.Fill.Kind:=TBrushKind.Solid; //フォントサイズのピクセル単位で設定 {$IFDEF MSWINDOWS} //MS-Windowsの場合は÷72×96が必要 Image1.Bitmap.Canvas.Font.Size:= Image1.Bitmap.Canvas.Font.Size/ Image1.Bitmap.Canvas.TextHeight('M')/72*96* 10;//10ピクセル {$ELSE} Image1.Bitmap.Canvas.Font.Size:= Image1.Bitmap.Canvas.Font.Size/ Image1.Bitmap.Canvas.TextHeight('M')* 10;//10ピクセル {$ENDIF} //太字設定 Image1.Bitmap.Canvas.Font.Style:=[TFontStyle.fsBold]; //フォント名設定 Image1.Bitmap.Canvas.Font.Family:='MS Pゴシック'; //文字の出力 Image1.Bitmap.Canvas.FillText( RectF(0,20,50,60), '出力しますが自動改行でクリッピングします',true,1,[], TTextAlign.Leading,TTextAlign.Leading );
//描画処理の終了 Image1.Bitmap.canvas.EndScene(); end; end.

実行

実行して、Button1をクリック

Copyright 2021 Mam