2016-09-01 15 views
1

私はオブジェクトに基づいて2列のグリッドを作成しようとしています。私は最終的に矩形の中にテキストを入れたい。私が思いついたことをお見せしましょう。主な問題は、第2列の位置が均等でないことです。 余白が正しく表示されません。キャンバスを使った2列のグリッド

$(function(){ 
 

 
var questions = { 
 
    \t question1 : ["This is a question for statement 1 This is a question for statement 1", 7], 
 
    \t question2 : ["This is a question for statement 2 This is a question for statement 2", 3], 
 
    \t question3 : ["This is a question for statement 3 This is a question for statement 3", 8], 
 
    \t question4 : ["This is a question for statement 4 This is a question for statement 4", 8], 
 
    \t question5 : ["This is a question for statement 5 This is a question for statement 5", 8], 
 
    \t question6 : ["This is a question for statement 6 This is a question for statement 6", 8], 
 
    \t question7 : ["This is a question for statement 7 This is a question for statement 7", 8], 
 
    \t question8 : ["This is a question for statement 8 This is a question for statement 8", 8] 
 
    
 
    } 
 
    var canvas = $("canvas")[0]; 
 
    var ctx = canvas.getContext("2d"); 
 
\t 
 
\t var count0 = 0; 
 
\t var count1 = 1; 
 
    for(var question in questions){ 
 
    \t var i = Object.keys(questions).indexOf(question); 
 
    \t var a = i - 1; 
 
    \t 
 
    \t ctx.fillStyle = "green"; 
 
    \t if(i % 2 == 0 && i == 0){ 
 
    \t \t ctx.fillRect(0, (i * 1) * 200, 200, 200) 
 
    \t }else if(i % 2 == 0 && i !== 0){ 
 
    \t \t count0++ 
 
    \t // \t console.log("count", count0) 
 
    \t \t ctx.fillRect(0, (i * 1) * 210 - (200 *count0), 200, 200) 
 
    \t }else if(i % 2 == 1 && i == 1){ 
 
    \t \t ctx.fillRect(210, 0 * 200, 200, 200) 
 
    \t } 
 

 
    \t else if(i % 2 == 1 && i !== 1){ 
 
    \t \t count1++ 
 
    \t // \t console.log("count", count1) 
 
    \t \t ctx.fillRect(210, (i * 1) * 207 - (200 *count1), 200, 200) 
 
    \t \t // ctx.fillRect(210,()) 
 
    \t } 
 
\t \t  \t 
 
\t \t  \t 
 
\t } 
 

 

 
\t \t })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<canvas id "myCanvas" width = "700px" height = "1000px"></canvas>

答えて

1

私は他に1列207に210を掛けることであることを推測するだろうが、正確に(あなたのコードで間違って何が起こっているかを把握するために忍耐を持っていません問題の大部分)、あなたがはるかに簡単なコードで望ましい結果を得ることができるように私には思えるので:

$(function() { 
 
    var questions = { 
 
    question1: ["This is a question for statement 1 This is a question for statement 1", 7], 
 
    question2: ["This is a question for statement 2 This is a question for statement 2", 3], 
 
    question3: ["This is a question for statement 3 This is a question for statement 3", 8], 
 
    question4: ["This is a question for statement 4 This is a question for statement 4", 8], 
 
    question5: ["This is a question for statement 5 This is a question for statement 5", 8], 
 
    question6: ["This is a question for statement 6 This is a question for statement 6", 8], 
 
    question7: ["This is a question for statement 7 This is a question for statement 7", 8], 
 
    question8: ["This is a question for statement 8 This is a question for statement 8", 8] 
 
    } 
 
    var canvas = $("canvas")[0]; 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "20px serif"; 
 
    
 
    Object.keys(questions).forEach(function(question, i) { 
 
    var offset = i % 2; 
 
    ctx.fillStyle = "green"; 
 
    ctx.fillRect(210 * offset, (i - offset)/2 * 210, 200, 200); 
 
    // next two lines optional: 
 
    ctx.fillStyle = "white"; 
 
    ctx.fillText(question, 210 * offset + 30, (i - offset)/2 * 210 + 60); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id "myCanvas" width="700px" height="1000px"></canvas>

+0

これはすばらしい解決策です。私はあなたと同じくらい良いことを願っています。 –

関連する問題