9

alsoResize に設定された要素の選択の上に配置されたサイズ変更可能な div があります。

視覚的には、サイズ変更可能な要素は alsoResize 要素の境界ボックスです。

サイズ変更可能な div に比例して alsoResize 要素のサイズを変更できるようにしたいと考えています。UI のデフォルトの動作では、サイズ変更時に各要素の左と上の位置が固定されます。

http://jsfiddle.net/digitaloutback/SrPhA/2/

しかし、各 AR 要素の左と上を調整して、サイズが変更されたときにバウンディング ボックスに合わせて拡大縮小したいと考えています。

alsoResize プラグインを変更することで、これはそれほど面倒ではないだろうと最初に考えました。これは、サイズ変更に追加したものです: _alsoResize:

// Get the multipliers
var scaleX = self.size.width / os.width;
var scaleY = self.size.height / os.height;

newElW = ( parseInt(el.css('width')) * scaleX );
newElH = ( parseInt(el.css('height')) * scaleY );
newElL = ( parseInt(el.css('left')) * scaleX );
newElT = ( parseInt(el.css('top')) * scaleY );

el.css({ width: newElW, height: newElH, left: newElL, top: newElT });

ご覧のとおり、ボックスは多少遅れています。

http://jsfiddle.net/digitaloutback/SrPhA/4/

何かが数字を膨らませているようで、それを完全に把握することはできません。スクリプトとブラウザの間で小数点以下の桁数が異なる可能性がありますか?

4

3 に答える 3

6

構造を考え直す必要がありそうです。

.lyr要素を要素内に挿入し.resizer、パーセント位置で要素内に配置することができます..この方法では、コンテナのサイズが変更されている間、自動的にサイズが変更されます。(プラグインはそれらを処理する必要はありません)

http://jsfiddle.net/SrPhA/65/のデモ

コメント後に更新

resizer要素からを切り離すalsoResizeには、計算のためにいくつかのことを考慮する必要があります。

  • まず、現在の要素ではなく開始寸法/位置を使用する必要があるため、start.width .heightetc. を使用します。
  • 配置のために、要素を原点に移動する必要があります（からの距離に関してresizer）左/上をスケーリングし、元の場所に再移動します..

最終的な計算は

newElW = start.width * scaleX;
newElH = start.height * scaleY;
newElL = ((start.left - op.left) * scaleX) + op.left;
newElT = ((start.top  - op.top ) * scaleY) + op.top ;

リサイザーの上部または左側をドラッグして要素をスケーリングした場合に対処するには、さらに調整が必要です。

http://jsfiddle.net/gaby/SrPhA/171/のデモ

最新のアップデート

すべての方向のスケーリングを処理するには、これらのヘルパーを使用します。

utils: {
        west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left},
        east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;},
        south: function(start, op, scale, delta){return ((start.top  - op.top ) * scale) + op.top; },
        north: function(start, op, scale, delta){return ((start.top  - op.top ) * scale) + op.top + delta.top; }
    }

http://jsfiddle.net/gaby/SrPhA/324/のすべての更新を含む作業例

于 2011-11-10T10:59:58.890 に答える
0

margin-top と margin-left を配置用に設定し、アニメーション用に 'top' と 'left' 属性をデフォルトのままにしておくことで、少し運が良かったです。

http://jsfiddle.net/SrPhA/97/

于 2011-11-10T12:26:21.287 に答える
0

+の代わりに使うつもりだったの*ですか？

newElW = (parseInt(el.css('width')) + scaleX);
newElH = (parseInt(el.css('height')) + scaleY);
newElL = (parseInt(el.css('left')) + scaleX);
newElT = (parseInt(el.css('top')) + scaleY);
于 2011-11-10T11:02:14.903 に答える