JavaScriptピクチャー拡大鏡(ドラッグ＆ドロップ、ズーム可能効果)1/4ページ
2066 ワード
先日突然レンズの効果を作りたいと思って、突然この効果を思い出して、そこでその年の“秘蔵”のコードを探し出して望みを味わうことを决めました.
前言:
このプログラムは主に3つの部分に分けられます:レイヤのドラッグ&ドロップ、レイヤのスケール、画像の切断(プレビューを含む).
その中で、レイヤのドラッグ&ドロップはよくある効果で、レイヤのスケールは少し難しく、画像のカットは実際には原理も簡単です.
でも実现していくうちに、今まで知らなかったこともたくさん勉强になりました.
原理:
【ドラッグ＆ドロッププログラム】
基本原理は簡単で、知らないことはコードを見ればわかりますが、その中で越兎とBlueDestinyの関連記事を参考にしました.
次に、役に立つ点を説明します.
【範囲制限】
まず、ドラッグアンドドロップ範囲パラメータはもちろん、mxLeft(左のleft最小値)、mxRight(右のleft最大値)、mxTop(上のtop最小値)、mxBottom(下のtop最大値)です.
そしてドラッグプログラムMove()で超えているかどうかを見て、超えている場合は限界値に戻せばいいです.
【解放選択】
私が以前から使っていた方法はieのonselectstartとffのMozUserSelectを設定することで、
しかし、BlueDestinyは「user-selectを使用するとevent.preventDefaultに相当します.デフォルトの動作をブロックすると、いくつかの操作でmouseupが失われます」と話しています.
最善の方法はieがdocumentを使うことだ.selection.empty()、ff用window.getSelection().removeAllRanges().
Move()には次の項目を追加できます.
window.getSelection && window.getSelection().removeAllRanges();この書き方はウサギを越えるプログラムから学んだものです.
ieのマウスキャプチャのデフォルト(以下)はこれを持っているので、ieは使いません.
【マウスキャプチャ】
以前はjsにこれがあることを知らなかったので、使いやすいです.
キャプチャの設定:this.Drag.setCapture();
キャプチャ解除:this.Drag.releaseCapture().
マウスのキャプチャを指定したオブジェクトに設定する役割を果たします.このオブジェクトは、現在のアプリケーションまたはシステム全体に対してすべてのマウス入力を受信します.
まだわからない場合は、ドラッグ&ドロップしてみてブラウザの外にマウスをドラッグすると、ドラッグが続いていることに気づきます.
このマウスキャプチャがなければ無効になります.
ただし、ブラウザの外ではmouseupはトリガーできませんが、losecaptureイベントで代用することもできます.
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
プログラムでffのwindowにblurを追加したときに停止したイベントは、ウサギがalt+tabによるmouseupの紛失を検出できるように、完璧に、加えたと言っています.
これでドラッグアンドドロッププログラムが完了します.
1 2 3 4次ページ全文を読む
前言:
このプログラムは主に3つの部分に分けられます:レイヤのドラッグ&ドロップ、レイヤのスケール、画像の切断(プレビューを含む).
その中で、レイヤのドラッグ&ドロップはよくある効果で、レイヤのスケールは少し難しく、画像のカットは実際には原理も簡単です.
でも実现していくうちに、今まで知らなかったこともたくさん勉强になりました.
原理:
【ドラッグ＆ドロッププログラム】
基本原理は簡単で、知らないことはコードを見ればわかりますが、その中で越兎とBlueDestinyの関連記事を参考にしました.
次に、役に立つ点を説明します.
【範囲制限】
まず、ドラッグアンドドロップ範囲パラメータはもちろん、mxLeft(左のleft最小値)、mxRight(右のleft最大値)、mxTop(上のtop最小値)、mxBottom(下のtop最大値)です.
そしてドラッグプログラム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) iLeft = this.mxLeft;
if(this.mxTop > iTop) iTop = this.mxTop;
}
【解放選択】
私が以前から使っていた方法はieのonselectstartとffのMozUserSelectを設定することで、
しかし、BlueDestinyは「user-selectを使用するとevent.preventDefaultに相当します.デフォルトの動作をブロックすると、いくつかの操作でmouseupが失われます」と話しています.
最善の方法はieがdocumentを使うことだ.selection.empty()、ff用window.getSelection().removeAllRanges().
Move()には次の項目を追加できます.
window.getSelection && window.getSelection().removeAllRanges();この書き方はウサギを越えるプログラムから学んだものです.
ieのマウスキャプチャのデフォルト(以下)はこれを持っているので、ieは使いません.
【マウスキャプチャ】
以前はjsにこれがあることを知らなかったので、使いやすいです.
キャプチャの設定:this.Drag.setCapture();
キャプチャ解除:this.Drag.releaseCapture().
マウスのキャプチャを指定したオブジェクトに設定する役割を果たします.このオブジェクトは、現在のアプリケーションまたはシステム全体に対してすべてのマウス入力を受信します.
まだわからない場合は、ドラッグ&ドロップしてみてブラウザの外にマウスをドラッグすると、ドラッグが続いていることに気づきます.
このマウスキャプチャがなければ無効になります.
ただし、ブラウザの外ではmouseupはトリガーできませんが、losecaptureイベントで代用することもできます.
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
プログラムでffのwindowにblurを追加したときに停止したイベントは、ウサギがalt+tabによるmouseupの紛失を検出できるように、完璧に、加えたと言っています.
これでドラッグアンドドロッププログラムが完了します.
1 2 3 4次ページ全文を読む