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

Question

我有一个可调整大小的div,它位于已设置为alsoResize的元素集上.

在视觉上,可调整大小的元素是alsoResize元素的边界框.

我希望能够按可调整大小的div的比例调整alsoResize元素的大小.UI的默认行为使每个元素在调整大小时具有固定的左侧和顶部位置:

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

但我想调整每个AR元素的左侧和顶部,以便在调整大小时使用边界框进行缩放.

我首先想到通过改变alsoResize插件不会太麻烦.这是我添加到resize的内容:_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/上所有更新的工作示例