Question

我正在编写一个允许用户移动和调整div大小的小脚本。我需要保持纵横比，我的逻辑不起作用。

function resizing() {
    var currentHeight = elmnt.offsetHeight;
    var currentWidth  = elmnt.offsetWidth;
    var newHeight     = currentHeight + (event.pageY - currentY);
    var newWidth      = currentWidth  + (event.pageX - currentX);
    var ratio         = currentWidth  / currentHeight;

    if(ratio < 1) {
        newwidth = parseInt(newHeight * ratio);
    }
    else {
        newheight = parseInt(newWidth / ratio);
    }

    elmnt.style.height = newHeight + "px";
    elmnt.style.width  = newWidth  + "px";

    currentY = event.pageY;
    currentX = event.pageX;
}

脚本有点工作。但不幸的是，它并没有保持宽高比完全正确。有时，当我仅重新调整horizontyl时，旧的高度保持不变，有时它会起作用，但是一个长度会被调整大小并有一点偏移量。

当我上下调整大小时，长度变得越来越平等，当它是正确的方格时，一切都是正确的。

我可以解决我的问题吗？我的谬误在哪里？！

Answer 1

我可以做到。

非常感谢你！

我的问题是我首先要跟踪哪个轴有更多变化。我没有认识到的第二个问题是，我对舍入问题存在 BIG 问题。

使用jQuery设置css大小时，它会进行舍入。我在每次活动中都采用了比率计算的高度。

这意味着不准确性变得越来越糟糕。现在我考虑到了这一点，并找到了一种方法，让这个工作非常好。

我现在直接在onclick上执行此操作，只需更新它们而不是从元素中获取：

currentHeight = $("#dragger").height();
currentWidth = $("#dragger").width();

再次感谢您的帮助！这是我的最终结果： http://jsfiddle.net/julian_weinert/xUAZ5/30/

Answer 2

我认为你的比例是错误的。

你需要通过取旧宽度并除以新宽度或旧高度/新高度来计算。

e.g。

var ratio = newWidth / currentWidth;
newHeight = currentHeight * ratio;

如果它是正在变化的高度，请更改它。

Answer 3

你必须这样做，得到最小比例（比率）。下面的代码是我的PHP脚本的一部分，但很容易翻译成JS。 $iSrc =来源和$iDest是目标MAX宽度/高度。

你的问题是你得不到合适的比例。定义比率的第一行是您的问题将得到解决的地方。它获得宽度或高度的最低比率。你只需要宽度/高度，忘记高度/宽度。这就是垂直缩放不正确的原因。

$scale = min($iDestWidth/$iSrcWidth, $iDestHeight/$iSrcHeight);

    if($scale >= 1){
        $iDestHeight = $iSrcHeight;
        $iDestWidth = $iSrcWidth;
    }else{          
        $iDestWidth = floor($scale*$iSrcWidth);
        $iDestHeight = floor($scale*$iSrcHeight);
    }

Answer 4

用以下内容替换if（比率＆lt; 1）块。 offsetx和offsety与您的（event.pageX - currentX）和（event.pageY - currentY）有关：

if (Math.abs(offsetx) > Math.abs(offsety)) {
    ratio = currentHeight/currentWidth;
    newHeight = currentHeight + (offsetx * ratio);
    newWidth = currentWidth + offsetx;        
} else {
    ratio = currentWidth/currentHeight;
    newHeight = currentHeight + offsety;
    newWidth = currentWidth + (offsety * ratio);  
}

这里是整个行动的快速解释：http://jsfiddle.net/8TWRV/

JavaScript div使用宽高比调整大小

4 个答案: