Question

这是我的JSFiddle：http://jsfiddle.net/0r16e802/4/

我要做的是拍摄图像并将其绘制为HTML表格我算法中的两个大问题

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

大小问题和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>";
  }
 }
 });

Answer 1

编辑：更正了索引

正如Jovan所建议的那样，索引应如他所说：

(r*ItemsPerRow + i) * size

但它仍然未对齐，所以你必须像这样纠正它：

(r*ItemsPerRow + i) * size - 2

然后，你不想超越实际的最大指数，即262，否则你会在上面的评论中说出重复和错位。

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

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

var size=17;

这使它们彼此对齐，但你仍然必须解决边界条件，这是1像素关闭。

为此，请将CSS修复1个像素：

height:16px;

最后，通过减去1：

来修正大小计算

parseInt(r*i*size - 1)

以下是解决方案：http://jsfiddle.net/0r16e802/5/

Answer 2

我不认为之前发布的任何答案都是正确的，即使它们恰好适用于前两行。

您的精灵的组织方式，您正在寻找： parseInt（（r * ItemsPerRow + i）*尺寸）

Answer 3

正如@pid已经说过的那样，由于i=0因为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>"; } } });，第一行的偏移高度最终被计算为0，因此尺寸稍微偏离了一个像素，但第一行也重复了。你还有一个＆＃39; squidgy＆＃39;无论出于什么原因需要从高处进行-2以使它们正确对齐的因素，可能是原始图像的问题。

{{1}}

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

将图像绘制为HTML表格

3 个答案: