画布中最佳正方形尺寸的算法

如何解决画布中最佳正方形尺寸的算法

我正在寻找一个大小相等的正方形网格，其大小基于画布的面积。我希望正方形占据容器中可能的最大面积。

我知道我可以通过以下方式找到画布的区域：

area = canvas.width * canvas.height; // e.g. 640x360 = 230400
areaPerSquare = parseInt(area/squareCount); // e.g. with a shape count of 4,28800

如果我将其除以平方数，将得到结果，但不确定下一步该怎么做。也许这不是解决之道...

这是我使用代码的地方。我已经强行使用了正方形大小，并且它适用于前三个值，但是我不确定在后续行中可以容纳更多正方形时如何最大化大小。如何确定最佳正方形尺寸？谢谢！

编辑：由于所有正方形的大小均应相同，因此可能存在空白。

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var squareCountNum = document.querySelector("#squareCount");
var widthNum = document.querySelector("#width");
var heightNum = document.querySelector("#height");
var squareCount = squareCountNum.value;

squareCountNum.onchange = function(e)
{
    squareCount = e.target.value;
    draw();
}

widthNum.onchange = function(e)
{
    canvas.width = e.target.value;
    canvas.style.width = e.target.value + "px";
    draw();
}

heightNum.onchange = function(e)
{
    canvas.height = e.target.value;
    canvas.style.height = e.target.value + "px";
    draw();
}

function draw()
{  
  ctx.clearRect(0,canvas.width,canvas.height);
  let area = canvas.width * canvas.height;
  let areaPerSquare = parseInt(area/squareCount);
  let size = 100;
  if (squareCount == 1)
  {
    if (canvas.width > canvas.height)
    {
      size = canvas.height;
    } else {
      size = canvas.width;
    }
  } else {
    if (canvas.width > canvas.height)
    {
      size = canvas.width/squareCount;
    } else {
      size = canvas.height/squareCount;
    }
  }
  let row = 0;
  let currentIndex = 0;
  for (let i=0; i<squareCount; i++)
  {
    ctx.beginPath();
    if (currentIndex*size+size > canvas.width)
    {
      row++;
      currentIndex = 0;
    }
    ctx.rect(currentIndex*size,row*size,size,size); //how do I maximize size?
    ctx.fillStyle = "#"+Math.floor(Math.random()*16777215).toString(16);
    ctx.fill();
    ctx.closePath();
    currentIndex++;
  }
}

draw();

#canvas
{
  width: 320px;
  height: 180px;
  border: 1px solid rgba(0,0.2);
}

#squareCount
{
  margin-bottom: 20px;
}

<canvas id="canvas" width="640" height="360"></canvas>
<div><label>Square Count</label><input type="number" id="squareCount" value=1></input></div>
<div><label>Width</label><input type="number" id="width" value=320></input></div>
<div><label>Height</label><input type="number" id="height" value=180></input></div>

以下是平方数值为1-5的程序的预期结果的说明：

解决方法

有趣的问题，与编程相关的更多与数学相关...

问题的症结在于确定适当的行数和列数以最大化面积利用率。为此，下面的算法执行以下步骤，以100 x 50区域中的19个正方形为例...

确定正方形的最大可能大小。这可以通过计算区域的总面积并除以所需的正方形数来完成。例如sqrt( 100 x 50 / 19 )或16.222。也就是说，如果您可以使用5000的总面积，并且19个正方形完全适合该区域，那么正方形的尺寸将为16.222 x 16.222。
确定最大可能的正方形适合该区域的宽度和高度的次数。由于这很可能不是整数倍，因此我们必须采用可能的时间范围。例如，最大可能的平方可以适合宽度100 / 16.222或6.1644倍。因此，可能的cols的最佳数量为6到7列。同样，对于3到4行的最佳行范围，高度的适合度是50 / 16.222或3.0822倍。
然后，该算法仅循环遍历行和列的可能组合，确保rows * cols的数量大于或等于平方数。例如，6 * 3只有18，因此不是有效的选择，而6 * 4，7 * 3和7 * 4都大于19，因此有资格成为候选人。

reduce

function maximizeSquaresInRegion( squareCount,width,height ) {

  //
  // Calculate the maximum possible side of the square,assuming full
  // use of the area of the region.
  //
  let maxSqrSide = Math.sqrt( ( width * height ) / squareCount );
  
  // 
  // Using the maximum possible side of the square,let's determine the
  // low end and high end number of times it can squeeze into a particular
  // dimension.
  //
  let rowsLo = Math.floor( height / maxSqrSide );
  let rowsHi = rowsLo + 1;
  let colsLo = Math.floor( width / maxSqrSide );
  let colsHi = colsLo + 1;
  
  //
  // Okay,now that we have the possible range of number of times that
  // the square can fit into each dimension,let's loop through the 
  // combinations,finding all that meet the required squareCount and
  // calculating the area used.
  //
  
  let options = [];
  for ( let row = rowsLo; row <= rowsHi; row++ ) {
    for ( let col = colsLo; col <= colsHi; col++ ) {
      if ( squareCount <= row * col ) {
        //
        // First thing,find the minimum length of the side depending
        // on the fit by width or height.
        //
        let squareSideLen = Math.min( width / col,height / row );
        let area = Math.min( row * col,squareCount ) * squareSideLen * squareSideLen;
        options.push( {
          rows: row,cols: col,side: squareSideLen,area: area
        } );
      }
    }
  }
  
  return options;

}

console.log( 'Size: 100 x 50' );
console.log( 'Squares 4: ' );
console.log( maximizeSquaresInRegion( 4,100,50) );
console.log( 'Squares 17: ' );
console.log( maximizeSquaresInRegion( 17,50) );
console.log( 'Squares 19: ' );
console.log( maximizeSquaresInRegion( 19,50) );
console.log( 'Squares 94: ' );
console.log( maximizeSquaresInRegion( 94,50) );

console.log( 'Squares 19 Best Fit: ' );
console.log( maximizeSquaresInRegion( 19,50).reduce(( bf,opt ) => bf.area > opt.area ? bf : opt) );

编辑：根据异常情况，最大可能的正方形大小完全适合区域的宽度或高度，所检查的结果范围仅为该尺寸的一个值。例如，适合9个正方形的320 x 180区域会导致最大可能的正方形大小80 x 80，该大小均匀地变成320 x 4倍。这导致仅4到4列宽度的范围更改。通过调整代码，可以检查4到5列。

画布中最佳正方形尺寸的算法

如何解决画布中最佳正方形尺寸的算法

解决方法

相关推荐