在兩個位置之間繪製單元格

如何插入x：0 y：0和x：14 y：9兩個點並更改直線之間所有單元格之間的背景？並保持它相對於表的寬度和高度？在兩個位置之間繪製單元格

填充表格的示例：所以我想直接連接從x：0y：0到x：14 y：9的紅色塊。 http://jsfiddle.net/qy09q4jv/8/

var table = $('<table>'); 

$('body').append(table); 

var mx = 15; 
var my = 10; 

for(y = 0; y < my; y++){ 
    var tr = $('<tr>'); 
    for(x = 0; x < mx; x++){ 
     var td = $('<td>'); 
     td.attr('id', 'cell-'+x+'-'+y); 
     td.html("X:"+x + "Y:"+y); 
     tr.append(td); 
    } 
    $(table).append(tr); 
}

這是我得到的那一刻：

<html> 
    <head> 
     <title>Test</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    </head> 
    <style> 

     table td{ 
      border: 1px solid black; 
      background-color: #C8C8C8; 
     } 

    </style> 
    <body> 
     <ul> 
     </ul> 
     <script> 

      var table = $('<table>'); 

      $('body').append(table); 

      var mx = 20; 
      var my = 20 

      for(y = 0; y < my; y++){ 
       var tr = $('<tr>'); 
       for(x = 0; x < mx; x++){ 
        var td = $('<td>'); 
        td.attr('id', 'cell-'+x+'-'+y); 
        td.html("X:"+x + "Y:"+y); 
        tr.append(td); 
       } 
       $(table).append(tr); 
      } 

      var startX = 0; 
      var startY = 0; 

      var endX = 14; 
      var endY = 9; 

      $("#cell-"+startX+"-"+startY).css('background-color', 'red'); 
      $("#cell-"+endX+"-"+endY).css('background-color', 'red'); 

      var distance = distance({x: startX, y: startY}, {x: endX, y: endY}); 

      line(startX, startY, endX, endY); 

      function line(x0, y0, x1, y1) { //http://rosettacode.org/wiki/Bitmap/Bresenham%27s_line_algorithm#JavaScript 

       var dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1; 
       var dy = Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1; 
       var err = (dx>dy ? dx : -dy)/2; 

       while (true) { 
        $("#cell-"+x0+"-"+x0).css('background-color', 'red'); 
        if (x0 === x1 && y0 === y1) break; 
        var e2 = err; 
        if (e2 > -dx) { err -= dy; x0 += sx; } 
        if (e2 < dy) { err += dx; y0 += sy; } 
       } 
      } 

     </script> 
    </body> 
</html>

而我又卡住:(

來源

2014-09-03 D.Wethmar

你想改變所有的細胞含有X的背景，Y必要時兩個給定的點圓結果之間的協調？ – albciff 2014-09-03 09:56:05

所以我要試試這個https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm – 2014-09-03 10:34:55

是的，我認爲你必須使用Bresenham的算法。我發佈了一個答案，希望它有幫助。 – albciff 2014-09-03 11:02:39

你必須使用Bresenham's line alogrithm

與此代碼或與此jsfiddle

嘗試

 var a = [0,0]; 
     var b = [14,9]; 
     // coordinates between two points 
     var coordinates = []; 
     var deltax = b[0] - a[0]; 
     var deltay = b[1] - a[1]; 
     var y = a[1]; 
     var error = 0; 
     var deltaError = Math.abs(deltay/deltax); 
     // x axis 
     for(var x = a[0]; x <= b[0]; x++){ 
      coordinates.push([x,y]); 
      error = error + deltaError; 
      if(error >= 0.5){ 
       y = y + 1 
       error = error - 1; 
      } 
     }   


     var containsCoordinate = (function (coordArray) { 
      return function (x,y) { 
       for (var i = 0; i < coordArray.length; i++) { 
        if (coordArray[i][0] == x && coordArray[i][1] == y) { 
         return true; 
        }  
       } 
       return false; 
      } 
     })(coordinates); 


     var table = $('<table>'); 
     $('body').append(table); 

     var mx = 15; 
     var my = 10; 

     for(y = 0; y < my; y++){ 
      var tr = $('<tr>'); 
      for(x = 0; x < mx; x++){ 
       var td = $('<td>'); 
       td.attr('id', 'cell-'+x+'-'+y); 
       td.html("X:"+x + "Y:"+y); 
       if(containsCoordinate(x,y)){ 
        td.css("background-color","yellow"); 
       } 
       tr.append(td); 
      } 

      $(table).append(tr); 
     }

希望這有助於

來源

2014-09-03 10:58:11 albciff

這工作。我只改變了（var x = a [0]; x 2014-09-03 11:46:41

+0

@ D.Wethmar哎喲!是的，我想念這個。感謝您的更正:)。 – albciff 2014-09-03 12:55:20

0

如何像：

function changeBG(xstart,xend, ystart, yend){ for(var x=xstart;x<=xend;x++){ for(var y=ystart;y<=yend;y++){ $("#cell-"+x+"-"+y).css("background", "yellow"); } } } /* example */ changeBG(3,7,0,0);

http://jsfiddle.net/qy09q4jv/5/

問題沒有足夠的信息來確定如何範圍內的作品，但希望這可以幫助

注：您可能需要添加額外的檢查，例如保證XSTART等於或大於xend的更大，同樣與ystart和YEND

來源

2014-09-03 10:06:04 Onimusha

0

你可以做類似

var table = $('<table>'); $('body').append(table); var mx = 15; var my = 10; for(y = 0; y < my; y++){ var tr = $('<tr>'); for(x = 0; x < mx; x++){ var td = $('<td>'); td.attr('id', 'cell-'+x+'-'+y); td.html("X:"+x + "Y:"+y); td.attr("data-x",x); td.attr("data-y",y); tr.append(td); } $(table).append(tr); } insertPoints({x:5,y:2},{x:1,y:8}); function insertPoints(p1,p2) { $("table td").each(function(i,e){ console.log(e); var x = parseInt($(e).data("x")); var y = parseInt($(e).data("y")); if ((x >= p1.x && y >= p1.y && y < p2.y) || (x <= p2.x && y > p1.y && y <= p2.y)){ $(e).css("background-color","red"); } }); }

小提琴：http://jsfiddle.net/qy09q4jv/7/

注意，CHEC k如果一個小區之間的價值是不完美的，但它應該給你一個正確的方向提示;）

來源

2014-09-03 10:09:56

在兩個位置之間繪製單元格

回答

相關問題