syncfusion-maui-image-editor について
Syncfusion の .NET MAUI SfImageEditor を利用・カスタマイズするためのガイダンススキルです。画像変換、注釈、フィルター、ツールバー、編集状態の保存と復元を扱います。
主な機能
- 01画像の切り抜き、回転、反転
- 02図形、テキスト、手描き注釈の追加
- 03画像フィルターと効果の適用
- 04組み込み・カスタムツールバーの設定
- 05画像保存と編集状態のシリアライズ
- 06編集の取り消しとやり直し
活用シーン
- 01.NET MAUI アプリへの画像編集機能の導入
- 02ユーザー画像の切り抜きと注釈付け
- 03画像調整の適用とプレビュー
- 04編集内容の保存やシリアライズ状態の復元
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-image-editorインストール後、Claude Code で/syncfusion-maui-image-editorを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/accessibility-localization.mdannotations.mdcrop-transform.mdevents.mdfilters-effects.mdgetting-started.mdsave-serialization.mdstyling-customization.mdtoolbar.mdundo-redo.mdzooming-navigation.md詳細
.NET MAUI Image Editor の実装
Syncfusion .NET MAUI ImageEditor(SfImageEditor)コントロールを実装、カスタマイズするための包括的なスキルです。ImageEditor には、トリミング、変換、注釈、フィルター、エフェクトなどの強力な画像編集機能が備わっており、カスタマイズ可能なツールバーも組み込まれています。
このスキルを使用する場面
次のような場合に、このスキルを使用してください。
- .NET MAUI アプリケーションで画像を編集、加工する
- さまざまなアスペクト比やカスタム選択範囲で画像をトリミングする
- 画像を回転または反転する(変換)
- 図形、テキスト、フリーハンド描画の注釈を追加する
- フィルターやエフェクト(明るさ、コントラスト、ぼかし、彩度など)を適用する
- 組み込みツールバーをカスタマイズする、またはカスタムツールバーを作成する
- 詳細な編集のために画像を拡大、縮小、パンする
- 編集した画像をファイルまたはストリームに保存する
- エディターの状態(注釈、変換)をシリアル化、逆シリアル化する
- 元に戻す/やり直し機能を実装する
- 画像編集イベントを処理する
- 画像エディターの外観をカスタマイズする
コンポーネントの概要
SfImageEditor は、次の機能を備えた .NET MAUI 用の包括的な画像編集コントロールです。
主な機能:
- ファイル、ストリーム、またはリソースから画像を読み込む
- プリセット(正方形、円形、16:9、4:3、3:2 など)またはフリーハンドでトリミングする
- 変換:回転(90°、180°、270°、任意の角度)、反転(水平/垂直)
- 注釈:図形(円、長方形、矢印、線、パス)、テキスト、フリーハンド描画
- 画像フィルター:明るさ、コントラスト、ぼかし、シャープ、露出、彩度、色相、不透明度
- 詳細なカスタマイズに対応した組み込みツールバー
- ピンチジェスチャーによる拡大、縮小、パン
- 注釈の Z オーダー(前面へ移動、背面へ移動)
- 元に戻す/やり直し操作
- ファイルまたはストリームへの保存(JPEG、JPG、PNG、BMP)
- エディターの状態のシリアル化/逆シリアル化
- 包括的なイベント処理
NuGet パッケージ: Syncfusion.Maui.ImageEditor
ドキュメントとナビゲーションガイド
はじめにとセットアップ
📄 参照: references/getting-started.md
- インストールと NuGet パッケージのセットアップ
- MauiProgram.cs でのハンドラー登録
- ImageEditor の基本的な実装(XAML と C#)
- さまざまなソースからの画像の読み込み
- Source プロパティと画像の読み込み
トリミングと変換
📄 参照: references/crop-transform.md
- Crop メソッドを使用した画像のトリミング
- ImageCropType のオプション(Free、Square、Circle、アスペクト比)
- インタラクティブなトリミングとプログラムによるトリミング
- 回転操作(Rotate メソッド)
- 反転操作(水平/垂直)
- 任意の角度での回転
- 変換イベント
注釈
📄 参照: references/annotations.md
- 図形の注釈を追加する(Circle、Rectangle、Arrow、Line、Path)
- AddShape メソッドと AnnotationShape 列挙型
- テキスト注釈(AddText メソッド)
- フリーハンド描画機能
- カスタムビューオーバーレイ
- 注釈の設定(境界、 不透明度、回転、色)
- 注釈の選択と操作
- AllowDrag、AllowResize、IsEditable プロパティ
フィルターとエフェクト
📄 参照: references/filters-effects.md
- プログラムによる画像フィルターの適用
- 明るさとコントラストの調整
- 露出、彩度、色相のコントロール
- ぼかしとシャープのエフェクト
- 不透明度の変更
- 複数のエフェクトの組み合わせ
- エフェクトのプレビューとリセット
ツールバーのカスタマイズ
📄 参照: references/toolbar.md
- 表示を制御する ShowToolbar プロパティ
- 組み込みのツールバー項目
- カスタムツールバー項目の追加
- ツールバー項目の削除や並べ替え
- ツールバーの位置と向き
- ツールバー項目の外観のカスタマイズ
- ToolbarItemSelected イベント
- 完全なカスタムツールバーの作成
ズームとナビゲーション
📄 参照: references/zooming-navigation.md
- ズーム機能(ピンチズーム、プログラムによるズーム)
- ズームレベルの管理
- パンとナビゲーションのコントロール
- FitToScreen 機能
- 注釈の Z オーダー
- BringToFront メソッドと SendToBack メソッド
- 複雑な構成に対応するレイヤー管理
保存とシリアライズ
📄 参照: references/save-serialization.md
- 編集した画像の保存(Save メソッド)
- ファイルパスへの保存とストリームへの保存
- 画像形式のオプション(JPEG、JPG、PNG、BMP)
- 品質と圧縮の設定
- JSON へのシリアライズ(注釈と状態)
- デシリアライズ(保存したエディター状態の読み込み)
- リセット機能
- エクスポートのシナリオとベストプラクティス
元に戻す・やり直す操作
📄 参照: references/undo-redo.md
- Undo メソッドと Redo メソッド
- CanUndo プロパティと CanRedo プロパティ
- 履歴スタックの管理
- 元に戻す・やり直すためのカスタム UI
- 履歴の制限と設定
- Undo/Redo イベント
イベントとイベント処理
📄 参照: references/events.md
- ImageLoaded イベント
- ImageSaving イベントと ImageSaved イベント
- ItemsSelected イベント(注釈の選択)
- ToolbarItemSelected イベント
- トリミングイベント
- イベント引数とイベントデータへのアクセス
- イベント駆動型ワークフローの構築
スタイルとカスタマイズ
📄 参照: references/styling-customization.md
- ビジュアルのカスタマイズオプション
- テーマのサポートとスタイル設定
- リキッドグラス効果
- コントロールの外観のカスタマイズ
- 注釈スタイルのカスタマイズ
- 枠線と背景のプロパティ
アクセシビリティとローカライズ
📄 参照: references/accessibility-localization.md
- アクセシビリティ機能とサポート
- スクリーンリーダーとの互換性
- キーボードナビゲーション(デスクトッププラットフォーム)
- セマンティックプロパティ
- ローカライズと多言語サポート
- 文化圏固有の書式設定
- 右から左(RTL)のレイアウトサポート