在两个位置之间绘制单元格

韦斯玛

我如何才能插入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>

而且我又被卡住了:(

Albciff

您必须使用Bresenham的行算法

尝试使用此代码或此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);
        }

希望这可以帮助,

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在两个位置之间获取路径

在iOS中的GMSMapView上的两个位置之间绘制路线

获取两个位置之间的路线点

mysql中的ST_Distance_Sphere无法提供两个位置之间的准确距离

R中地球上两个位置之间的距离

如何使用mapView和CLLocationManager在iOS Swift中绘制两个位置之间的方向

如何在两个位置之间的两种不同颜色的Google地图上绘制折线

快速计算两个位置之间的距离

通过从EditText输入纬度和经度来计算两个位置之间的距离

如何使用Android在Google Map中的两个位置之间绘制折线?

Mkmapview中两个位置之间的多条路线

无法使用ReactJS在OpenLayers中的两个位置之间绘制默认线

如何在两个位置之间连续移动GameObject?

两个工作簿之间的Excel VBA复制单元格

寻找两个位置之间的距离

在ggplot2中的两个位置之间绘制曲线

bing映射两个位置之间的直线

如何在iPhone应用程序中找到两个位置之间的方向?

如何使用GMSMapView在两个位置之间找到最短路径并绘制锯齿形路径?

Swift-在字符串的两个位置之间查找子字符串

给定纬度和经度,计算两个位置之间的行驶/行驶距离(必应地图)

bash:清除两个位置之间的字符串

在两个位置之间随机生成一个SKSpriteNode

使用Google Map API计算两个位置之间的距离

如何在两个位置之间更改文本的颜色?

iOS中两个位置之间的估计时间

获取java android中两个位置之间的距离

如何通过道路计算两个位置之间的距离?

在 Kotlin 中查找两个位置之间的距离