13
由於我以前的approach似乎不起作用，解決方案會相當複雜，所以我決定嘗試另一種方法，可能會更簡單一些。用六邊形填充圓（不同的方法）
這次，在代碼繪製任何六邊形之前，它必須確定有多少行和列可以放入預定義的圓中，然後根據此結果開始繪製所有六邊形。
到目前爲止，這是一種工作，但正如我以前的做法一樣，有時候這些格子是重疊的，或者在圓的下半部分留下了大的空隙。
另一個問題是，如何將這些六邊形格式化爲網格？
請注意，畫布下方有一個小滑塊，可讓您增加/減小圓的半徑並重新繪製六邊形。
var c_el = document.getElementById("myCanvas");
var ctx = c_el.getContext("2d");
var canvas_width = c_el.clientWidth;
var canvas_height = c_el.clientHeight;
var circle = {
\t r: 120, /// radius
\t pos: {
\t \t x: (canvas_width/2),
\t \t y: (canvas_height/2)
\t }
}
var hexagon = {
\t r: 20,
\t pos:{
\t \t x: 0,
\t \t y: 0
\t }
}
var hex_w = hexagon.r * 2;
var hex_h = Math.floor(Math.sqrt(3) * hexagon.r);
var hex_s = (3/2) * hexagon.r;
fill_CircleWithHex(circle);
function fill_CircleWithHex(circle){
\t drawCircle(circle);
\t
\t var c_h = circle.r * 2; /// circle height ////
\t var c_w = c_h; //// circle width /////
\t
\t var max_hex_H = Math.round(c_h/hex_h);
\t
\t var row_sizes = []
\t for(var row= 0; row< max_hex_H; row++){
\t \t
\t \t var d = circle.r - (row* hex_h); //// distance from circle's center to the row's chord ////
\t \t var c = 2 * (Math.sqrt((circle.r*circle.r) - (d * d))); /// length of the row's chord ////
\t \t var row_length = Math.floor(c/(hexagon.r * 3));
\t \t row_sizes.push(row_length )
\t }
\t
\t console.log("circle_r : "+circle.r);
\t console.log("hex_r : "+hexagon.r);
\t console.log("max_hex_H : "+max_hex_H);
\t console.log("max_hex_W : ", row_sizes)
\t for(var row = 0; row < row_sizes.length; row++){
\t \t var max_hex_W = row_sizes[row];
\t \t
\t \t var x_offset = Math.floor((c_w - (max_hex_W * hex_w))/2);
\t \t
\t \t for(var col = 1; col < max_hex_W; col++){
\t \t \t hexagon.pos.x = (col * hex_w) + (circle.pos.x - circle.r) + x_offset ;
\t \t \t hexagon.pos.y = (row * hex_h) + (circle.pos.y - circle.r);
\t \t \t ctx.fillText(row+""+col, hexagon.pos.x - 6, hexagon.pos.y+4);
\t \t \t drawHexagon(hexagon)
\t \t }
\t }
}
function drawHexagon(hex){
\t var angle_deg, angle_rad, cor_x, cor_y;
\t ctx.beginPath();
\t for(var c=0; c <= 5; c++){
\t \t angle_deg = 60 * c;
\t \t angle_rad = (Math.PI/180) * angle_deg;
\t \t cor_x = hex.r * Math.cos(angle_rad); //// corner_x ///
\t \t cor_y = hex.r* Math.sin(angle_rad); //// corner_y ///
\t \t if(c === 0){
\t \t \t ctx.moveTo(hex.pos.x+ cor_x, hex.pos.y+cor_y);
\t \t }else{
\t \t \t ctx.lineTo(hex.pos.x+cor_x, hex.pos.y+cor_y);
\t \t }
\t }
\t ctx.closePath();
\t ctx.stroke();
}
function drawCircle(circle){
\t ctx.beginPath();
\t ctx.arc(circle.pos.x, circle.pos.y, circle.r, 0, 2 * Math.PI);
\t ctx.stroke();
}
$(function() {
$("#slider").slider({
\t \t max: 200,
\t \t min:0,
\t \t value:100,
\t \t create: function(event, ui) {
\t \t \t $("#value").html($(this).slider('value'));
\t \t },
\t \t change: function(event, ui) {
\t \t \t $("#value").html(ui.value);
\t \t },
\t \t slide: function(event, ui){
\t \t \t $("#value").html(ui.value);
\t \t \t circle.r = ui.value;
\t \t \t ctx.clearRect(0,0, canvas_width, canvas_height);
\t \t \t fill_CircleWithHex(circle);
\t \t }
\t });
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<canvas id="myCanvas" width="350" height="250" style="border:1px solid #d3d3d3;"> </canvas>
<div style="width: 200px; height: 40px;">
\t <div id="slider" style="position:relative; width: 150px; top: 4px;float: left;"></div> <div id="value" style="float: left;"> 0 </div>
</div>
我很困惑。給定的六邊形和圓的大小？你能更準確地陳述問題嗎？什麼是硬約束和你想要最大化什麼。 –
硬約束是圓的大小，在此基礎上生成六邊形網格。 – Alexus
它只是看起來像一個六邊形圖案？六角形是否必須編號？我正在考慮應用智能CSS背景來生成六角形樣式。 – Paul