9

我有一个可调整大小的 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/

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

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

您的意思是使用+而不是*？

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 回答
0

我通过设置 margin-top 和 margin-left 来定位并且将 'top' 和 'left' 属性保留为动画的默认值来获得一点运气。

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

于 2011-11-10T12:26:21.287 回答