Question

想象一下，我在文档中附加了以下元素：

<html>
  <head>
    <style>
      #resizable {
       position: absolute;
       top: 30px;
       left: 30px;
       background: url(http://www.some243x350image.jpg) no-repeat;
       height: 243px;
       width: 350px;
       background-size: contain;
      }
    </style> 
  </head>
  <body>
    <div id="resizable"></div>
  </body>
</html>

我希望能够按比例调整上面的div，没有任何最大/最小高度/宽度限制。

以下是我编写的代码（工作示例：http://jsfiddle.net/7wYAh/），但它有两个主要错误：

1。 div的高度和宽度不会按比例变化（即使图像显然也是如此，因为我正在使用background-size: contain;。

2。元素被“抓住”时，元素的高度/宽度会突然增加/减少。

我没有使用宽高比变量。我正在做的是我随机选择是否每次都根据高度或宽度调整大小。因此，如果高度发生变化，那么我将根据高度增加调整宽度。反之亦然。那不成比例吗？这意味着如果高度增加2px，我也会将宽度增加2px，反之亦然。

寻找我的问题的答案我发现this post但我不想使用宽度/高度限制，我不明白比率的使用。

所以你能发现这段代码有什么问题吗（假设当鼠标抓住div的右下角时elementCanBeResized设置为true）：

工作示例：http://jsfiddle.net/7wYAh/

var $element = $('#resizable');
var previousResizeX, previousResizeY, resizeDistanceX, resizeDistanceY;
$(window).mousemove(function (mouseCoordinates)
{
  if (!elementCanBeResized)
  {
    return;
  }
  if (typeof previousResizeX === 'undefined')
  {
    previousResizeX = mouseCoordinates.pageX;
    previousResizeX = mouseCoordinates.pageY;
  }
  else
  {
    var newResizeX = mouseCoordinates.pageX;
    var newResizeY = mouseCoordinates.pageY;

    // resizing proportionally based on width change
    if (newResizeX !== previousResizeX)
    {
      resizeDistanceX = newResizeX - previousResizeX;
      previousResizeX = newResizeX;
      previousResizeY += resizeDistanceX;
      newWidth = $element.width() + resizeDistanceX;
      newHeight = $element.height() + resizeDistanceX;
    }

    // resizing proportionally based on height change
    else if (newResizeY !== previousResizeY)
    {
      resizeDistanceY = newResizeY - previousResizeY;
      previousResizeY = newResizeY;
      previousResizeX += resizeDistanceY;
      newHeight = $element.height() + resizeDistanceY;
      newWidth = $element.width() + resizeDistanceY;
    }

    $element.css({
     height: newHeight,
     width: newWidth
    });
  }
});

Answer 1

我假设你想通过点击某个点然后'拖动'鼠标来调整大小。好。

问题2：您正在存储您在previousResizeX中单击的位置。但是在按钮释放后我没有看到你清理它的价值。如果您没有再次将previousResizeX设置为'undefined'，则下次单击时会出现宽度/高度的“突然变化”，因为newResizeX将是您第一次按下鼠标的位置与其当前位置之间的距离。 问题1：每次增加相同像素数的宽度/高度，这就是为什么你的div不会按比例调整大小的原因。我解释一下：如果你从一个200 x 100的div开始，它的宽度是高度的两倍。当您复制其宽度时，您必须复制高度。但是如果你将鼠标拖动100px，你将以（200 + 100）x（100 + 100）div结束，即300 x 200.图像的宽度不再是其高度的两倍。您需要在开始时计算宽度和高度之间的比率：

var ratio = $element.height() / $element.width();
...
resizeDistanceX = newResizeX - previousResizeX;
resizeDistanceY = resizeDistanceX * ratio;
previousResizeX = newResizeX;
previousResizeY += resizeDistanceY;
newWidth = $element.width() + resizeDistanceX;
newHeight = $element.height() + resizeDistanceY;
...
//For Y
resizeDistanceY = newResizeY - previousResizeY;
resizeDistanceX = resizeDistanceY / ratio;
previousResizeY = newResizeY;
previousResizeX += resizeDistanceX;
newHeight = $element.height() + resizeDistanceY;
newWidth = $element.width() + resizeDistanceX;

请记住在释放鼠标后设置resizeDistanceX和resizeDistanceY。希望这会对你有所帮助。

JS功能调整背景比例不一致

1 个答案: