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

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

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


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

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

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

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

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

Delphi の場合:

MyLayout: TTextLayout;
PathAnimation1: TPathAnimation;

C++ の場合:

// ヘッダー ファイル
TPathAnimation *PathAnimation1;
TTextLayout *MyLayout;
  1. 次のコードを TFormOnCreate イベント ハンドラに追加します。

Delphi の場合:

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

C++ の場合:

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

Delphi の場合:

procedure TForm1.Image1Paint(Sender: TObject; Canvas: TCanvas;
  const ARect: TRectF);
var
  WPosition: Integer;
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;
  WPosition := MyLayout.PositionAtPoint(TPointF.Create(159, 120));
  MyLayout.AddAttribute(TTextRange.Create(WPosition, 3),
    TTextAttribute.Create(TFont.Create, TAlphaColorRec.Black));
  MyLayout.EndUpdate;
  MyLayout.RenderLayout(Canvas);
end;

C++ の場合:

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

{
	int WPosition;
	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;
	WPosition = MyLayout->PositionAtPoint(TPointF(159, 120));
	MyLayout->AddAttribute(TTextRange(WPosition, 3),
		TTextAttribute(font, TAlphaColorRec::Black));
	MyLayout->EndUpdate();
	MyLayout->RenderLayout(Canvas);
}
  • 実行した結果は次のようになります。
TextLayout Render.png
3. 次のコードをTButtonOnClick イベント ハンドラに追加し、テキストをパスに変換したりアニメーションを開始できるようにします。

Delphi の場合:

procedure TForm1.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 TForm1.Button2Click(Sender: TObject);
begin
  PathAnimation1.Start;
end;

C++ の場合:

void __fastcall TForm1::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 TForm1::Button2Click(TObject *Sender) {
	PathAnimation1->Start();
}
  • 実行した結果は次のようになります。
TextLayout Animation.gif
4. 次のコードを TButtonOnClick イベント ハンドラに追加し、RegionForRange を呼び出します。

Delphi の場合:

procedure TForm1.Button3Click(Sender: TObject);
var
  MyRects: TRegion;
begin
  MyRects := MyLayout.RegionForRange(TTextRange.Create(1, 1));
  Image1.Bitmap.Canvas.BeginScene;
  Image1.Bitmap.Canvas.DrawRect(MyRects[0], 0, 0, AllCorners, 100);
  Image1.Bitmap.Canvas.EndScene;
end;

C++ の場合:

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

使用する API

関連項目