javascript - jQuery-UI 可调整大小 : scale all alsoResize elements in proportion with resizable div

Question

我有一个可调整大小的 div，它位于已设置为 alsoResize 的一系列元素之上。

在视觉上，可调整大小的元素是 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/

有些东西似乎在膨胀数字并且无法完全弄清楚，任何建议表示赞赏。脚本和浏览器之间的小数位可能存在差异？

Answer 1

也许你需要重新考虑结构..

您可以将 .lyr 元素插入到 .resizer 元素中，并以百分比位置将它们放置在其中。这样它们会在容器发生变化时自动调整大小尺寸。 (插件不必处理它们)

演示 http://jsfiddle.net/SrPhA/65/

---

评论后更新

要将 resizer 与 alsoResize 元素分离，您需要在计算中考虑一些因素。

• 首先，您需要使用起始尺寸/位置而不是元素的当前尺寸，因此请使用 start.width .height 等。
• 对于定位，您需要将元素平移到原点(关于与 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/