syncfusion-wpf-image-editor

WPF での画像エディターの実装

Syncfusion WPF ImageEditor コントロールは、テキスト、ペン、組み込み図形で注釈を付けて画像を編集するのに便利なツールです。画像のトリミング、回転、反転ができます。画像エディターコントロールには、編集操作を実行するためのツールバーが組み込まれています。

このスキルを使用する場面

次のような要件がある WPF アプリケーションを構築するときに、このスキルを使用します。

• 画像編集機能：変換や注釈を加えて、画像の読み込み、編集、保存を行う
• 写真の加工：デスクトップアプリケーションで画像をトリミング、反転、回転する
• 視覚的な注釈：画像に図形（四角形、円、矢印）、テキスト、またはフリーハンドの描画を追加する
• 画像マークアップツール：画像のレビュー、注釈付け、ドキュメント作成用のアプリケーションを作成する
• ドキュメント画像処理：画像編集機能を備えたドキュメント処理アプリを構築する
• デザインツール：デザインアプリケーションやクリエイティブアプリケーションに基本的な画像編集機能を実装する
• 写真管理：写真ギャラリーアプリや管理アプリに編集機能を追加する
• 品質管理：検査または承認ワークフローで画像に注釈を付けられるようにする

コンポーネントの概要

SfImageEditor は、画像編集と注釈付けのための包括的な WPF コントロールです。次の機能を備えています。

• 画像の入出力：ImageSource または Stream から読み込み、形式やサイズを指定して保存する
• 変換：トリミング（縦横比を指定した四角形／円形）、反転（水平／垂直）、回転（90°単位）
• 注釈：図形（四角形、円、矢印）、リッチテキスト、フリーハンドのペン描画を追加する
• カスタマイズ：ペン設定、テキスト書式、視覚スタイルをすべて制御する
• レイヤー管理：Z オーダーの制御、元に戻す／やり直し、シリアル化／逆シリアル化
• ナビゲーション：ズーム（50～400％）、大きな画像のパン
• UI の柔軟性：カスタマイズ可能な組み込みツールバー、カスタムビュー（透かし、ロゴ）
• ローカライズ：国際化を全面的にサポート

ドキュメントとナビゲーションガイド

セットアップと基本操作

📄 参照： references/setup-and-basic-operations.md

次の操作が必要な場合：

• SfImageEditor をインストールして構成する
• XAML またはコードでコントロールを初期化する
• ファイルパスまたはストリームから画像を読み込む
• 特定の形式（PNG、JPG、BMP）で編集済み画像を保存する
• 画像の保存場所とサイズを制御する
• 画像を元の状態にリセットする
• 保存イベントを処理する
• エディターにテーマを適用する

画像の変換

📄 参照： references/image-transformations.md

次の操作が必要な場合：

• 画像をトリミングする（四角形または円形のトリミング）
• トリミング時に縦横比の制約を適用する
• 画像を水平方向または垂直方向に反転する
• 画像を90度単位で回転する
• ズーム機能（50～400％の範囲）を有効にする
• ツールバーのスライダーまたはマウスホイールでズームを制御する
• ズームした画像を移動できるようにパンを有効にする
• パンモードと選択モードを切り替える

注釈 - 図形とテキスト

📄 参照： references/annotations-shapes-and-text.md

次の操作が必要な場合：

• 画像に図形（四角形、円、矢印）を追加する
• ペンツールでフリーハンド描画する
• 図形の外観（塗りつぶし、線、透明度）をカスタマイズする
• 書式を詳細に設定したテキスト注釈を追加する
• テキストのプロパティ（フォント、色、配置、効果）を制御する
• 図形やテキストをサイズ変更可能にする
• 図形／テキストの選択イベントを処理する
• 注釈をプログラムで削除する

注釈の管理

📄 参照： references/annotation-management.md

次の操作が必要な場合：

• 注釈の元に戻す／やり直しを実装する
• 注釈のレイヤー順序（最前面へ移動、背面へ移動）を制御する
• 注釈を XML にシリアル化して永続化する
• 保存された注釈の状態を逆シリアル化する
• 注釈コレクションにアクセスしてフィルター処理する
• 元に戻す／やり直しの制限を理解する

UI のカスタマイズと拡張

📄 参照： references/ui-customization-and-extensions.md

以下が必要な場合：

• 組み込みツールバーの表示または非表示
• アイコン付きのカスタムツールバー項目の追加
• ツールバーの外観（色、サイズ）のカスタマイズ
• 完全にカスタムなツールバーの作成
• カスタムビュー（透かし、ロゴ、オーバーレイ）の追加
• カスタムビューのプロパティ（サイズ変更可能、回転可能）の制御
• 利用可能なコマンド（保存、元に戻す、やり直し、ズームなど）へのバインド

ローカライズ

📄 参照： references/localization.md

以下が必要な場合：

• さまざまな文化圏向けの UI 文字列のローカライズ
• ローカライズ用のリソースファイルの作成
• 文化設定の構成
• 画像エディターでの複数言語のサポート

クイックスタートの例

基本的な画像エディターのセットアップ

\\xaml <editor:SfImageEditor x:Name="imageEditor" ImageSource="Assets/photo.jpg"/> \\

ストリームから画像を読み込む

\\csharp using Syncfusion.UI.Xaml.ImageEditor; using System.Windows; using Microsoft.Win32;

public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); LoadImageFromFile(); }

private void LoadImageFromFile()
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    openFileDialog.Filter = "Image Files(*.BMP;*.JPG;*.PNG)|*.BMP;*.JPG;*.PNG|All files (*.*)|*.*";
    
    if (openFileDialog.ShowDialog() == true)
    {
        var stream = openFileDialog.OpenFile();
        imageEditor.Image = stream;
    }
}

} \\

一般的なパターン

パターン 1：画像の読み込み、編集、保存

\\csharp // 画像を読み込む BitmapImage image = new BitmapImage(); image.BeginInit(); image.UriSource = new Uri(@"Assets/photo.jpg", UriKind.Relative); image.EndInit(); imageEditor.ImageSource = image;

// ユーザーがツールバーまたはコードを使って編集します...

// プログラムから保存する imageEditor.Save("C:\EditedImages\result.png"); \\

パターン 2：プログラムからテキスト注釈を追加する

\\csharp using Syncfusion.UI.Xaml.ImageEditor;

// テキスト設定を構成する TextSettings textSettings = new TextSettings() { FontFamily = new FontFamily("Arial"), FontSize = 24, Color = new SolidColorBrush(Colors.Red), TextAlignment = TextAlignment.Center };

// 指定した位置にテキストを追加する imageEditor.AddText("Copyright 2026", textSettings); \\

パターン 3：カスタムスタイルで図形を追加する

\\csharp // 図形のペン設定を構成する PenSettings penSettings = new PenSettings() { Fill = new SolidColorBrush(Colors.Yellow), Stroke = new SolidColorBrush(Colors.Red), StrokeWidth = 3, Opacity = 0.7f };

// 長方形の図形を追加する imageEditor.AddShape(AnnotationShape.Rectangle, penSettings); \\

パターン 4：元に戻す／やり直しを実装する

\\csharp // ツールバーまたはメニューのコマンド内 private void UndoButton_Click(object sender, RoutedEventArgs e) { imageEditor.Undo(); }

private void RedoButton_Click(object sender, RoutedEventArgs e) { imageEditor.Redo(); } \\

パターン 5：注釈をシリアル化および逆シリアル化する

\\csharp using System.IO;

// 注釈をファイルにシリアル化する private void SaveAnnotations() { using (FileStream stream = new FileStream("annotations.xml", FileMode.Create)) { imageEditor.Serialize(stream); } }

// ファイルから注釈を逆シリアル化する private void LoadAnnotations() { using (FileStream stream = new FileStream("annotations.xml", FileMode.Open)) { imageEditor.Deserialize(stream); } } \\

パターン 6：ズームとパンを有効にする

\\csharp // マウスホイールでズームを有効にする imageEditor.EnableZooming = true;

// ズームした画像のパンを有効にする imageEditor.EnablePanning = true;

\\

主なプロパティとメソッド

基本プロパティ

プロパティ	型	説明
ImageSource	ImageSource	エディターに読み込む画像を取得または設定します
Image	Stream	ストリームソースから画像を読み込みます
EnableZooming	bool	ズーム機能を有効または無効にします
EnablePanning	bool	ナビゲーション用のパンモードを有効または無効にします
IsToolbarVisiblity	bool	組み込みツールバーを表示または非表示にします
Annotations	ReadOnlyCollection	エディター内のすべての注釈のコレクションです

基本メソッド

メソッド	パラメーター	説明
Save()	string format = null, Size size = new Size(), string filePath = null	編集した画像を指定したパスに保存します
Reset()	-	画像を元の状態に戻します
Undo()	-	最後の注釈操作を取り消します
Redo()	-	取り消した操作をやり直します
AddShape()	ShapeType shapeType, PenSettings penSettings	指定した範囲に図形を追加します
AddText()	string text, TextSettings textSettings	指定した位置にテキストを追加します
ToggleCropping()	-	トリミングモードのオン／オフを切り替えます
ToggleCropping()	float xRatio, float yRatio, bool isEllipse = false	指定した高さと幅の比率でトリミングプレビューを表示します。
ToggleCropping()	Rect rect	指定した範囲でトリミングプレビューを表示します。
ToggleCropping()	Rect rect, bool isEllipse	指定した矩形範囲で画像のトリミングプレビューを有効にします。
Crop()	Rect rect = null, bool isEllipse = false	画像を指定した矩形にトリミングします
AddCustomView()	FrameworkElement element, CustomViewSettings customViewSettings	カスタムオーバーレイビューを追加します
Serialize()	Stream stream	注釈を XML ストリームに保存します
Deserialize()	Stream stream	注釈を読み込みます

主なイベント

イベント	説明
ImageSaving	画像の保存前に発生し、キャンセルできます
ImageSaved	画像の保存が成功した後に発生します
BeginReset	リセット操作の開始前に発生します
EndReset	リセット操作の完了後に発生します
ItemSelected	注釈が選択されたときに発生します
ItemUnselected	注釈の選択が解除されたときに発生します
ImageEdited	画像が編集されるたびに発生します
ImageLoaded	画像が読み込まれたときに発生します

よくあるユースケース

1. 写真編集アプリケーション：トリミング、回転、フィルター機能を備えたデスクトップ写真編集アプリを構築します
2. ドキュメントへの注釈付け：スクリーンショット、図、またはスキャンしたドキュメントにマークを付けます
3. 品質管理：製品画像に検査マークやメモを追加します
4. デザインレビュー：関係者がデザインモックアップに注釈を付けられるようにします
5. 医療画像：適切な画像形式を使用して、X 線画像やスキャン画像に注釈を付けます
6. 不動産：物件写真にメモやハイライトを追加します
7. E ラーニング：教育コンテンツ用の注釈付き画像を作成します
8. バグ報告：問題を報告する際、ユーザーがスクリーンショットにマークを付けられるようにします

---

次のステップ：

• 詳細なセットアップ手順については、setup-and-basic-operations.mdをお読みください
• 変換機能については、image-transformations.mdをお読みください
• 注釈機能については、annotations-shapes-and-text.mdをお読みください