# 画面設計書 72-Clipping

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるClipping（クリッピング）ページの画面設計を定義するものです。このページは、Avaloniaフレームワークが提供するGeometryクリッピング機能を視覚的にデモンストレーションします。

### 本画面の処理概要

**業務上の目的・背景**：UI開発において、コントロールの表示領域を任意の形状で切り抜く（クリッピングする）ことは、独自のUIデザインを実現するために重要な技術です。本画面は、SVGパス形式で定義した複雑なジオメトリ（花形）を使用してBorderコントロールをクリッピングする方法を開発者が学習できるようにすることを目的としています。クリッピングの有無をチェックボックスで動的に切り替えられるため、効果の違いを即座に確認できます。

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

**主要な操作・処理内容**：
1. 画面表示時に黄色いBorder内で赤いBorderが回転アニメーションを開始
2. CheckBox「Apply Geometry Clip」のON/OFFでクリッピングを切り替え
3. クリッピングON時は花形のジオメトリでBorderが切り抜かれる
4. マウスホバー時にBorderの背景色がCrimsonに変化
5. TextBoxは不透明度0.9で表示され、別レイヤーとしてレンダリング

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 75 | Geometry | 主機能 | クリッピングのデモ。図形の形状によるクリッピング |

## 画面種別

デモ / クリッピング表示

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|-----|------|
| Apply Geometry Clip | 入力 | Boolean | クリッピングの有効/無効を切り替えるチェックボックス。デフォルトはTrue |
| TextBox | 入力 | String | "Avalonia"というテキストが初期値として設定されたテキストボックス |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| 外側Border | Border | 黄色の背景色、100x100ピクセル。クリッピング対象 |
| 内側Border | Border | 赤い背景色。回転アニメーション付き。TextBoxを含む |
| TextBox | TextBox | "Avalonia"テキスト。Opacity=0.9で表示 |
| CheckBox | CheckBox | クリッピングのON/OFF制御 |

## イベント仕様

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

ページがロードされると、回転アニメーションが自動的に開始されます。

**処理フロー**:
1. UserControlがロードされ、AvaloniaXamlLoader.Load(this)が実行される
2. CheckBox "useMask" のデフォルト値IsChecked=Trueによりクリッピングが有効
3. Border#clipChildに対して回転アニメーションが開始（360度、2秒、無限ループ）

### 2-チェックボックス変更時

CheckBoxの状態変更によりクリッピングの有無が切り替わります。

**処理フロー**:
1. CheckBox "useMask" のIsCheckedプロパティが変更される
2. Border#clippedのClasses.clipがバインディングにより更新
3. Style Selector "Border.clip" の適用/解除によりClipプロパティが設定/解除

### 3-マウスホバー時

外側Borderにマウスカーソルが乗った際に背景色が変化します。

**処理フロー**:
1. PointerOverイベントが発生
2. Style Selector "Border#clipped:pointerover" が適用
3. Background色がYellowからCrimsonに変更

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

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

## 備考

- クリッピングジオメトリはSVGパス形式で定義されており、複雑な花形の形状を表現
- Opacity=0.9を設定することで、TextBoxは親要素とは別のレンダリングレイヤーに配置される
- 回転アニメーションはRotateTransformを使用し、IterationCount="Infinite"で無限ループ
- クリッピングジオメトリのサイズは約100x100ピクセルで、Borderのサイズと一致

---

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

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

### 推奨読解順序

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

クリッピングジオメトリの定義とスタイル構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ClippingPage.xaml | `samples/RenderDemo/Pages/ClippingPage.xaml` | Clipプロパティに設定されるSVGパスの構造を確認 |

**読解のコツ**: Clipプロパティに設定されるジオメトリはSVGのパスデータ形式（M, C, L, Aコマンド等）で記述されています。F1は塗りつぶしルール（NonZero）を示し、Mは移動、Cは3次ベジェ曲線を表します。

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

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

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

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

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

XAMLの構造とバインディングを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ClippingPage.xaml | `samples/RenderDemo/Pages/ClippingPage.xaml` | Grid構造、スタイル定義、データバインディングを確認 |

**主要処理フロー**:
- **行6-20**: Grid.Stylesでアニメーションとホバースタイルを定義
- **行22-26**: Border#clippedでClasses.clipをCheckBoxにバインド
- **行27-50**: クリッピングジオメトリをStyleで定義
- **行52-58**: 内側Border#clipChildと回転アニメーション
- **行60**: CheckBox#useMaskでクリッピングを制御

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

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="Clipping"]
                  |
                  +-- ClippingPage (UserControl)
                         |
                         +-- Grid
                                |
                                +-- Border#clipped [Classes.clip -> useMask.IsChecked]
                                |      |
                                |      +-- Border#clipChild (回転アニメーション)
                                |             |
                                |             +-- TextBox [Opacity=0.9]
                                |
                                +-- CheckBox#useMask [IsChecked=True]
```

### データフロー図

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

CheckBox.IsChecked  --> Classes.clip更新     --> Border.Clip適用/解除
(True/False)            (バインディング)

Timer               --> Animation Engine    --> RotateTransform.Angle
(2秒ごと)               (KeyFrame処理)          (0 -> 360度)

PointerOver         --> Style適用           --> Background変更
                        (Selector)              (Yellow -> Crimson)
```

### 関連ファイル一覧

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