2017-09-29 23 views
0

我想找到一种方法来计算如何在10x29像素图像上制作斜线。在不同角度绘制像素化线条

我已经绘制了所有可能的位置,但我想知道是否有一个算法来雾化这个。像油漆这样的程序可以做到这一点,所以这显然是可能的,但我不知道什么谷歌甚至。任何提示欢迎!

if y=0 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     XXXXXXXXXXXXXXX.............. 
     ............................. 
     ............................. 
end 
if y=2 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     XXXXXXXX..................... 
     ........XXXXXXX.............. 
     ............................. 
     ............................. 
end 
if y=4 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     XXXX......................... 
     ....XXXXXXX.................. 
     ...........XXXX.............. 
     ............................. 
     ............................. 
end 

if y=6 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     XXX.......................... 
     ...XXXXX..................... 
     ........XXXX................. 
     ............XXX.............. 
     ............................. 
     ............................. 
end 
if y=8 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     XXX.......................... 
     ...XXXXX..................... 
     ........XXXX................. 
     ............XXX.............. 
     ............................. 
     ............................. 
end 
if y=10 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     XX........................... 
     ..XXXX....................... 
     .....XXXX.................... 
     .........XXXX................ 
     .............XX.............. 
     ............................. 
     ............................. 
end 
if y=12 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     XX........................... 
     ..XXX........................ 
     .....XXX..................... 
     ........XX................... 
     ..........XXX................ 
     .............XX.............. 
     ............................. 
     ............................. 
end 
if y=14 then playfield: 
     ............................. 
     ............................. 
     XX........................... 
     ..XX......................... 
     ....XX....................... 
     ......XXX.................... 
     .........XX.................. 
     ...........XX................ 
     .............XX.............. 
     ............................. 
     ............................. 
end 
if y=16 then playfield: 
     ............................. 
     XX........................... 
     ..XX......................... 
     ....XX....................... 
     ......XX..................... 
     ........XX................... 
     ..........XX................. 
     ............XX............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=18 then playfield: 
     X............................ 
     .XX.......................... 
     ...XX........................ 
     .....XX...................... 
     .......XX.................... 
     .........X................... 
     ..........XX................. 
     ............XX............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=20 then playfield: 
     .X........................... 
     ..XX......................... 
     ....XX....................... 
     ......X...................... 
     .......XX.................... 
     .........X................... 
     ..........XX................. 
     ............XX............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=22 then playfield: 
     ..X.......................... 
     ...XX........................ 
     .....X....................... 
     ......XX..................... 
     ........X.................... 
     .........XX.................. 
     ...........X................. 
     ............XX............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=24 then playfield: 
     ...X......................... 
     ....XX....................... 
     ......X...................... 
     .......X..................... 
     ........XX................... 
     ..........X.................. 
     ...........X................. 
     ............XX............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=26 then playfield: 
     ....X........................ 
     .....X....................... 
     ......XX..................... 
     ........X.................... 
     .........X................... 
     ..........X.................. 
     ...........XX................ 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=28 then playfield: 
     .....X....................... 
     ......X...................... 
     .......X..................... 
     ........X.................... 
     .........XX.................. 
     ...........X................. 
     ............X................ 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
     ............................. 
end 
if y=30 then playfield: 
     .......X..................... 
     ........X.................... 
     .........X................... 
     ..........X.................. 
     ...........X................. 
     ............X................ 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=32 then playfield: 
     .......X..................... 
     ........X.................... 
     .........X................... 
     ..........X.................. 
     ..........X.................. 
     ...........X................. 
     ............X................ 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=34 then playfield: 
     ........X.................... 
     .........X................... 
     .........X................... 
     ..........X.................. 
     ...........X................. 
     ............X................ 
     ............X................ 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=36 then playfield: 
     .........X................... 
     ..........X.................. 
     ..........X.................. 
     ...........X................. 
     ...........X................. 
     ............X................ 
     .............X............... 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=38 then playfield: 
     ..........X.................. 
     ..........X.................. 
     ...........X................. 
     ...........X................. 
     ............X................ 
     ............X................ 
     .............X............... 
     .............X............... 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=40 then playfield: 
     ...........X................. 
     ...........X................. 
     ............X................ 
     ............X................ 
     ............X................ 
     .............X............... 
     .............X............... 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=42 then playfield: 
     ............X................ 
     ............X................ 
     ............X................ 
     .............X............... 
     .............X............... 
     .............X............... 
     .............X............... 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=44 then playfield: 
     .............X............... 
     .............X............... 
     .............X............... 
     .............X............... 
     .............X............... 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=46 then playfield: 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=48 then playfield: 
     ...............X............. 
     ...............X............. 
     ...............X............. 
     ...............X............. 
     ...............X............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=50 then playfield: 
     ................X............ 
     ................X............ 
     ................X............ 
     ...............X............. 
     ...............X............. 
     ...............X............. 
     ...............X............. 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=52 then playfield: 
     .................X........... 
     .................X........... 
     ................X............ 
     ................X............ 
     ................X............ 
     ...............X............. 
     ...............X............. 
     ..............X.............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=54 then playfield: 
     ..................X.......... 
     ..................X.......... 
     .................X........... 
     .................X........... 
     ................X............ 
     ................X............ 
     ...............X............. 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=56 then playfield: 
     ...................X......... 
     ..................X.......... 
     ..................X.......... 
     .................X........... 
     .................X........... 
     ................X............ 
     ...............X............. 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=58 then playfield: 
     ....................X........ 
     ...................X......... 
     ...................X......... 
     ..................X.......... 
     .................X........... 
     ................X............ 
     ................X............ 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=60 then playfield: 
     .....................X....... 
     ....................X........ 
     ...................X......... 
     ..................X.......... 
     ..................X.......... 
     .................X........... 
     ................X............ 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=62 then playfield: 
     .....................X....... 
     ....................X........ 
     ...................X......... 
     ..................X.......... 
     .................X........... 
     ................X............ 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=64 then playfield: 
     .......................X..... 
     ......................X...... 
     .....................X....... 
     ....................X........ 
     ..................XX......... 
     .................X........... 
     ................X............ 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
     ............................. 
end 
if y=66 then playfield: 
     ........................X.... 
     .......................X..... 
     .....................XX...... 
     ....................X........ 
     ...................X......... 
     ..................X.......... 
     ................XX........... 
     ...............X............. 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=68 then playfield: 
     .........................X... 
     .......................XX.... 
     ......................X...... 
     .....................X....... 
     ...................XX........ 
     ..................X.......... 
     .................X........... 
     ...............XX............ 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=70 then playfield: 
     ..........................X.. 
     ........................XX... 
     .......................X..... 
     .....................XX...... 
     ....................X........ 
     ..................XX......... 
     .................X........... 
     ...............XX............ 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=72 then playfield: 
     ...........................X. 
     .........................XX.. 
     .......................XX.... 
     ......................X...... 
     ....................XX....... 
     ...................X......... 
     .................XX.......... 
     ...............XX............ 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=74 then playfield: 
     ............................X 
     ..........................XX. 
     ........................XX... 
     ......................XX..... 
     ....................XX....... 
     ...................X......... 
     .................XX.......... 
     ...............XX............ 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=76 then playfield: 
     ............................. 
     ...........................XX 
     .........................XX.. 
     .......................XX.... 
     .....................XX...... 
     ...................XX........ 
     .................XX.......... 
     ...............XX............ 
     ..............X.............. 
     ............................. 
     ............................. 
end 
if y=78 then playfield: 
     ............................. 
     ............................. 
     ...........................XX 
     .........................XX.. 
     .......................XX.... 
     ....................XXX...... 
     ..................XX......... 
     ................XX........... 
     ..............XX............. 
     ............................. 
     ............................. 
end 
if y=80 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ...........................XX 
     ........................XXX.. 
     .....................XXX..... 
     ...................XX........ 
     ................XXX.......... 
     ..............XX............. 
     ............................. 
     ............................. 
end 
if y=82 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ...........................XX 
     .......................XXXX.. 
     ....................XXXX..... 
     ................XXXX......... 
     ..............XX............. 
     ............................. 
     ............................. 
end 
if y=84 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ..........................XXX 
     .....................XXXXX... 
     .................XXXX........ 
     ..............XXX............ 
     ............................. 
     ............................. 
end 
if y=86 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ..........................XXX 
     .....................XXXXX... 
     .................XXXX........ 
     ..............XXX............ 
     ............................. 
     ............................. 
end 
if y=88 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     .........................XXXX 
     ..................XXXXXXX.... 
     ..............XXXX........... 
     ............................. 
     ............................. 
end 
if y=90 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     .....................XXXXXXXX 
     ..............XXXXXXX........ 
     ............................. 
     ............................. 
end 
if y=92 then playfield: 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ............................. 
     ..............XXXXXXXXXXXXXXX 
     ............................. 
     ............................. 
end 
+0

https://en.wikipedia.org/wiki/Linear_interpolation – Paul

回答

2

使用知名Bresenham line-drawing algorithm。您可以在网上找到许多版本RosettaCode。其中最可读的是以下情况:

// draw a line from x0, y0 to x1, y1 
 
// from RosettaCode: https://rosettacode.org/wiki/Bitmap/Bresenham%27s_line_algorithm#JavaScript 
 
function bresenhamLine(x0, y0, x1, y1) { 
 
    console.log("Drawing line from ", x0, y0, " to ", x1, y1); 
 
    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) { 
 
    setPixel(x0,y0); 
 
    if (x0 === x1 && y0 === y1) break; 
 
    var e2 = err; 
 
    if (e2 > -dx) { err -= dy; x0 += sx; } 
 
    if (e2 < dy) { err += dx; y0 += sy; } 
 
    } 
 
} 
 

 
// the code below is to test the algorithm 
 

 
// set a single "pixel" (in this case, a cell in a table) 
 
function setPixel(x, y) { 
 
    $("#" + x + "_" + y).addClass("selected"); 
 
    console.log("setting pixel at ", x, y); 
 
} 
 

 
// create a wxh table that will draw lines when hovered over 
 
function createTable(w, h) { 
 
    for (var i=0; i<h; i++) { 
 
    var row = ["<tr>"]; 
 
    for (var j=0; j<w; j++) { 
 
     row.push("<td id=\"" + j + "_" + i + "\">"); 
 
    } 
 
    $("#t").append(row.join("")) 
 
    } 
 
    $("td").hover(function() { 
 
     $("td").removeClass("selected"); 
 
     var coords = $(this).attr("id").split("_"); 
 
     bresenhamLine(
 
     Math.floor(w/2), 
 
     Math.floor(h/2), 
 
     +coords[0], 
 
     +coords[1]); 
 
    }) 
 
} 
 

 

 
createTable(30, 30);
td { height: 3px; width: 3px; border: 1px solid white; } 
 
td.selected { border: 1px solid blue; } 
 
table { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t"></table> 
 

 
Move the mouse to draw different lines using the Bresenham algorithm.

0

小例子,你应该为try-catch函数编写其他的东西,因为使用它是'坏习惯'。

你给出一个坐标(x,y)和你想通过这个点绘制的直线的斜率。

var playfield = createEmptyPlayfield(29, 10); 
 
drawLine(2,2, 1/3); 
 
showPlayfield(); 
 

 
function drawLine(x, y, slope){ 
 
    for(i=0; i<playfield[0].length; i++){ 
 
    var xx = i; 
 
    var yy = Math.round(y + (slope * i)); 
 
    try{ 
 
     playfield[yy][xx] = "X"; 
 
    } catch(e){ 
 
     //console.log("out of playfield"); 
 
    } 
 
    } 
 
} 
 

 
function createEmptyPlayfield(width, height){ 
 
    var grid = []; 
 
    for (i=0; i<height; i++){ 
 
    grid[i] = []; 
 
    for(j=0; j<width; j++){ 
 
     grid[i][j] = 0; 
 
    } 
 
    } 
 
    return grid; 
 
} 
 

 
function showPlayfield(){ 
 
    var str = ""; 
 
    for(i=0; i<playfield.length; i++){ 
 
    for(j=0; j<playfield[i].length; j++){ 
 
    str+= playfield[i][j]; 
 
    } 
 
    str+="\n"; 
 
    } 
 
    console.log(str); 
 
}