绘制两个位置之间的单元格
Plot cells between two positions
如何插入像x:0 y:0和x:14 y:9这样的两点,并在直线上更改这些点之间所有单元格的背景?保持它相对于桌子的宽度和高度?
填充表的示例:所以我想将红色块从x:0y:0连接到x:14y: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>
我又被卡住了:(
您必须使用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);
}
希望这有帮助,
像这样的东西怎么样
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 相同
你可以做一些类似的事情
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");
}
});
}
Fiddle:http://jsfiddle.net/qy09q4jv/7/
请注意,检查单元格是否在这些值之间并不是完美的,但它应该向您提供正确方向的提示;)
相关文章:
- UI 路由器 - 在状态之间转换时记住滚动位置
- javascript中两个位置之间的距离
- Three.js-查找鼠标最后位置和当前位置之间的所有交点
- jQuery/CSS在幻灯片之间的转换扰乱了位置:修复了幻灯片内部的性能
- 仅使用 CSS 即可在位置之间制作动画
- 获取两个位置之间的距离和时间的功能
- 两个位置之间的距离 - 谷歌地图
- Parse.com云代码,计算两个位置之间的行驶距离
- 绘制两个位置之间的单元格
- 获取@和文本区域当前位置之间的出现次数
- 滚动时在两个预设位置之间移动对象
- 谷歌位置Api找到附近的位置与当前位置和附近位置之间的距离排序
- 计算两个位置之间的距离谷歌地图Api
- 使用Google Maps API V3计算当前位置和不同位置之间的距离
- 如何找到窗口顶部位置和我的iframe开始位置之间的距离
- 在HTML地图上绘制两个位置之间的路线
- 通过提供源和目标 .NET 或 JavaScript 的纬度和经度来计算两个位置之间的道路距离
- 使用 html5 测量特定位置和当前位置之间的距离
- Google Maps JavaScript API v3 在两个位置之间绘制线条
- 如何在新旧目标位置之间平滑地平移