JavaScript 画像拡大鏡 (ドラッグ アンド ドロップ、ズーム効果) ページ 1/4_JavaScript スキル

数日前、ふとレンズエフェクトを作りたいと思い立ち、「秘蔵」していたコードを見つけたので試してみることにしました。
前書き:
このプログラムは主に、レイヤーのドラッグ アンド ドロップ、レイヤーの拡大縮小、および画像の切り取り (プレビューを含む) の 3 つの部分に分かれています。
レイヤーのドラッグアンドドロップは非常に一般的な効果で、レイヤーの拡大縮小は少し難しく、画像の切り取りはまぶしく見えますが、原理も非常に簡単です。
しかし、実装の過程で、これまで知らなかったこともたくさん学びました。以下に説明しますので、皆さんもそこから何かを学んでいただければ幸いです。
原理:

[ドラッグ アンド ドロップ プログラム]

基本原理は非常に簡単です。知らない場合でも、関連するコードを見れば理解できます。 Yue RabbitとBlueDestinyの記事を参考にさせていただきました。

より便利な場所について話しましょう:

[範囲制限]

まず第一に、もちろん、ドラッグ アンド ドロップの範囲パラメーターがあります。これは、mxLeft (最小値) です。左の left 値)、mxRight (右の left の最大値)、mxTop (上の上の最小値)、mxBottom (下の上の最大値)。
次に、ドラッグ プログラム Move() でそれを超えているかどうかを確認します。超えている場合は、制限値に戻します:

コードをコピーします コードは次のとおりです:

if(this.Limit){
//余分な長さを取得します
var iRight = iLeft this._obj.offsetWidth - this .mxRight, iBottom = iTop this._obj.offsetHeight - this.mxBottom;
//ここでは、右下が最初に設定され、次に左上が設定されますが、不正確である可能性があります
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft)
if(this.mxTop > iTop) = this.mxTop;
}

[選択範囲の解放]
以前使用した方法は、ie の onselectstart と ff の MozUserSelect を設定することでした。しかし、BlueDestiny はこう言いました。 "user-select の使用は、event.preventDefault と同等になります。デフォルトのアクションを防止すると、特定の操作中にマウスアップが失われます。"
最良の方法は、ie および window.getSelection() に document.selection.empty() を使用することです。 ).removeAllRanges() (ff の場合)。
Move() に次のように追加できます。

window.getSelection && window.getSelection().removeAllRanges(); この書き方は Yue Rabbit のプログラムから学びました。
IE のマウス キャプチャにはこれがデフォルトで付属しているため (後述)、IE には必要ありません。
[マウス キャプチャ]

JS にこんな機能があるとは知りませんでした。使い方はとても簡単です:
キャプチャを設定: this.Drag.setCapture();
キャプチャをキャンセルします。 : this.Drag.releaseCapture()。
これが行うことは次のとおりです: 指定されたオブジェクトにマウス キャプチャを設定します。このオブジェクトは、現在のアプリケーションまたはシステム全体に対するすべてのマウス入力を受け取ります。
それでもわからない場合は、ドラッグ＆ドロップ時にブラウザの外にマウスをドラッグしてみると、ドラッグが継続されることがわかります。
マウスキャプチャがない場合は無効になります。
ただし、mouseup はブラウザの外部でトリガーすることはできませんが、代わりに losecapture イベントを使用することもできます:

addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag。 setCapture();
ff ウィンドウにぼかしを追加するときにイベントを停止するプログラムは、alt タブによるマウスアップの喪失を検出するためであるとのことでした。

このドラッグ アンド ドロップ プログラムは完了です。