javascript 正确地将矩形放置在圆内

bxgwgixi  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(150)

我正在尝试实现一个画布图像,其中将包含一个圆圈和圆圈内的一些矩形。圆圈将根据给定的直径(用户输入)生成,矩形将根据给定的高度和宽度(用户输入)生成。矩形的数量将根据下面所示的公式创建。
每个圆的矩形= d * pi *((d / 4 * S)-(1 / sqrt(2 * S)))d -圆直径S -矩形大小
对于一个300 px直径的圆,10 px宽,10 px高的矩形,圆内将有641个矩形。
但是我需要把矩形正确地放在圆的内部,就像下面这样。

50few1ms

50few1ms1#

你的函数d * pi * ((d / 4 * S) - (1 / sqrt(2 * S)))不起作用。
下面是通过函数drawBoxesInCircle将方框SQUARE_SIZE拟合到圆CIRCLE_RADIUS并将绘制的方框数输出到控制台的示例。

const CIRCLE_RADIUS = 150;
const SQUARE_SIZE = 10;

// cx cy are circle center
// rad is circle radius
// size is box size
function drawBoxesInCircle(cx, cy, rad, size) {
  var boxes = 0;
  var y = 0;
  for (y = 0; y < rad; y++) {
    const boxCount = ((rad * rad - (y + size) ** 2) ** 0.5) / size | 0;
    let i = 0;
    while (i < boxCount) {
       drawBox(cx + i * size,       cy + y,        size);
       drawBox(cx - (1 + i) * size, cy + y,        size);
       drawBox(cx + i * size,       cy - y - size, size);
       drawBox(cx - (1 + i) * size, cy - y - size, size);
       boxes += 4;
       i++;
    }
    y += size;
  }
  console.log("Box count = " + boxes);
}

const TAU = Math.PI * 2;
const ctx = canvas.getContext("2d");
canvas.width = CIRCLE_RADIUS * 2 + 2;
canvas.height = CIRCLE_RADIUS * 2 + 2;
ctx.fillStyle = "#ffdcc8";

function strokeCircle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r + 0.5, 0, TAU);
  ctx.stroke();
}
function drawBox(x, y, size) {
  ctx.beginPath();
  ctx.rect(x, y, size, size);
  ctx.fill();
  ctx.stroke();
}

strokeCircle(CIRCLE_RADIUS + 1, CIRCLE_RADIUS + 1, CIRCLE_RADIUS);
drawBoxesInCircle(CIRCLE_RADIUS + 1, CIRCLE_RADIUS + 1, CIRCLE_RADIUS, SQUARE_SIZE);
canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}
<canvas id="canvas"></canvas>

相关问题