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
क्या इसे सिर्फ हेक्सागोन पैटर्न की तरह दिखना है? हेक्सागोन को गिना जाना है? मैं हेक्सागोन शैली उत्पन्न करने के लिए बस स्मार्ट सीएसएस पृष्ठभूमि को लागू करने की सोच रहा हूं। – Paul