javascript - 四角形の領域に円を計算して配置する方法は?

Question

キャンバス領域にグラフを描画しようとしています。私の問題は次のとおりです...

1 ～ 4 個 (またはそれ以上) の円を描きます。キャンバスのサイズは 500 x 400 px のようです。各円の最大半径を計算してすべてをこのキャンバスに配置し、各円の位置 (中心 x/y) を取得するにはどうすればよいですか? では、各円は、互いにある程度の余裕を持って領域に最適に配置できますか?

ここに私が何を意味するかを示すいくつかの例の画面があります...

どうもありがとう！

Answer 1

使用できる最大半径を計算するには

    var numberOfSections = 4;
    var width = 500;
    var height = 400;
    var R = Math.sqrt((width * height) / numberOfSections) / 2

    var MX = Math.round(width / (R * 2)); // max amount of squares that can fit on the width
    var MY = Math.round(height / (R * 2)); // max amount of squares that can fit on the height

var skipLast = 0;
var numOfCalculatedCircles = MX*MY;
if(numOfCalculatedCircles != numberOfSections) {

    if(numOfCalculatedCircles < numberOfSections) {
        console.log('numOfCalculatedCircles',numOfCalculatedCircles);
        MX = MX + Math.ceil((numberOfSections - numOfCalculatedCircles)/MY);
        if(MX*MY != numberOfSections) {
            skipLast = Math.abs(MX*MY - numberOfSections);
        }
    } else {
        skipLast = numOfCalculatedCircles - numberOfSections;;
    }

    console.log('MX*MY',MX*MY);
}
// recalculate the radius for X
if (R * 2 * MX > width) {
    R = (width/2) / MX;
}

// recalculate the radius for Y
if (R * 2 * MY > height) {
    R = (height/2) / MY
}

X と Y のマージンを計算します。

    var circlesWidth = R * 2 * MX;
    var circlesHeight = R * 2 * MY;

    var marginX = 0;
    var marginY = 0;
    if (circlesWidth < width) {
        marginX = (width - circlesWidth) / 2
    }
    if (circlesHeight < height) {
        marginY = (height - circlesHeight) / 2
    }

その後、中心を計算できます。

var RY = marginY + R;
var radiusPadding = 10;

for (var i = 0; i < MY; i++) {
    var RX = marginX + R;
    for (var j = 0; j < MX; j++) {
        if(i === MY - 1) {
          if(j === MX - skipLast) {
            break;
          }
        }
        canvas.drawArc({
            fromCenter: true,
            strokeStyle: 'red',
            strokeWidth: 1,
            start: 0,
            end: 360,
            radius: R - radiusPadding,
            x: RX,
            y: RY
        });

        RX += 2 * R;
    }

    RY += 2 * R;
}

お役に立てれば。

更新: まだ不完全ですが、この特定の例では機能する可能性があります: http://jsfiddle.net/dhM96/4/

Answer 2

あなたが尋ねているナップザックの問題は解決が難しいです。あなたの場合の最善のアプローチは、http://www.packomania.comなどの特定のテーブルを使用することです。可能であれば、正方形に制限してください。