円内に矩形を整える

Question

私は円があり、この円を長方形で埋める必要があります。次のようなもの：

ここには何かのアルゴリズムがありますか？ 私はfabric.jsを描画に使用します。これはplaygroundです。しかし、問題はおそらく数学のことです。私はいくつかの公式があるはずだと思います。

Answer 1

私は「十分に近い」と考えています：半径から長方形の長さを減算し、その結果に2πを掛けます。それは内周です。これを矩形の幅で割って（そして切り捨てて）矩形の数を求めます。それを360°で割って、それを描画する角度を取得します。ここで

はデモです：http://jsbin.com/napecagado/edit?js,output

Answer 2

私はあなたが提供されたファイルJSBinを更新しました。私は多くの詳細でコードをコメントアウトしているので、ここで多く説明する必要はありません。

var canvas = new fabric.Canvas(document.querySelector('#my-canvas')); 

var circleRadius = 250; 
var boxHeight = 30; 
var boxWidth = 150; 

function createCircleAndBoxes(radius, boxHeight, boxWidth) { 
    var circle = new fabric.Circle({ 
    radius: circleRadius, 
    fill: '#f3aa25', 
    stroke: '#333' 
    }); 
    canvas.add(circle); 

    // Calculates the center of the circle 
    circle.left = (canvas.width - circle.width)/2; 
    circle.top = (canvas.height - circle.width)/2; 

    // The inner lines of the boxes make a circle 
    // Calculate the circumference of this circle. 
    // By dividing the height of the box by the calculated circumference 
    // We can get the number of boxes needed 
    var innerCircumference = 2 * Math.PI * (circleRadius - boxWidth); 
    var roughBoxCount = Math.floor(innerCircumference/boxHeight); 

    // Each box is placed exactly at the center of the circle 
    var calculatedTop = circle.top + (circle.height/2) - 1; 
    var calculatedLeft = circle.left + (circle.width/2) + 1; 
    // By changing the origin to a negative point away from the box, 
    // the box is translated. Also, all rotatopms are done from this point 
    // The trick however is that, the origin point is calculated 
    // as a percentage of the height and width. For instance, 0.5 means center 
    // Therefore, we align the origin point with the circle center and 
    // calculate the offset as a percentage 
    var calculatedOriginX = (boxWidth - circleRadius)/boxWidth; 
    var calculatedOriginY = (boxHeight/2)/boxHeight; 

    // Since we have the number of boxes needed, we can calculate 
    // what's the angle each box needs to be rotated 
    var calculatedAngle = 360/roughBoxCount; 

    // Combine all these, and you got your requirement 
    for(var i = 0; i<roughBoxCount; i++) {  
    var rect = new fabric.Rect({ 
     angle: calculatedAngle * i, 
     top: calculatedTop, 
     left: calculatedLeft, 
     centeredRotation: false, 
     originX: calculatedOriginX, 
     originY: calculatedOriginY, 
     width: boxWidth, 
     height: boxHeight, 
     fill: '#e3e3e3', 
     stroke: '#333' 
    }); 
    canvas.add(rect); 
    } 
} 

createCircleAndBoxes(circleRadius, boxHeight, boxWidth); 

この種の開発の鍵となる、翻訳、回転、中心点の計算について学びます。私のアプローチは上記の答えと 'user348173'で若干異なります。しかし、私は推測し、両方が

Updated JSBin