Question

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

从视觉上看，resizable元素是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/

似乎有些事情正在膨胀，无法弄明白，任何建议都值得赞赏。脚本之间可能存在小数位差异＆amp;浏览器？

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/

所有更新的工作示例

Answer 2

您的意思是使用+代替*吗？

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

Answer 3

通过设置margin-top和margin-left进行定位并将'top'和'left'属性设置为默认动画，我有点运气。

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

jQuery-UI可调整大小：与可调整大小的div按比例缩放所有的allResize元素

3 个答案: