Poiché il mio precedente approach non sembra funzionare e una soluzione sarebbe piuttosto complessa, ho deciso di provare un altro approccio che potrebbe essere un po 'più semplice.cerchio di riempimento con esagoni (approccio diverso)
Questa volta, prima che il codice disegna un esagono, deve determinare quante righe e colonne possono rientrare nel cerchio predefinito e in base a questo risultato inizia quindi a disegnare tutti gli esagoni.
Finora si tratta di un tipo di lavoro, ma come nel mio precedente approccio, ci sono momenti in cui gli esagoni si sovrappongono o lasciano un grande spazio nella parte inferiore del cerchio.
Un'altra preoccupazione è, come posso formattare questi esagoni in una griglia?
Nota, c'è un piccolo dispositivo di scorrimento sotto la tela, che consente di aumentare/diminuire il raggio del cerchio e ridisegnare gli esagoni.
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>
Sono confuso. Le dimensioni di entrambi esagono e cerchio sono date? Puoi dire il problema più precisamente? Quali sono i vincoli e cosa stai cercando di massimizzare. –
il vincolo rigido è la dimensione del cerchio, in base a ciò viene generata la griglia esagonale. – Alexus
Deve solo sembrare un modello esagonale? Gli esagoni devono essere numerati? Sto pensando di applicare solo sfondi css intelligenti per generare uno stile esagonale. – Paul