# 画面設計書 73-Drawing

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるDrawing（描画）ページの画面設計を定義するものです。このページは、Avaloniaフレームワークが提供するDrawingGroup、GeometryDrawing、DrawingImageを使用したベクターグラフィックス描画とStretch（伸縮）モードの動作を視覚的にデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：アプリケーション開発において、アイコンやイラストなどのベクターグラフィックスを効率的に描画することは重要です。本画面は、DrawingGroupを使用して複数の図形（ジオメトリ描画）を組み合わせた複合グラフィックス（電球アイコン）を作成し、異なるStretchモード（None、Fill、Uniform、UniformToFill）での表示差異を開発者が視覚的に比較・学習できるようにすることを目的としています。

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

**主要な操作・処理内容**：
1. 画面表示時にDrawingGroupリソース「Bulb」（電球アイコン）が定義される
2. 4つの異なるStretchモードでDrawingImageを表示
3. 比較用として同じStretchモードでEllipse（楕円）も表示
4. 各表示領域は100x50ピクセルのBorderで囲まれている

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 77 | DrawingContext | 主機能 | 描画のデモ。図形やテキストの描画 |
| 73 | Brush | 補助機能 | 塗りつぶしスタイルの適用 |

## 画面種別

デモ / ベクターグラフィックス表示

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| None表示（電球） | Image | Stretch=Noneの電球アイコン。元のサイズで表示 |
| Fill表示（電球） | Image | Stretch=Fillの電球アイコン。100x50に引き伸ばし |
| Uniform表示（電球） | Image | Stretch=Uniformの電球アイコン。アスペクト比維持で縮小 |
| UniformToFill表示（電球） | Image | Stretch=UniformToFillの電球アイコン。アスペクト比維持で拡大（はみ出し部分は切り取り） |
| None表示（楕円） | Ellipse | Stretch=Noneの青い楕円 |
| Fill表示（楕円） | Ellipse | Stretch=Fillの青い楕円 |
| Uniform表示（楕円） | Ellipse | Stretch=Uniformの青い楕円 |
| UniformToFill表示（楕円） | Ellipse | Stretch=UniformToFillの青い楕円 |

## イベント仕様

### 1-ページ読み込み時

ページがロードされると、リソースが読み込まれ静的な表示が行われます。

**処理フロー**:
1. UserControlがロードされ、AvaloniaXamlLoader.Load(this)が実行される
2. Style.Resourcesセクションで「Bulb」DrawingGroupが定義される
3. 各ImageコントロールでDynamicResource "Bulb" が参照される
4. Stretchプロパティに応じて異なる表示がレンダリングされる

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

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

## 備考

- DrawingGroupは複数のGeometryDrawingをグループ化し、変換（Transform）を適用可能
- 電球アイコンは複数色（#FF7F8C8D、#FFF39C12、#FFF1C40F、#FFE67E22、#FFBDC3C7、#FF95A5A6）を使用
- Stretchモードの違い：
  - **None**: 元のサイズで中央配置
  - **Fill**: コンテナに合わせて引き伸ばし（アスペクト比無視）
  - **Uniform**: アスペクト比を維持してコンテナに収まるよう縮小
  - **UniformToFill**: アスペクト比を維持してコンテナを埋めるよう拡大（はみ出し部分は切り取り）

---

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

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

### 推奨読解順序

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

DrawingGroupリソースの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | DrawingPage.xaml | `samples/RenderDemo/Pages/DrawingPage.xaml` | Style.Resourcesセクションの"Bulb" DrawingGroupの構造を確認 |

**読解のコツ**: DrawingGroupは階層構造を持ち、各GeometryDrawingには塗りつぶし色（Brush）とパス（Geometry）が設定されています。MatrixTransformで座標変換が適用されています。

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

ページのロード処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | DrawingPage.xaml.cs | `samples/RenderDemo/Pages/DrawingPage.xaml.cs` | 標準的なUserControlの初期化処理 |

**主要処理フロー**:
1. **行8-11**: コンストラクタでInitializeComponent()を呼び出し
2. **行13-16**: AvaloniaXamlLoader.Load(this)によりXAMLを読み込み

#### Step 3: UIレイアウトを理解する

Gridレイアウトとイメージ配置を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | DrawingPage.xaml | `samples/RenderDemo/Pages/DrawingPage.xaml` | Grid構造（3行4列）と各Stretchモードの配置を確認 |

**主要処理フロー**:
- **行8-39**: DrawingGroupリソース"Bulb"の定義（複数のGeometryDrawing）
- **行43-59**: 1行目：ラベル（None, Fill, Uniform, UniformToFill）
- **行47-107**: 2行目：DrawingImage with 各Stretchモード
- **行111-138**: 3行目：比較用Ellipse with 各Stretchモード

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

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="Drawing"]
                  |
                  +-- DrawingPage (UserControl)
                         |
                         +-- Style.Resources
                         |      |
                         |      +-- DrawingGroup "Bulb"
                         |             |
                         |             +-- GeometryDrawing (複数)
                         |
                         +-- Grid [3行 x 4列]
                                |
                                +-- Row 0: TextBlocks (ラベル)
                                +-- Row 1: Images (DrawingImage)
                                +-- Row 2: Ellipses (比較用)
```

### データフロー図

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

DrawingGroup       --> DrawingImage        --> Image表示
"Bulb" リソース        (DynamicResource)       (各Stretchモード)

Stretch Property   --> レンダリング         --> サイズ調整
(None/Fill/etc)        エンジン               (アスペクト比処理)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DrawingPage.xaml | `samples/RenderDemo/Pages/DrawingPage.xaml` | XAML | UIレイアウトとDrawingGroupリソース定義 |
| DrawingPage.xaml.cs | `samples/RenderDemo/Pages/DrawingPage.xaml.cs` | C# | コードビハインド（初期化処理） |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | ホスト画面（HamburgerMenuでページを管理） |
