# 画面設計書 14-Canvas

## 概要

本ドキュメントは、ControlCatalogアプリケーションにおけるCanvasページ（Canvasレイアウトのデモページ）の画面設計を記述したものである。

### 本画面の処理概要

CanvasページはAvaloniaフレームワークのCanvasパネルコントロールの機能をデモンストレーションするための画面である。Canvasは子要素を絶対座標（Canvas.Left、Canvas.Top）で配置するレイアウトパネルであり、図形描画やカスタムレイアウトを行う際に使用される。

**業務上の目的・背景**：図形描画アプリケーション、ダイアグラムエディター、カスタムUIなど、要素を自由な位置に配置する必要があるアプリケーションを開発する開発者に対して、Canvas上での各種図形（Rectangle、Ellipse、Path、Line、Polygon、Polyline）の配置方法を示す。

**画面へのアクセス方法**：MainWindow起動後、左側のHamburgerMenuから「Canvas」を選択してアクセスする。

**主要な操作・処理内容**：
1. 各種図形（Rectangle、Ellipse、Path、Line、Polygon、Polyline）の表示確認
2. Canvas.Left/Canvas.Top添付プロパティによる位置指定の確認
3. 塗りつぶし（Fill）、線（Stroke）、透明度マスク（OpacityMask）などのスタイル確認
4. Path.Dataによるベジェ曲線、直線などの複雑な図形描画の確認

**画面遷移**：MainViewのHamburgerMenuから遷移してくる。本画面から他画面への直接遷移はない。

**権限による表示制御**：本画面はデモ用途であり、権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | Canvas | 主機能 | Canvasレイアウトのデモ。絶対座標による自由配置 |

## 画面種別

デモ・サンプル画面（Canvasレイアウトと図形描画の機能展示）

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuによるナビゲーション。URIベースのルーティングは使用していない。

## 入出力項目

本画面には入出力項目はない。静的な図形表示のみ。

## 表示項目

| 図形 | 種類 | 位置 (Left, Top) | サイズ | スタイル |
|------|------|------------------|--------|----------|
| Rectangle | 矩形（角丸） | 40, 31 | 63x41 | Fill=Blue, RadiusX/Y=10, OpacityMask=LinearGradientBrush |
| Rectangle | 矩形（角丸） | 150, 10 | 40x20 | Fill=hsva(240,83%,73%,90%), Stroke=hsl(5,85%,85%), RadiusX=10, RadiusY=5 |
| Ellipse | 楕円 | 88, 100 | 58x58 | Fill=Green |
| Path (Data文字列) | カスタムパス | 30, 250 | 自動 | Fill=Orange |
| Path (PathGeometry) | カスタムパス | 180, 250 | 自動 | Fill=OrangeRed |
| Line | 直線 | - | - | StartPoint=120,185, EndPoint=30,115, Stroke=Red, StrokeThickness=2 |
| Polygon | 多角形 | 150, 31 | 自動 | Points=75,0 120,120..., Stroke=DarkBlue, Fill=Violet |
| Polyline | 折れ線 | 30, 350 | 自動 | Points=0,0 65,0..., Stroke=Brown |

## イベント仕様

本画面にはイベント処理は実装されていない。すべての図形は静的に描画される。

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

本画面はUIデモ用途であり、データベース操作は行わない。

## メッセージ仕様

本画面では特定のメッセージ表示は実装されていない。

## 例外処理

本画面では特別な例外処理は実装されていない。

## 備考

- Canvasの背景色はYellowで、サイズは300x400ピクセル
- Rectangle.OpacityMaskにLinearGradientBrushを使用したグラデーションマスクの例を含む
- PathはData属性による文字列指定とPathGeometry子要素による指定の両方のサンプルを含む
- Path.Dataの文字列指定ではSVGパス構文（M, c, h, v, l, Z等）を使用
- 色指定にはRGB名（Blue, Green等）とHSVA/HSL形式（hsva(240, 83%, 73%, 90%)）の両方を使用

---

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

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

### 推奨読解順序

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

本画面ではデータモデルは使用していない。すべてがXAMLで静的に定義されている。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CanvasPage.xaml | `samples/ControlCatalog/Pages/CanvasPage.xaml` | Canvas上の各図形の座標とプロパティ |

**読解のコツ**: Canvas.LeftとCanvas.Top添付プロパティが各図形の配置位置を決定する。

#### Step 2: 図形の種類と描画方法を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CanvasPage.xaml | `samples/ControlCatalog/Pages/CanvasPage.xaml` | 各図形タイプの使い方 |

**主要処理フロー**:
1. **行6**: Canvas定義（Background=Yellow, Width=300, Height=400）
2. **行7-16**: Rectangle（グラデーションマスク付き）
3. **行17**: Rectangle（HSVA/HSL色指定）
4. **行18**: Ellipse
5. **行19**: Path（Data文字列によるベジェ曲線）
6. **行20-31**: Path（PathGeometryによる2次ベジェ曲線）
7. **行32**: Line
8. **行33**: Polygon
9. **行34**: Polyline

#### Step 3: パス構文を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CanvasPage.xaml | `samples/ControlCatalog/Pages/CanvasPage.xaml` | Path.Dataの構文 |

**Path.Data構文**（行19）:
```
M 0,0           → 開始点 (0,0) に移動
c 0,0 50,0 50,-50  → 3次ベジェ曲線
c 0,0 50,0 50,50   → 3次ベジェ曲線
h -50           → 水平線（相対）
v 50            → 垂直線（相対）
l -50,-50       → 直線（相対）
Z               → パスを閉じる
```

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

```
CanvasPage
    │
    └─ InitializeComponent()
           └─ XAML解析・コントロール初期化
                  │
                  ├─ Canvas (Background=Yellow)
                  │      │
                  │      ├─ Rectangle (x2)
                  │      ├─ Ellipse
                  │      ├─ Path (x2)
                  │      ├─ Line
                  │      ├─ Polygon
                  │      └─ Polyline
                  │
                  └─ 描画処理（Avaloniaレンダリングエンジン）
```

### データフロー図

```
[XAML定義]                    [レンダリング]                   [出力]

Canvas定義 ───▶ VisualTreeへ追加 ───▶ 画面描画
    │
    ├─ Rectangle → Fill, Stroke適用 → ピクセル描画
    ├─ Ellipse → Fill適用 → ピクセル描画
    ├─ Path → Geometry計算 → ピクセル描画
    ├─ Line → 線描画
    ├─ Polygon → Fill, Stroke適用 → ピクセル描画
    └─ Polyline → Stroke適用 → ピクセル描画
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CanvasPage.xaml | `samples/ControlCatalog/Pages/CanvasPage.xaml` | XAML | 画面レイアウト・図形定義 |
| CanvasPage.xaml.cs | `samples/ControlCatalog/Pages/CanvasPage.xaml.cs` | ソース | コードビハインド（初期化のみ） |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
