# 画面設計書 80-LineBounds

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるLineBounds（線の境界計算）ページの画面設計を定義するものです。このページは、Avaloniaフレームワークが提供するLineBoundsHelperを使用して、線（Line）の描画時にPenの太さやLineCapスタイルを考慮した正確な境界矩形（Bounds）を計算する機能を視覚的にデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：グラフィックスプログラミングにおいて、線の境界計算は衝突判定、選択範囲の決定、レンダリング最適化などで重要です。Penの太さやLineCapスタイル（Flat、Round、Square）によって、線の実際の描画範囲は端点を超えて広がる場合があります。本画面は、LineBoundsHelperを使用して正確な境界矩形を計算し、その結果を可視化することで開発者が学習できるようにすることを目的としています。

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

**主要な操作・処理内容**：
1. 画面表示時にDispatcherTimerが開始（60fps）
2. 各フレームでAngleプロパティが増加し、線が回転
3. 中心点(200, 200)から斜め方向に伸びる線を描画
4. LineBoundsHelper.CalculateBoundsで境界矩形を計算
5. 線（緑、太さ20、Square LineCap）と境界矩形（黒枠）を描画

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 77 | DrawingContext | 主機能 | LineBounds描画のデモ。線の境界計算 |

## 画面種別

デモ / 境界計算・可視化表示

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 回転線 | Line | 緑色、太さ20px、PenLineCap.Square、中心から回転 |
| 境界矩形 | Rectangle | 黒枠、線の正確な境界を示す |

## イベント仕様

### 1-コントロール初期化時

コンストラクタでDispatcherTimerを設定し、アニメーションを開始します。

**処理フロー**:
1. LineBoundsDemoControlコンストラクタが呼ばれる
2. DispatcherTimerを作成（Interval=1/60秒=約16.67ms）
3. Tickイベントで Angle += Math.PI / 360 を実行
4. タイマーを開始

### 2-Angle変更時

AffectsRenderにより、Angleプロパティ変更時に自動的に再描画されます。

**処理フロー**:
1. Timer.Tickで Angle += Math.PI / 360
2. AffectsRender<LineBoundsDemoControl>(AngleProperty)により InvalidateVisual()
3. Renderメソッドが呼ばれる

### 3-フレーム描画時

線と境界矩形を描画します。

**処理フロー**:
1. Render(DrawingContext)が呼ばれる
2. 線の長さを計算（sqrt(100^2 + 100^2) = 約141.4）
3. Angleから端点位置を計算（CalculateAdjSide、CalculateOppSide）
4. p1=(200,200)、p2=計算された端点
5. Pen(Green, 20, Square LineCap)を作成
6. DrawLine(pen, p1, p2)で線を描画
7. LineBoundsHelper.CalculateBounds(p1, p2, pen)で境界を計算
8. DrawRectangle(boundPen, bounds)で境界矩形を描画

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

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

## 備考

- LineBoundsHelperはAvalonia.Rendering.SceneGraph名前空間のinternalクラス
- PenLineCap.Squareの場合、線の端点がPen太さの半分だけ延長される
- Math.Atan2で角度を計算し、Sin/Cosで端点座標を求める
- AffectsRenderはスタイルプロパティの変更時に自動的にInvalidateVisualを呼ぶ
- Angle増加量 Math.PI / 360 は1フレームあたり約0.5度

---

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

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

### 推奨読解順序

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

LineBoundsHelperの計算ロジックを理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | LineBoundsHelper.cs | `src/Avalonia.Base/Rendering/SceneGraph/LineBoundsHelper.cs` | CalculateBoundsメソッドの実装を確認 |

**読解のコツ**: LineBoundsHelperは端点間の角度を計算し、Penの太さとLineCapを考慮して境界矩形を生成します。LineCapがFlat以外の場合、端点が延長されます。

#### Step 2: XAMLを確認する

シンプルなXAML構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | LineBoundsPage.xaml | `samples/RenderDemo/Pages/LineBoundsPage.xaml` | LineBoundsDemoControlの配置を確認 |

**主要処理フロー**:
- **行8**: `<controls:LineBoundsDemoControl />` でカスタムコントロールを配置

#### Step 3: LineBoundsDemoControlを理解する

描画処理とタイマーアニメーションを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | LineBoundsDemoControl.cs | `samples/RenderDemo/Controls/LineBoundsDemoControl.cs` | Renderメソッドの処理フローを確認 |

**主要処理フロー**:
- **行12-14**: 静的コンストラクタでAffectsRenderを設定
- **行16-23**: コンストラクタでタイマー設定（60fps、Angle更新）
- **行25-32**: AngleStyledPropertyの定義
- **行34-51**: Renderで線と境界矩形を描画

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

境界計算のアルゴリズムを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | LineBoundsHelper.cs | `src/Avalonia.Base/Rendering/SceneGraph/LineBoundsHelper.cs` | 角度計算と境界拡張ロジックを確認 |

**主要処理フロー**:
- **行8-14**: CalculateAngleで2点間の角度を計算
- **行16-24**: Sin/Cosで対辺/隣辺を計算
- **行26-43**: TranslatePointsAlongTangentで端点を太さ分移動
- **行52-66**: CalculateBoundsでLineCapを考慮した境界を計算

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

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="LineBounds"]
                  |
                  +-- LineBoundsPage (UserControl)
                         |
                         +-- LineBoundsDemoControl (Control)
                                |
                                +-- コンストラクタ
                                |      |
                                |      +-- DispatcherTimer(1/60秒)
                                |             |
                                |             +-- Angle += Math.PI / 360
                                |
                                +-- Render(DrawingContext)
                                       |
                                       +-- CalculateAdjSide / CalculateOppSide
                                       |      (端点座標計算)
                                       |
                                       +-- DrawLine(Green, 20, Square)
                                       |
                                       +-- LineBoundsHelper.CalculateBounds()
                                       |      |
                                       |      +-- CalculateAngle()
                                       |      +-- TranslatePointsAlongTangent()
                                       |
                                       +-- DrawRectangle(Black, bounds)
```

### データフロー図

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

Timer               --> Angle更新            --> 角度(ラジアン)
(1/60秒)                (+= PI/360)

Angle               --> Sin/Cos計算          --> 端点座標
+ lineLength            (CalculateAdj/Opp)       p2=(200+dx, 200+dy)

p1, p2, Pen         --> LineBoundsHelper     --> Rect (境界矩形)
                        .CalculateBounds()

DrawLine            --> レンダリング         --> 緑色の線
DrawRectangle           エンジン                 黒枠の矩形
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| LineBoundsPage.xaml | `samples/RenderDemo/Pages/LineBoundsPage.xaml` | XAML | UIレイアウト |
| LineBoundsPage.xaml.cs | `samples/RenderDemo/Pages/LineBoundsPage.xaml.cs` | C# | コードビハインド（初期化処理） |
| LineBoundsDemoControl.cs | `samples/RenderDemo/Controls/LineBoundsDemoControl.cs` | C# | 線と境界矩形の描画コントロール |
| LineBoundsHelper.cs | `src/Avalonia.Base/Rendering/SceneGraph/LineBoundsHelper.cs` | C# | 線の境界計算ヘルパークラス |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | ホスト画面（HamburgerMenuでページを管理） |
