画布中最佳正方形大小的算法

Question

I'm looking to create a grid of equally-sized squares whose size are based on the area of the canvas. I'd like the squares to take the maximum area possible in the container.

I know I can find the area of the canvas by:

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

If I divide that by the number of squares, I get a result, but I'm unsure what to do next. Maybe this isn't the way to go about it...

Here is where I am with the code. I've brute forced the square size and it works for the first three values, but I'm not able sure how to maximize the size when more squares can be fit in subsequent rows. How can I determine the optimal square size? Thank you!

EDIT: There can be empty space as all squares should be the same, maximum size.

 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,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,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>

Here is an illustration of the desired result of the program with square count values 1-5:

Answer 1

Interesting problem, which is more math related than programming related...

The crux of the problem is determining the appropriate number of rows and columns of squares that maximize area utilization. Towards that end, the algorithm below performs the following steps, using 19 squares in a 100 x 50 region as an example...

• Determine the maximum possible size of the square. This is done by taking the total area of the region and dividing by the number of required squares. Eg, sqrt( 100 x 50 / 19 ) or 16.222 . That is, if you could use the total area of 5000, and 19 squares fit perfectly into that area, then the squares will be 16.222 x 16.222 in dimension.
• Determine the number of times that the maximum possible square will fit into the region's width and height. Since this will very likely not be an integral number of times, we must therefore take the possible range of times. Eg, the maximum possible square can fit into the width 100 / 16.222 or 6.1644 times. Thus, the optimal number of possible cols will range from 6 to 7 columns. Likewise, the fit for the height is 50 / 16.222 or 3.0822 times for a possible optimal row range of 3 to 4 rows.
• Then, the algorithm simply loops through the possible combinations of rows and cols, ensuring that the number of rows * cols is greater than or equal to the number of squares. Eg, 6 * 3 is only 18, so is not a valid option, whereas 6 * 4 , 7 * 3 , and 7 * 4 are all greater than 19, so qualify as candidates.
• As it is, the algorithm returns all these candidates with the row and col counts, along with the dimension of the square and the calculated use of space. The code sample shows a means of extracting the maximum area utilization using the reduce function.

 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, 100, 50) ); console.log( 'Squares 19: ' ); console.log( maximizeSquaresInRegion( 19, 100, 50) ); console.log( 'Squares 94: ' ); console.log( maximizeSquaresInRegion( 94, 100, 50) ); console.log( 'Squares 19 Best Fit: ' ); console.log( maximizeSquaresInRegion( 19, 100, 50).reduce(( bf, opt ) => bf.area > opt.area ? bf : opt) );

EDIT : Based on anomaly whereby maximum possible square size fits perfectly into the regions width or height, the resulting range being checked is only one value for that dimension. Eg, a region of 320 x 180 with a fit for 9 squares results in a maximum possible square size of 80 x 80, which goes evenly into 320 by 4 times. This results in a range change for the width of only 4 to 4 columns. The adjustment to the code makes this check 4 to 5 columns.