4

我会尽量用文字说清楚：我想知道是否有办法使用 jquery-ui-resizable 来同时调整 4 个边上的对象的大小，以便对象的中心保持在相同的位置。

这是沙箱http://jsfiddle.net/V79Ge/

所以，它很像 aspectRatio=true，但是当我从一侧调整对象的大小时，它会控制另外 3 侧

谢谢你的线索！

4

5 回答 5

10

这是您想要的效果吗：jsFiddle 示例。

jQuery：

$('#resizeMe').resizable({
    aspectRatio: true,
    resize: function(event, ui) {
        $(this).css({
            'top': parseInt(ui.position.top, 10) + ((ui.originalSize.height - ui.size.height)) / 2,
            'left': parseInt(ui.position.left, 10) + ((ui.originalSize.width - ui.size.width)) / 2
        });
    }
});

编辑：更新代码和 jsFiddle 以使用 ui.position 和 ui.originalSize。

于 2012-03-27T15:47:23.660 回答
1

玩了一下你的沙箱并得到了这个。

http://jsfiddle.net/V79Ge/17/

$('#resizeMe').resizable({
    aspectRatio: true,
    resize: function(event, ui) {
        $(this).offset({ top: (ui.originalSize.height-ui.size.height)/2,left:(ui.originalSize.width-ui.size.width)/2});
    }
});
于 2012-03-27T15:45:47.137 回答
0 
      $(".nodecontainer").each(function () {
            $(this).parent().attr('style', $(this).attr('style'));
            $(this).spectrum({
                showPalette: true,
                change: function (color) {
                    $(this).parent().css('background-color', color.toHexString());
                },
                palette: [
                    ['black', 'white', 'blanchedalmond'],
                    ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
                ]
            })
        });;
        $('.nodecontainer').each(function () {
            $(this).resizable({
                alsoResize: $(this).parent(),
                resize: function (e, ui) {
                    $(this).css("top", 0);
                    $(this).css("left",0);
                    $(this).css("position","relative");
                }
            });
        });
于 2014-03-26T14:31:28.007 回答
0

手柄可以是你需要的吗？

http://jsfiddle.net/V79Ge/1/

然后，您只需将视觉反馈添加到盒子的侧面。

于 2012-03-27T15:27:05.900 回答
0

我做了一些更新 j08691 的例子。现在它也适用于西北手柄。

http://jsfiddle.net/j08691/V79Ge/19/

$('#resizeMe').resizable({
aspectRatio: true,
handles: 'all',
resize: function(event, ui) {
    var posTop = parseInt(ui.position.top, 10);
    var posLeft = parseInt(ui.position.left, 10);
    var oPosTop = parseInt(ui.originalPosition.top, 10);
    var pPosLeft = parseInt(ui.originalPosition.left, 10);
    if(posTop == oPosTop && posLeft == pPosLeft)
    {
        $(this).css({
            'top': posTop + ((ui.originalSize.height - ui.size.height)) / 2,
            'left': posLeft + ((ui.originalSize.width - ui.size.width)) / 2
        });
    }
    else {
        var width = ui.size.width;
        var height = ui.size.height;
        var oWidth = ui.originalSize.width;
        var oHeight = ui.originalSize.height;
        $(this).css({                   
            'width': width + (width - oWidth),
            'height': height + (height - oHeight)
        });                
    }
}});

它还需要更多的发展。不适用于所有手柄。

于 2013-07-11T19:12:06.353 回答