# 画面設計書 75-RenderTargetBitmap

## 概要

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

### 本画面の処理概要

**業務上の目的・背景**：オフスクリーンレンダリングは、画面に直接表示せずにビットマップに描画する技術であり、サムネイル生成、スクリーンショット機能、視覚効果のキャッシュなどに使用されます。本画面は、RenderTargetBitmapを作成し、その上に回転する矩形を描画してから画面に表示するという一連の流れを開発者が学習できるようにすることを目的としています。

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

**主要な操作・処理内容**：
1. 画面がロジカルツリーにアタッチされた時点で200x200ピクセルのRenderTargetBitmapを作成
2. 各フレームで回転変換を適用してフクシア色の矩形をビットマップに描画
3. 描画されたビットマップを画面に転送表示
4. 画面デタッチ時にRenderTargetBitmapを適切に破棄

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 85 | Renderer | 主機能 | RenderTargetBitmapのデモ。オフスクリーンレンダリング |

## 画面種別

デモ / オフスクリーンレンダリング表示

## URL/ルーティング

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

## 入出力項目

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

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

## 表示項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| レンダリング領域 | RenderTargetBitmap | 200x200ピクセルのオフスクリーンビットマップ |
| 回転矩形 | Rectangle | フクシア色、50x50ピクセル位置から100x100ピクセルサイズ、回転アニメーション付き |

## イベント仕様

### 1-ロジカルツリーアタッチ時

コントロールがロジカルツリーにアタッチされた際にRenderTargetBitmapを初期化します。

**処理フロー**:
1. OnAttachedToLogicalTreeが呼ばれる
2. RenderTargetBitmap(200x200ピクセル、96x96 DPI)を作成
3. base.OnAttachedToLogicalTreeを呼び出し

### 2-ロジカルツリーデタッチ時

コントロールがロジカルツリーからデタッチされた際にリソースを解放します。

**処理フロー**:
1. OnDetachedFromLogicalTreeが呼ばれる
2. RenderTargetBitmapをDispose
3. _bitmap参照をnullに設定
4. base.OnDetachedFromLogicalTreeを呼び出し

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

各フレームでオフスクリーン描画と画面転送を実行します。

**処理フロー**:
1. Render(DrawingContext)が呼ばれる
2. _bitmapがnullの場合は処理をスキップ
3. _bitmap.CreateDrawingContext()で描画コンテキストを取得
4. Matrix変換（平行移動 + 回転 + 平行移動）をプッシュ
5. FillRectangle(Fuchsia, 50,50,100,100)で矩形を描画
6. context.DrawImageでビットマップを画面に転送
7. Dispatcher.UIThread.Postで次フレーム描画を要求

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

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

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

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

## メッセージ仕様

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

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

## 例外処理

| 例外 | 対処 |
|------|------|
| _bitmapがnull | Renderメソッドで早期リターン |
| レンダリングエラー | Avaloniaフレームワークの標準エラーハンドリングに委譲 |

## 備考

- RenderTargetBitmapはIDisposableを実装しており、適切な破棄が必要
- 回転角度は_st.Elapsed.TotalSecondsで計算され、1秒で約57.3度（1ラジアン）回転
- 変換行列の順序：中心を原点に移動 → 回転 → 元の位置に戻す
- DPIは96x96で固定（標準的なディスプレイDPI）
- Dispatcher.UIThread.Postでバックグラウンド優先度で連続再描画

---

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

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

### 推奨読解順序

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

RenderTargetBitmapとライフサイクル管理を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | RenderTargetBitmapPage.cs | `samples/RenderDemo/Pages/RenderTargetBitmapPage.cs` | _bitmapフィールドとライフサイクルイベントの関係を確認 |

**読解のコツ**: OnAttachedToLogicalTree/OnDetachedFromLogicalTreeでリソースの生成と解放を行うパターンは、メモリリークを防ぐための標準的な実装です。

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

コントロールの初期化とレンダリング開始を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | RenderTargetBitmapPage.cs | `samples/RenderDemo/Pages/RenderTargetBitmapPage.cs` | Renderメソッドでのオフスクリーン描画フローを確認 |

**主要処理フロー**:
1. **行15-19**: OnAttachedToLogicalTreeでRenderTargetBitmap(200x200, 96dpi)を作成
2. **行21-26**: OnDetachedFromLogicalTreeでDispose処理
3. **行29-47**: Renderで描画処理を実行

#### Step 3: 描画処理を理解する

オフスクリーン描画から画面転送までの流れを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | RenderTargetBitmapPage.cs | `samples/RenderDemo/Pages/RenderTargetBitmapPage.cs` | Matrix変換とDrawImageの使用方法を確認 |

**主要処理フロー**:
- **行34-37**: 中心を原点とした回転変換を作成（CreateTranslation + CreateRotation + CreateTranslation）
- **行39**: FillRectangle(Fuchsia)で矩形を描画
- **行42-44**: DrawImageでビットマップを画面に転送
- **行45**: Dispatcher.UIThread.Postで次フレーム描画を要求

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

```
MainWindow
    |
    +-- HamburgerMenu (controls:HamburgerMenu)
           |
           +-- TabItem[Header="RenderTargetBitmap"]
                  |
                  +-- RenderTargetBitmapPage (Control)
                         |
                         +-- OnAttachedToLogicalTree
                         |      |
                         |      +-- new RenderTargetBitmap(200x200, 96dpi)
                         |
                         +-- Render(DrawingContext)
                         |      |
                         |      +-- _bitmap.CreateDrawingContext()
                         |      |      |
                         |      |      +-- PushTransform(回転行列)
                         |      |      +-- FillRectangle(Fuchsia)
                         |      |
                         |      +-- context.DrawImage(_bitmap)
                         |      +-- Dispatcher.Post(InvalidateVisual)
                         |
                         +-- OnDetachedFromLogicalTree
                                |
                                +-- _bitmap?.Dispose()
```

### データフロー図

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

Stopwatch           --> Matrix.CreateRotation --> 回転角度
(経過時間)              (回転変換)

RenderTargetBitmap  --> CreateDrawingContext --> オフスクリーン描画
(200x200)               |
                        +-- FillRectangle(Fuchsia, 50,50,100,100)

オフスクリーン       --> DrawImage           --> 画面表示
ビットマップ             (転送)                  (200x200領域)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| RenderTargetBitmapPage.cs | `samples/RenderDemo/Pages/RenderTargetBitmapPage.cs` | C# | オフスクリーンレンダリングを実装したControl |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | ホスト画面（HamburgerMenuでページを管理） |
