绘制的图像作为HTML表格

这是我的jsfiddle：http://jsfiddle.net/0r16e802/4/绘制的图像作为HTML表格

我所试图做的是拍摄图像，并在我的算法，它画成一个HTML表格 2大问题

我似乎能够绘制图像，只有第一个图像的第一行中加载

规模和大的问题background-position

var Append=""; 
$(document).ready(function(){ 
    var row=2; 
    var ItemPerRow=10; 
    CreateEmojiTable(row, ItemPerRow); 

function CreateEmojiTable(row, ItemsPerRow){ 
    Append+="<table width='99%' style='padding-top:3px;'>"; 
for(var i=0;i<row;i++) 
{ 
    Append+="<tr>"; 
    DrawEmoji(ItemsPerRow, i); 
    Append+="</tr>"; 
} 
Append+="</table>";  
$("#emoji_container").html(Append); 
    } 
    function DrawEmoji(ItemsPerRow, r){ 
    var size=16; 
    for(var i=0;i<ItemsPerRow;i++){ 
    Append+="<td>" 
    Append+="<div class='emoji' style='background-position:0px -"+parseInt(r*i*size)+"px;'></div>"; 
    Append+="</td>"; 
    } 
} 
});

来源

2014-09-04 Sora

的http：//的jsfiddle。net/ah14oaup/1/ – epascarello 2014-09-04 14:14:35

编辑：更正索引

如约万建议，索引应该是像他说：

(r*ItemsPerRow + i) * size

但它仍失准，所以你必须要纠正它像这样：

(r*ItemsPerRow + i) * size - 2

然后，你不想超出实际的最大指数，这是26 2，否则就像我在上面的评论中所说的那样，你会有重复和错位。

以下是完整的解决方案。它修复索引，调整和最大索引：http://jsfiddle.net/0r16e802/12/

图像中的表情符号，对齐，以17个像素，而不是16

var size=17;

这会将他们彼此，但你还是会必须解决1个像素关闭的边界条件。

要做到这一点，通过1个像素修复CSS：

height:16px;

最后，通过减去1固定大小计算：

parseInt(r*i*size - 1)

这里是解决方案：http://jsfiddle.net/0r16e802/5/

来源

2014-09-04 13:48:13 pid

你是怎么知道图像的确切大小？ – Sora 2014-09-04 13:50:40

我不知道。我只是密切关注一个和下面的表情符号之间的偏移是如何变化的，并且意识到它是以固定的增量进行的。当做这样的事情时，这是常见的情况，所以也许通过我放置17而不是16像素的经验...... BAM！：D – pid 2014-09-04 13:52:18

仍然需要更改http://jsfiddle.net/ah14oaup/1/更改了两行。 'DrawEmoji（ItemsPerRow，i * ItemsPerRow）;'和'Append + =“

”;' – epascarello 2014-09-04 14:01:18

-1

由于@pid已经说过，尺寸有点超出像素，但第一行重复，因为i=0第一行的偏移高度结束工作为0。无论什么原因需要从高度-2以使它们对齐正确，可能是原始图像的问题，您也有'squidgy'因子。

function DrawEmoji(ItemsPerRow, r) { 
     var size = 17; 
     for (var i = 0; i < ItemsPerRow; i++) { 
      Append += "<td>" 
      Append += "<div class='emoji' style='background-position:0px -" + parseInt((r + 1) * (i + 1) * size - 2) + "px;'></div>"; 
      Append += "</td>"; 
     } 
    } 
});

http://jsfiddle.net/0r16e802/9/

来源

2014-09-04 13:53:46

哇......谢谢你拯救了我的生命这个美妙的答案 – Sora 2014-09-04 13:56:34

这是我今天的TODO列表*任务347： - 拯救生命* :) – 2014-09-04 13:57:56

绝对是更好的解决方案。我没有意识到索引中存在错误，并且还有更多emojis :)但是当我放置60行左右时，在某个点上它们再次失调。源图像必须有对齐错误。 – pid 2014-09-04 13:59:27

我不认为任何先前发布的答案是正确的，即使他们有这样的事情，为前两排工作。

你的精灵的组织方式，您正在寻找： parseInt函数（（R * ItemsPerRow + I）*大小）

来源

2014-09-04 14:00:07

你可能会展示一个小提琴展示其差异？ – EWit 2014-09-04 14:05:57

对不起，被拉下了会议。但我看到pid现在更新了他的完美答案。 – 2014-09-04 14:19:11

绘制的图像作为HTML表格

回答

相关问题