javascript - 增加尺寸并保持正方形尺寸

Question

我需要在 Javascript 中以固定增量来增加盒子大小，但同时也要保持正方形大小。我认为应该有一个“简单”的数学函数，但我无法弄清楚。我尝试使用 pow() 和 sqrt() 以及长 if 语句，但似乎没有任何效果。

示例:假设我有一个 (WxH) 54 x 45 的盒子，我的增量是 10，我想增加高度(使用按钮)。正常增量为 10 时，高度将变为 55，但我希望它首先返回值 54，因此盒子变为正方形。一旦达到 54，我再次增加高度，它应该再次继续为 55。

1. 所以我的盒子尺寸为(宽x高)54 x 45
2. 用户点击“+”按钮增加高度
3. 盒子应变为(宽x高)54 x 54
4. 用户再次点击“+”按钮以增加高度
5. 盒子应变为(宽x高)54 x 55
6. 用户再次点击“+”按钮以增加高度
7. 盒子应变为(宽x高)54 x 65
8. 等等...

纵横比并不重要。

我希望有人能帮助我，或者至少为我指明正确的方向。谢谢!

Answer 1

pow、sqrt 等不会帮助你，你只需要做一个特殊的情况。像这样的事情:

var step = 10, squareCase = null;

function increaseWidth() {
  if (squareCase !== null) {   // we are currently at the square case
    width = squareCase + step; // resume from remembered
    squareCase = null;         // and leave the special case
  }
  else if (width < height && width + step > height) {
    squareCase = width;       // remember value so we can resume sequence
    width = height;           // do the square now
  }
  else {
    width = width + step;     // default case
  }
}

在编写相应的减量时，请记住，squareCase 变量包含增量之前的值，因此它应该包含减量情况下已减量的值。