イメージビューア

アクセス可能な代替テキスト。設定されていない場合はデフォルトで ImageViewer.FileName になります。

False

これが真である場合(ImageViewer.Toolbarも真である)、作物間の相互作用を可能にします: ツールバーにはアスペクト比ピッカーとクロップボタンが追加され、左ドラッグ 画像は、破線で選択された長方形を描きます。Pressing Cropは選択をラスタライズします PNGに表示し、ImageViewer.OnCropApplied発射します。ビューアは 結果を切り取った。リセットすると元のImageViewer.Sourceに戻ります。 この設定はまた、<img>にcrossorigin='anonymous'を追加します つまり、ラスタライザーはtoBlob経由でピクセルを読み返すことができます。に対して ImageSource.Url ソースはリモートサーバーが送信しなければならないことを意味します 画像を読み込むためのアクセス-制御-許可-起源;もし ImageSource.Bytesに切り替え(同じオリジンに解決します) データURLであり、キャンバスの汚染を受けません。

False

もしそうであれば、ダウンロードUXを露出させます: ImageViewer.Toolbarを使うと、ツールバーにダウンロードボタンが追加されます。 ImageViewer.Framed(ツールバーなし)では、隅にオーバーレイボタンを表示します。 どちらも使わないと、画像自体がクリックしてダウンロードされます。

ImageViewer.Sourceがnullのときにレンダリングされます。

ダウンロード時に使われ、デフォルトの ImageViewer.Alt テキストとして使われるファイル名。 ソースの ImageSource.FileName、そうでなければ 「イメージ」に帰属します。

False

真の場合、画像をFluentトークン付き枠付きフレームマッチングでラップします これは ImageEditで使われている読み取り専用プレビュースタイルです。デフォルトはfalse(裸のimg)。

False

現在の汚れ状態 — 表示画像が ベースライン(回転、ひっくり返し、またはクロップを施したもの)。純粋なビュー状態(ズーム、パン) 単独でダーティを切り替えることはありません。

Auto

ラスタライズされたトリミング結果(およびコミット画像)の出力フォーマット バイトは ImageViewer.CommitAsync)。デフォルト ImageOutputFormat.Auto — この形式は ソースファイルの拡張子(JPEG入力はJPEGのままで、それ以外はすべて送信します) PNGです。ロスレス書き込みのためにピン ImageOutputFormat.Png 出典や ImageOutputFormat.Jpeg に関わらず サイズ感度の写真フロー。

0.9

[ 0, 1]のJPEG品質。無視される ImageViewer.OutputFormat は ImageOutputFormat.Png (PNGはロスレスで、 クオリティノブ)を担当しています。デフォルトは 0.9 — 視覚的に区別がつきません ほとんどの写真は元の写真から保存しつつ、PNGより多く保存できます。

レンダリングする画像データ。nullの場合、 ImageViewer.Fallback がレンダリングされます 代わりに(またはフォールバックがなければ何も使えない)。

False

trueの場合は、画像の上にツールバーを表示し、回転/反転/ズーム/ リセット/フルスクリーンコントロール。ラッパー要素は、以下に関係なく含意します。 ImageViewer.Framed。画像のドラッグ・トゥ・パンが使えるようになると、 1×を一気に過ぎていった。

ImageViewer.Toolbarと合わせると、赤色が禁止されます。 ツールバーの右端にある丸ボタンです。常に有効にしています。 消費者は通常、編集モードを終了して進行中の破棄に使います 変形 — ビューアは自動的に何かを元に戻しません。 再マウント(例:@key経由)か、ImageViewer.Sourceを次のように更新してください。 内部の状態を消去する。

<img>のハンドラーをクリックします。クリックしてダウンロードするフォールバックを抑制します。

使用者が作物を発動させると発射されます。ラスタ化されたPNGペイロードを受け取ります。

ImageViewer.IsDirtyが変わるたびに発射します。親のセーブボタンを操作します 投票なしで有効状態。

ImageViewer.Toolbarと組み合わせると、緑色のチェックマークが表示されます ツールバーの右端にあるボタンです。ボタンは無効化されています。 視聴者はクリーンで、救うものは何もない。クリックハンドラーが火をつけています。 そして忘れる;消費者は通常、通話を行います ここから表示画像をベイクしてImageViewer.CommitAsync 永続性のためにバイト。 ImageEdit編集モードフロー(編集をコミットする)用に設計されています 綴じられた柱に入った)。単独の消費者でも同じように利用できます。

現在表示されている画像をベイクします — 回転も含めて FLIP — ソース解像度のPNGに変換します。は ビューアはクリーン(保存するものがない)か、JSハンドルが 執着している。まだ決まっていない進行中の作物の選択は クロップボタンは意図的に無視されます。先にトリミングをクリックしてください。 それを組み込んでほしいのです。

コンテナリサイズコールバック — JS側のResizeObserverがこれを発射します(rAF- 画像コンテナのボックスが状態外から変化したときにdebounced) (親が伸びたりサイズを変えたりして、パネルがリフローされている状態)。イメージは再フィットします Object-Fit:Containを通じて、トリミング選択のコンテナピクセルはNoとコordレーションされます 同じ画像内容で長く並ぶと、同じ方法で再アンカーしてください キャプチャー・古い→リフレッシュ→新しい往復 HandleFullscreenChange(System.Boolean) 用途:PRE-RESIZEに対してナチュラルピクセル座標の選択をスナップショット まだ保持している測定値は、サイズ変更後の測定値にリフレッシュします。 返してくれ。ドラッグ中にスキップされた — ドラッグハンドラーが選択ジオメトリを所有しています (そしてドラッグスタート時のクランプウィンドウもキャプチャーしました)。

ドキュメントレベルの fullscreenchange コールバック — JSは ラッパー要素は現在、ドキュメントのフルスクリーン要素です。退団 ここも流れます(ツールバーのボタンを通るわけではありません)。

編集モードショートカットのJS駆動キーダウンコールバック。火だけ 主張するキー(キー+修飾子状態によるJSシムフィルター)に対して、 つまり、この方法自体をゲート化する必要はありません。 逃げる — (ワイヤーが繋がれているなら)ImageViewer.OnCancelを呼び起こす。 エントリー — もし作物があれば、その選択を「作物」としてコミットしてください ≥ 5×5;そうでなければ、汚い場合はImageViewer.OnSaveを呼び出してください。 + / = / - / _ — ズームイン / アウト。 0 — ズーム+パンをアイデンティティにリセットします。 削除/ バックスペース — 選択を消す。 矢印キー — 選択ボタンを1ポイント(Shiftで10ポイント)押します。

ホイールズームコールバック — JSは各スクロールティック(deltaY)と カーソルがコンテナセンターからずれています。アンカーズーム数学は以下の通りです Reactの:pan_new = (1 − r) ·カーソルレル + r ·pan_prev r = zoom_new / zoom_prev。カーソルを同じ画像のローカルに保つ ズームステップの向こう側を指さします。

表示画像を変えずにビューアをクリーンにマークします。その後の使用 セーブ成功:切り取ったバイトが保存されたバージョンとなり、今後は 変化はこの状態と照らして評価されるべきです。表示を元に戻すために 画像を元の ImageViewer.Source にし、汚れをクリアし、リセットを使います ツールバーボタンやアップデート ImageViewer.Source。

ローカルクロップオーバーレイのみをドロップし、元のものに戻します ImageViewer.Source。回転やフリップは使用者の位置に留まります。 もし前回のセーブ以降に変わったなら、 ImageViewer.IsDirty 真実であり続けてください。ツールバーのリセットボタン(または更新)を使ってください ImageViewer.Source)完全な改宗。