FireMonkey テキスト レイアウト機能の使用

提供: RAD Studio
移動先: 案内、 検索

FireMonkey のテキスト レイアウト への移動


ここでは、FireMonkey で提供されているテキスト レイアウト機能の使い方を例を使って示します。 この例には、TImage オブジェクト上にテキストを描画する方法と、PositionAtPoint、RegionForRange、ConvertToPath の各メソッドの使い方を示すコードが含まれています。

空のマルチデバイス アプリケーションの作成

  1. 新しい空のマルチデバイス アプリケーションを作成します。
  2. ［ツール パレット］から以下のコンポーネントをフォームに追加します。
  3. ［オブジェクト インスペクタ］で、TForm の OnCreate イベント、TImage の OnPaint イベント、各 TButton の OnClick イベントについて、それぞれイベント ハンドラを作成します。
  • 設計した結果は次のようになります。

TextLayout Design Time II.png

メモ: 次のサンプルをレプリケートするには、TImage で背景色を追加することを覚えておいてください。

テキスト レイアウトを使用するコードの追加

  1. 次の宣言を追加します。

Delphi の場合： 

MyLayout: TTextLayout;
PathAnimation1: TPathAnimation;

C++ の場合： 

//header file
TPathAnimation *PathAnimation1;
TTextLayout *MyLayout;
  1. 次のコードを TForm の OnCreate イベント ハンドラに追加します。

Delphi の場合： 

procedure TForm3.FormCreate(Sender: TObject);
begin
  RadioButton1.Position.X := Image1.Position.X - 5;
  RadioButton1.Position.Y := Image1.Position.Y - 5;
  RadioButton1.Text := '';
end;

C++ の場合： 

void __fastcall TForm3::FromCreate(TObject *Sender)
{
	RadioButton1->Position->X = Image1->Position->X - 5;
	RadioButton1->Position->Y = Image1->Position->Y - 5;
	RadioButton1->Text = "";
}
2. 次のコードを TImage の OnPaint イベント ハンドラに追加します。

Delphi の場合： 

procedure TForm3.Image1Paint(Sender: TObject; Canvas: TCanvas;
  const ARect: TRectF);

begin
  MyLayout := TTextLayoutManager.DefaultTextLayout.Create;
  MyLayout.BeginUpdate;
  MyLayout.TopLeft := TPointF.Create(0, 0);
  MyLayout.Font.Size := 78;
  MyLayout.Font.Family := 'Tahoma';
  MyLayout.Font.Style := [TFontStyle.fsBold];
  MyLayout.Text := 'TEXT';
  MyLayout.Color := TAlphaColorRec.Brown;
  MyLayout.RenderLayout(Canvas);
end;

C++ の場合： 

void __fastcall TForm3::Image1Paint(TObject *Sender, TCanvas *Canvas, const TRectF &ARect)

{
	Fmx::Graphics::TFont *font;
	MyLayout = TTextLayoutManager::TextLayoutForClass
		(TTextLayoutManager::DefaultTextLayout);
	MyLayout->BeginUpdate();
	MyLayout->TopLeft = TPointF(0, 0);
	MyLayout->Font->Size = 78;
	MyLayout->Font->Family = "Tahoma";
	MyLayout->Font->Style = TFontStyles(1);
	MyLayout->Text = "TEXT";
	MyLayout->Color = TAlphaColorRec::Brown;
	
}
  • 実行した結果は次のようになります。
TextLayout Render II.png
3. 次のコードをTButton の OnClick イベント ハンドラに追加し、テキストをパスに変換したりアニメーションを開始できるようにします。

Delphi の場合： 

procedure TForm3.Button1Click(Sender: TObject);
var
  PathD: TPathData;
begin
  PathAnimation1 := TPathAnimation.Create(Self);
  PathAnimation1.Parent := RadioButton1;
  PathD := TPathData.Create();
  MyLayout.ConvertToPath(PathD);
  PathAnimation1.Path := PathD;
  PathAnimation1.Loop := True;
  PathAnimation1.Duration := 50;
end;

procedure TForm3.Button2Click(Sender: TObject);
begin
  PathAnimation1.Start;
end;

C++ の場合： 

void __fastcall TForm3::Button1Click(TObject *Sender)
{
	TPathData *PathD;
	PathAnimation1 = new TPathAnimation(this);
	PathAnimation1->Parent = RadioButton1;
	PathD = new TPathData();
	MyLayout->ConvertToPath(PathD);
	PathAnimation1->Path = PathD;
	PathAnimation1->Loop = true;
	PathAnimation1->Duration = 50;
}

void __fastcall TForm3::Button2Click(TObject *Sender)
{
	PathAnimation1->Start();
}
  • 実行した結果は次のようになります。
Link=


4. 次のコードを TButton の OnClick イベント ハンドラに追加し、RegionForRange を呼び出します。

Delphi の場合： 

procedure TForm3.Button3Click(Sender: TObject);
var
  MyRects: TRegion;
begin

  MyRects := MyLayout.RegionForRange(TTextRange.Create(1, 1));
  if Image1.Bitmap.Canvas.BeginScene then
  begin
    try
      Image1.Bitmap.Canvas.DrawRect(MyRects[0], 0, 0, AllCorners, 100);
    finally
      Image1.Bitmap.Canvas.EndScene;
    end;
  end;
end;

C++ の場合： 

void __fastcall TForm3::Button3Click(TObject *Sender)
{
	TRegion MyRects;
	MyRects = MyLayout->RegionForRange(TTextRange(1, 1));
	if (Image1->Bitmap->Canvas->BeginScene())
	{
	   try {
			Image1->Bitmap->Canvas->DrawRect(MyRects[0], 0, 0, AllCorners, 100);
	   } __finally  {
			Image1->Bitmap->Canvas->EndScene();
	   }
	}
}
  • 実行した結果は次のようになります。
Link=

使用する API

関連項目

「http://docwiki.embarcadero.com/RADStudio/Alexandria/j/index.php?title=FireMonkey_テキスト_レイアウト機能の使用&oldid=252950」から取得