あらすじ:
サイズ変更可能な要素を中央に配置して左右に拡大すると、マウスの動きの半分だけが拡大されているように見えます。
理由:
これは、オブジェクトが中央にあるために発生します。
質問:
マウスの動きと比較して、オブジェクトのサイズが変更される速度をどのように上げますか? 中央に配置された要素の場合、オブジェクトをマウス距離の 2 倍のサイズに拡大したいと思います。
サイズ変更可能な要素を中央に配置して左右に拡大すると、マウスの動きの半分だけが拡大されているように見えます。
これは、オブジェクトが中央にあるために発生します。
マウスの動きと比較して、オブジェクトのサイズが変更される速度をどのように上げますか? 中央に配置された要素の場合、オブジェクトをマウス距離の 2 倍のサイズに拡大したいと思います。
中央に配置されたDIVを考えると、私が考えることができる最善の方法は、コールバックで幅を設定することです。
$('#divID').resizable({
handles : 'e,w'
, resize : function (event,ui){
ui.position.left = ui.originalPosition.left;
ui.size.width = ( ui.size.width
- ui.originalSize.width )*2
+ ui.originalSize.width;
}
});
上記は、最終的な幅と元の幅の差を計算し、それを2倍して、元の幅に加算するだけです。
これがこれを行うための最良の方法かどうかはわかりません。オブジェクトに幅が2回設定されているので、私はそれが好きではありません。ある種の(xRate
またはX-Step
)および(yRate
またはY-Step
)オプションを受け入れ、それを_mouseDrag:
jQuery関数の一部に含めるのがより良い方法だと思います。
jQueryを編集せずにこれを行うには、サイズ変更可能_mouseDrag
な関数を上書きするプラグインを作成する必要があると思います。
より良い答えを受け入れます!:)
サイズ変更可能なものをどのように中央に配置するかはわかりませんが、このテストケースはうまく機能します。
本質的には、vol7ron と同様のことを行いますが、使用する割り当てが 1 つ少なく、計算が読みやすくなっています :D 冗談で、好きなものを選択してください。
ui.size.width += ui.size.width - ui.originalSize.width;