# 画面設計書 81-Path Measurement

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるPath Measurement（パス測定）デモページの画面設計について記載します。

### 本画面の処理概要

このページは、Avaloniaフレームワークの `PathGeometry` クラスを使用したパス測定機能のデモンストレーションを行う画面です。PathGeometryが提供するContourLength（パスの総延長）の取得と、TryGetSegmentメソッドによる部分パスの抽出機能を視覚的に示します。

**業務上の目的・背景**：
開発者がAvaloniaの低レベル描画API、特にPathGeometryのパス測定機能を理解し、アニメーションパスの進捗表示、パス上の特定位置への要素配置、パスの部分的なハイライト表示など、高度なグラフィック処理を実装する際の参考とすることを目的としています。パス測定は、SVGアニメーションやカスタムプログレスバー、地図上のルート表示などの実装に必要な基礎技術です。

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

**主要な操作・処理内容**：
1. 画面表示時に500x500ピクセルのRenderTargetBitmapを作成
2. 複数の線分で構成されるPathGeometryを作成（折れ線パス）
3. パスの総延長（ContourLength）を取得
4. TryGetSegmentメソッドで5%〜20%、20%〜80%、80%〜95%の3つの部分パスを抽出
5. 各部分パスを異なる色（紫、緑、水色）で描画
6. 元のパス全体を濃青色で描画
7. パスの境界矩形を赤色の線で描画

**画面遷移**：
- 遷移元：RenderDemo MainWindow（HamburgerMenuナビゲーション）
- 遷移先：なし（他のデモページへはHamburgerMenu経由で遷移）

**権限による表示制御**：
特に権限による表示制御はありません。デモ用途のため全ての機能が常に利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 75 | Geometry | 主機能 | PathGeometryの作成、ContourLength取得、TryGetSegmentによる部分パス抽出 |
| 77 | DrawingContext | 補助機能 | DrawGeometryによるパスの描画、DrawRectangleによる境界矩形描画 |
| 85 | Renderer | 補助機能 | RenderTargetBitmapへのオフスクリーンレンダリング |

## 画面種別

デモ / 表示専用

## URL/ルーティング

HamburgerMenuナビゲーション: "Path Measurement"タブ

## 入出力項目

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

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| パス描画エリア | 出力 | Image | 500x500ピクセルの描画領域 |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| ベースパス | Geometry | 濃青色（DarkBlue）の折れ線パス（10px太さ） |
| 部分パス1（5%〜20%） | Geometry | 紫色（Purple）で描画される部分パス |
| 部分パス2（20%〜80%） | Geometry | 緑色（Green）で描画される部分パス |
| 部分パス3（80%〜95%） | Geometry | 水色（LightBlue）で描画される部分パス |
| 境界矩形 | Rectangle | 赤色（Red）1px線でパスの境界を表示 |

## イベント仕様

### 1-OnAttachedToLogicalTree

ページが論理ツリーにアタッチされた際に発生するイベントです。

- **トリガー**：ページがアプリケーションのビジュアルツリーに追加されたとき
- **処理内容**：
  1. 500x500ピクセル、96dpiのRenderTargetBitmapを作成
  2. ビットマップインスタンスを`_bitmap`フィールドに保持

### 2-OnDetachedFromLogicalTree

ページが論理ツリーからデタッチされた際に発生するイベントです。

- **トリガー**：ページがアプリケーションのビジュアルツリーから削除されたとき
- **処理内容**：
  1. RenderTargetBitmapのDisposeを呼び出してリソースを解放
  2. `_bitmap`フィールドをnullに設定

### 3-Render

フレームごとに呼び出される描画イベントです。

- **トリガー**：画面の再描画が必要なとき（Bounds変更時など）
- **処理内容**：
  1. PathGeometryを作成し、4つの頂点を持つ折れ線を定義
  2. ベースパスを濃青色で描画
  3. ContourLengthでパス全長を取得
  4. TryGetSegmentで3つの部分パスを抽出・描画
  5. GetRenderBoundsで境界矩形を取得・描画
  6. 完成したビットマップを画面にDrawImage

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

本画面はデータベースを使用しません。

## メッセージ仕様

本画面はメッセージを表示しません。

## 例外処理

| 例外状況 | 処理内容 |
|----------|----------|
| _bitmapがnullの場合 | Renderメソッドを早期リターン |
| TryGetSegmentがfalseを返す場合 | 該当部分パスの描画をスキップ |

## 備考

- RenderTargetBitmapへのオフスクリーンレンダリングにより、複雑な描画処理を効率的に行っています
- パス測定機能はSkiaSharpの機能をラップしており、高精度な計算が可能です
- AffectsRender静的コンストラクタでBoundsProperty変更時の再描画を設定しています

---

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

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

### 推奨読解順序

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

本画面はシンプルな構造で、外部データ構造への依存はありません。描画に使用するPen定義を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | PathMeasurementPage.cs | `samples/RenderDemo/Pages/PathMeasurementPage.cs` | 行32-36でIPen定義（strokePen〜strokePen4）を確認。各ペンの色と太さを把握 |

**読解のコツ**: ImmutablePenはスレッドセーフで変更不可のPenオブジェクトです。PenLineCapとPenLineJoinは線端とコーナーの形状を制御します。

#### Step 2: エントリーポイントを理解する

Controlクラスを継承しており、Renderメソッドがメインの処理エントリーポイントです。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | PathMeasurementPage.cs | `samples/RenderDemo/Pages/PathMeasurementPage.cs` | 行38のRenderメソッドが描画の起点 |

**主要処理フロー**:
1. **行12-15**: 静的コンストラクタでAffectsRenderを設定（Bounds変更で再描画）
2. **行19-23**: OnAttachedToLogicalTreeでRenderTargetBitmap作成
3. **行38-81**: Renderメソッドでパス生成・測定・描画を実行

#### Step 3: パス生成ロジックを理解する

PathGeometryの生成とPathFigureの操作を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | PathMeasurementPage.cs | `samples/RenderDemo/Pages/PathMeasurementPage.cs` | 行45-54でPathGeometry作成。Open()で描画コンテキスト取得 |

**主要処理フロー**:
- **行45**: PathGeometryインスタンス生成
- **行47**: Open()でStreamGeometryContextを取得
- **行49-53**: BeginFigure→LineTo×3→EndFigureでパス定義

#### Step 4: パス測定と部分抽出を理解する

ContourLengthとTryGetSegmentの使用方法を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | PathMeasurementPage.cs | `samples/RenderDemo/Pages/PathMeasurementPage.cs` | 行59-68でパス測定と部分抽出 |

**主要処理フロー**:
- **行59**: ContourLengthでパスの総延長を取得
- **行61-62**: TryGetSegment(start, end, true, out geometry)で5-20%区間を抽出
- **行64-68**: 同様に20-80%、80-95%区間を抽出

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

```
PathMeasurementPage (Control)
    │
    ├─ 静的コンストラクタ
    │      └─ AffectsRender<PathMeasurementPage>(BoundsProperty)
    │
    ├─ OnAttachedToLogicalTree
    │      └─ new RenderTargetBitmap(500x500, 96dpi)
    │
    ├─ OnDetachedFromLogicalTree
    │      └─ _bitmap?.Dispose()
    │
    └─ Render(DrawingContext context)
           │
           ├─ _bitmap.CreateDrawingContext()
           │      │
           │      ├─ new PathGeometry()
           │      │      └─ Open() → BeginFigure → LineTo×3 → EndFigure
           │      │
           │      ├─ DrawGeometry(basePath)
           │      │
           │      ├─ basePath.ContourLength
           │      │
           │      ├─ TryGetSegment() ×3
           │      │      └─ DrawGeometry(segment) ×3
           │      │
           │      ├─ GetRenderBounds(strokePen)
           │      │
           │      └─ DrawRectangle(pathBounds)
           │
           └─ context.DrawImage(_bitmap)
```

### データフロー図

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

なし（定数定義）    ─▶ PathGeometry生成        ─▶ 折れ線パス
                        │
                        ▼
                   ContourLength取得
                        │
                        ▼
                   TryGetSegment×3          ─▶ 部分パス×3
                        │
                        ▼
                   GetRenderBounds          ─▶ 境界矩形
                        │
                        ▼
                   DrawingContext           ─▶ RenderTargetBitmap
                        │
                        ▼
                   DrawImage                ─▶ 画面表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| PathMeasurementPage.cs | `samples/RenderDemo/Pages/PathMeasurementPage.cs` | ソース | パス測定デモの実装（コードのみ、XAMLなし） |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | テンプレート | HamburgerMenuナビゲーションを提供 |
