# 画面設計書 77-GlyphRun

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるGlyphRun（グリフラン描画）ページの画面設計を定義するものです。このページは、Avaloniaフレームワークが提供する低レベルテキストレンダリング機能であるGlyphRunと、そこから生成されるジオメトリの両方を視覚的にデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：GlyphRunは、テキスト描画の最も低レベルなAPIであり、高度なテキストエフェクト（アウトライン、変形、カスタムレンダリング等）を実現するために使用されます。TextBlockやFormattedTextでは実現できない表現が可能です。本画面は、GlyphRunを使用した直接テキスト描画と、GlyphRunからジオメトリを生成してFillするアプローチの両方を開発者が学習できるようにすることを目的としています。

**画面へのアクセス方法**：RenderDemoアプリケーションを起動後、左側のHamburgerMenuから「GlyphRun」タブを選択することでアクセスできます。

**主要な操作・処理内容**：
1. 画面を左右に2分割して表示
2. 左側：GlyphRunControlでDrawGlyphRunを使用した直接テキスト描画
3. 右側：GlyphRunGeometryControlでBuildGeometryを使用したジオメトリ描画
4. 両方とも1秒ごとにランダムな大文字アルファベットを表示
5. フォントサイズは20〜200の間でアニメーション（+10/-10を繰り返し）

**画面遷移**：
- 遷移元：RenderDemo MainWindow（HamburgerMenuより選択）
- 遷移先：なし（デモページのため画面遷移機能は持たない）

**権限による表示制御**：本画面はデモ用途のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 82 | GlyphRun | 主機能 | GlyphRun描画のデモ。低レベルテキストレンダリング |

## 画面種別

デモ / 低レベルテキストレンダリング表示

## URL/ルーティング

本アプリケーションはデスクトップアプリケーションのため、URLルーティングは使用しません。
HamburgerMenuのタブ選択により画面切り替えが行われます。

## 入出力項目

本画面はデモ表示専用のため、ユーザー入力項目はありません。

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|-----|------|
| なし | - | - | 表示専用画面 |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| GlyphRunControl | Control | 左側領域、DrawGlyphRunでテキスト描画、黒色 |
| GlyphRunGeometryControl | Control | 右側領域、BuildGeometryでジオメトリ描画、緑色 |

## イベント仕様

### 1-ビジュアルツリーアタッチ時

コントロールがビジュアルツリーにアタッチされた際にタイマーを開始します。

**処理フロー**:
1. OnAttachedToVisualTreeが呼ばれる
2. DispatcherTimerを作成（Interval=1秒）
3. Tickイベントでinvalidatevisualを呼び出すように設定
4. タイマーを開始

### 2-ビジュアルツリーデタッチ時

コントロールがビジュアルツリーからデタッチされた際にタイマーを停止します。

**処理フロー**:
1. OnDetachedFromVisualTreeが呼ばれる
2. タイマーを停止
3. タイマー参照をnullに設定

### 3-フレーム描画時（GlyphRunControl）

1秒ごとにランダムな文字をDrawGlyphRunで描画します。

**処理フロー**:
1. Render(DrawingContext)が呼ばれる
2. ランダムな大文字アルファベット（A-Z）を生成
3. フォントサイズを更新（20〜200の範囲で+10/-10）
4. CharacterToGlyphMapでグリフインデックスを取得
5. GlyphRunオブジェクトを作成
6. context.DrawGlyphRun(Brushes.Black, glyphRun)で描画

### 4-フレーム描画時（GlyphRunGeometryControl）

1秒ごとにランダムな文字をジオメトリとして描画します。

**処理フロー**:
1. Render(DrawingContext)が呼ばれる
2. ランダムな大文字アルファベット（A-Z）を生成
3. フォントサイズを更新（20〜200の範囲で+10/-10）
4. CharacterToGlyphMapでグリフインデックスを取得
5. GlyphRunオブジェクトを作成
6. glyphRun.BuildGeometry()でジオメトリを生成
7. context.DrawGeometry(Brushes.Green, null, geometry)で描画

## データベース更新仕様

本画面はデモ表示専用のため、データベース操作は行いません。

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | データベース操作なし |

## メッセージ仕様

本画面はデモ表示専用のため、メッセージ表示機能はありません。

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|---------|
| なし | - | - | - |

## 例外処理

| 例外 | 対処 |
|------|------|
| レンダリングエラー | Avaloniaフレームワークの標準エラーハンドリングに委譲 |

## 備考

- GlyphTypeface.CharacterToGlyphMapで文字からグリフインデックスへのマッピングを取得
- GlyphRunコンストラクタは(GlyphTypeface, fontSize, characters, glyphIndices)を受け取る
- DrawGlyphRunは直接GlyphRunを描画（最も高速）
- BuildGeometry()はGlyphRunをPathGeometryに変換（変形やエフェクトに使用可能）
- 背景色は白（Grid.Background="White"）
- Typeface.Default.GlyphTypefaceでデフォルトフォントを使用

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

GlyphRunとGlyphTypefaceの関係を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | GlyphRunPage.xaml.cs | `samples/RenderDemo/Pages/GlyphRunPage.xaml.cs` | GlyphRunControlとGlyphRunGeometryControlの構造を確認 |

**読解のコツ**: GlyphRunは文字列と対応するグリフインデックス配列を持ちます。CharacterToGlyphMapを使用して文字をグリフインデックスに変換します。

#### Step 2: XAML構造を理解する

画面レイアウトを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | GlyphRunPage.xaml | `samples/RenderDemo/Pages/GlyphRunPage.xaml` | Grid構造と2つのカスタムコントロールの配置を確認 |

**主要処理フロー**:
- **行8-10**: Grid 2列構成、背景白
- **行11**: GlyphRunControlを左側に配置
- **行12**: GlyphRunGeometryControlを右側に配置

#### Step 3: GlyphRunControlの実装を理解する

直接描画アプローチを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | GlyphRunPage.xaml.cs | `samples/RenderDemo/Pages/GlyphRunPage.xaml.cs` | GlyphRunControlクラスのRenderメソッドを確認 |

**主要処理フロー**:
- **行23-80**: GlyphRunControlクラス
- **行34-47**: OnAttachedToVisualTreeでタイマー設定
- **行56-78**: Renderでランダム文字生成とDrawGlyphRun

#### Step 4: GlyphRunGeometryControlの実装を理解する

ジオメトリ変換アプローチを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | GlyphRunPage.xaml.cs | `samples/RenderDemo/Pages/GlyphRunPage.xaml.cs` | GlyphRunGeometryControlクラスのRenderメソッドを確認 |

**主要処理フロー**:
- **行82-141**: GlyphRunGeometryControlクラス
- **行137**: glyphRun.BuildGeometry()でジオメトリ生成
- **行139**: DrawGeometryで緑色塗りつぶし

### プログラム呼び出し階層図

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="GlyphRun"]
                  |
                  +-- GlyphRunPage (UserControl)
                         |
                         +-- Grid [2列, 背景白]
                                |
                                +-- GlyphRunControl [左側]
                                |      |
                                |      +-- OnAttachedToVisualTree
                                |      |      +-- DispatcherTimer(1秒)
                                |      |
                                |      +-- Render
                                |             +-- Random.Next(65,90) -> 文字
                                |             +-- CharacterToGlyphMap -> グリフ
                                |             +-- new GlyphRun(...)
                                |             +-- DrawGlyphRun(Black)
                                |
                                +-- GlyphRunGeometryControl [右側]
                                       |
                                       +-- OnAttachedToVisualTree
                                       |      +-- DispatcherTimer(1秒)
                                       |
                                       +-- Render
                                              +-- Random.Next(65,90) -> 文字
                                              +-- CharacterToGlyphMap -> グリフ
                                              +-- new GlyphRun(...)
                                              +-- BuildGeometry()
                                              +-- DrawGeometry(Green)
```

### データフロー図

```
[入力]               [処理]                    [出力]

Random(65,90)       --> char変換             --> 大文字アルファベット
                        (ASCII)

char                --> CharacterToGlyphMap --> ushort (グリフインデックス)

グリフインデックス   --> GlyphRun             --> テキストオブジェクト
+ フォントサイズ        コンストラクタ

GlyphRun            --> DrawGlyphRun         --> 直接描画（黒）
                    --> BuildGeometry        --> ジオメトリ
                        --> DrawGeometry     --> 塗りつぶし（緑）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| GlyphRunPage.xaml | `samples/RenderDemo/Pages/GlyphRunPage.xaml` | XAML | UIレイアウト（2カラム構成） |
| GlyphRunPage.xaml.cs | `samples/RenderDemo/Pages/GlyphRunPage.xaml.cs` | C# | GlyphRunControl、GlyphRunGeometryControlの実装 |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | ホスト画面（HamburgerMenuでページを管理） |
