0

我正在编写一个允许用户移动和调整 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;
}

脚本类型的作品。但不幸的是，它不能保持纵横比完全正确。有时，当我只调整水平线的大小时，旧的高度保持不变，有时它会起作用，但是一个长度会被调整大小并有一点偏移。

当我再次上下调整大小时，长度变得越来越相等，当它是一个合适的正方形时，一切都是正确的。

如何解决我的问题？我的谬误在哪里？！

4

4 回答 4

1

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

您需要通过取旧宽度并除以新宽度或旧高度/新高度来计算这一点。

例如

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

改变它是否是高度正在改变。

于 2013-01-30T19:10:43.417 回答
1

我可以的。

非常感谢！

我的问题是我首先必须跟踪哪个轴有更多的变化。我没有意识到的第二个问题是，我在舍入问题上遇到了很大的问题。

使用 jQuery 设置 css 大小时，它会四舍五入。我为每一个事件计算比率的高度。

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

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

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

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

于 2013-01-31T17:40:12.400 回答
0

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

你的问题是你没有得到正确的比例。定义比率的第一行是解决问题的地方。它获得宽度或高度的最低比率。你只做宽度/高度并忘记高度/宽度。这就是垂直缩放不正确的原因。

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

    if($scale >= 1){
        $iDestHeight = $iSrcHeight;
        $iDestWidth = $iSrcWidth;
    }else{          
        $iDestWidth = floor($scale*$iSrcWidth);
        $iDestHeight = floor($scale*$iSrcHeight);
    }
于 2013-01-30T19:11:59.030 回答
0

用以下内容替换您的 if(ratio < 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);  
}

这是整个操作的快速jsfiddle：http: //jsfiddle.net/8TWRV/

于 2013-01-31T01:02:22.450 回答