동적 격자를 만드는 방법

동적 인 너비와 높이를 사용하여 격자를 만들려고합니다. 각 셀 영역의 너비와 높이가 동일한 지 확인하는 수식은 무엇입니까?동적 격자를 만드는 방법

2014-01-14 Frank Astin

당신에 대해 그리드를 이야기 :

var span=cw/lineCount;

다음 코드와 데모입니까? 사용중인 프레임 워크를 지정하거나 다른 힌트를 제공하십시오. 그렇지 않으면 우리는 단지 추측 할 수 있습니다. – gehho

너비와 높이를 그 방향으로 셀의 수로 나눕니까? – Teepeemm

여기 @ teepemm의 생각을 코드에 넣었습니다. 당신이 사각형 셀 (폭 == 높이) 그럼 그냥 사용 1 개 범위를 원하는 경우

var xSpan=cw/lineCount; 
var ySpan=cw/lineCount;

당신은 모든 폭이 다른 높이와 동일하게 될 다른 폭과 모든 높이와 동일하게하고 싶다면 . 이 경우 세포의 맨 아래 행 평방하지 않을 수 있습니다 : 참고 http://jsfiddle.net/m1erickson/8MTkv/

<!doctype html> 
<html lang="en"> 
<head> 

    <style> 
     body{ background-color: ivory; } 
     #wrapper{ position:relative; } 
     canvas{ position:absolute; left:40px; top:5px; border:1px solid red;} 
     #amount{ position:absolute; left:1px; top:5px; margin-bottom:15px; width:23px; border:0; color:#f6931f; font-weight:bold; } 
     #slider-vertical{ position:absolute; left:5px; top:40px; width:15px; height:225px; border:0px; color:#f6931f; font-weight:bold; } 
    </style> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

    <script> 

    $(function() { 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var cw=canvas.width; 
    var ch=canvas.height; 

    var $amount=$("#amount"); 

    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 2, 
     max: 30, 
     value: 10, 
     slide: function(event, ui) { 
     var value=ui.value; 
     $amount.val(value); 
     drawGrid(value); 
     } 
    }); 

    $amount.val($("#slider-vertical").slider("value")); 
    drawGrid(10); 


    function drawGrid(lineCount){ 
     var xSpan=cw/lineCount; 
     var ySpan=cw/lineCount; 
     ctx.clearRect(0,0,cw,ch); 
     ctx.save(); 
     if(lineCount/2===parseInt(lineCount/2)){ 
      ctx.translate(.5,.5); 
     } 
     ctx.beginPath(); 
     for(var i=0;i<lineCount;i++){ 
      var x=(i+1)*xSpan; 
      var y=(i+1)*ySpan; 
      ctx.moveTo(x,0); 
      ctx.lineTo(x,ch); 
      ctx.moveTo(0,y); 
      ctx.lineTo(ch,y); 
     } 
     ctx.lineWidth=0.50; 
     ctx.stroke(); 
     ctx.restore(); 
    } 

    }); // end $(function(){}); 

    </script> 
</head> 
<body> 
    <div id="wrapper"> 
     <input type="text" id="amount" /> 
     <div id="slider-vertical"></div> 
     <canvas id="canvas" width=300 height=300></canvas> 
    </div> 
</body> 
</html>

출처

2014-01-14 17:06:46 markE

이것은 굉장합니다! 캔버스 크기가 완벽한 300x300이 아니라면 어떻게 될까요? 300x250 정도라면 어떨까요? – spez86

Nevermind, 위의 피들을 사용하여 얻었습니다. http://jsfiddle.net/yv0deead/2/ – spez86

동적 격자를 만드는 방법

답변

관련 문제