在子矩形类别中拆分矩形

Question

给定一个矩形，我想将其拆分为给定数量的 n 个子矩形，其中：

• a 是应具有已定义 z 小区域的子矩形的数量
• b 是应具有已定义 y MEDIUM 区域的子矩形的数量
• c 是应具有已定义 x BIGGER 区域的子矩形的数量 也许我应该能够定义 d 和 e 。但是，让我们暂时离开它们吧。

“定义区域”是指几何区域应该相同，但矩形可以有不同的形状。 请问..您建议在这种情况下应用哪种算法。

我应该有这样的伪代码：

RectBoundaries[] function getRectangles(screenRectangle, amountOfRectangleCategories, amountOfRectanglesPerCategory[]) {
   function1 => getRectanglesForCategory1(amountOfRectanglesPerCategory[0], screenRectangle)
   function2 => getRectanglesForCategory2(amountOfRectanglesPerCategory[1], screenRectangle)
   function3 => getRectanglesForCategory3(amountOfRectanglesPerCategory[2], screenRectangle)

   return function1 + function2 + function3;
}

编辑： 如何将一个矩形拆分为多个（定义数量）递减的较小矩形类别。

Answer 1

根据您的问题，我了解您首先将主要区域分为 3 个区域。一个大的，一个中的，一个小的。鉴于此，我在 Javascript 中做了一个小算法，希望它能解决您的问题

let canvas = document.getElementById("output");
let ctx = canvas.getContext('2d');
ctx.strokeStyle = 'rgb(255, 255, 255)';

function draw(rect) {
  ctx.rect(rect[0], rect[1], rect[2], rect[3]);
  ctx.stroke();
}

function splitArea(rect, nbRect) {
  let [nbColumns, nbLines] = getBestRatio(nbRect);
  let x=rect[0];
  let y=rect[1];
  let width = rect[2]/nbColumns;
  let height = rect[3]/nbLines;
  let result = new Array();

  
  for(let i=0; i<nbLines; i++) {
    for(let j=0; j<nbColumns; j++) {
      result.push([x+j*width, y+i*height, width, height]);
    }
  }
  
  return result;
}

function getBestRatio(nb) {
  for(let i=Math.round(Math.sqrt(nb)); i>0; i--) {
    if(nb%i==0) {
      return [i, nb/i];
    }
  }
}

//main rectangle
let rect = [10, 10, 280, 280]; //x, y, width, height

// 3 differents area
let bigArea = [rect[0], rect[1], rect[2], rect[3]*2/3]; // 2∕3 area
let mediumArea = [rect[0], rect[1]+rect[3]*2/3, rect[2]*2/3, rect[3]*1/3]; // 2/3 * 1/3 area
let smallArea = [rect[0]+rect[2]*2/3, rect[1]+rect[3]*2/3, rect[2]*1/3, rect[3]*1/3]; // 1/3 * 1/3 area

draw(bigArea);
draw(mediumArea);
draw(smallArea);

splitArea(bigArea, 6).forEach(area => draw(area));
splitArea(mediumArea, 12).forEach(area => draw(area));
splitArea(smallArea, 3).forEach(area => draw(area));

<canvas id="output" height="300px" width="300px" style="background-color: grey">