JavaScript - putImageData不绘制每块瓷砖

似乎某些瓷砖不会被绘制。我有一个tileset拆分成32x32的正方形，并使用2D 100x100阵列将地图绘制到画布上。JavaScript - putImageData不绘制每块瓷砖

然后它为玩家设置“视口”。由于它是一张大地图，玩家总是以边缘为中心，除非他们靠近边缘。

但是，这导致绘制地图的问题。红色块是“玩家”

enter image description here

出头，我发现是，较高的视口（15×10）会给得出一些以前没有拉砖的能力。

这是代码。您可以下载瓷砖组以在本地或以下的js上进行测试.Fields

以下所有内容均备受好评。

即使更改视口，我确实看到一些瓷砖被绘制，而不是全部。 http://pastebin.com/cBTum1aQ

这里是的jsfiddle：http://jsfiddle.net/weHXU/

来源

2012-07-20 nn2

它看起来像瓷砖地图中的可用瓷砖在vWidth上索引。由于vWidth设置为15，因此在给定位置不能有大于15的图块。我现在还没有找到解决方案，但我确定问题在于绘图功能。 – phemios 2012-07-20 16:12:30

Working Demo

我基本上采取了不同的方法来绘制的瓷砖。使用putImageData和getImageData可能会导致性能问题，也可能是在开始时预先分配所有图像数据，从而导致出现内存损失。您已经拥有图片形式的数据，您可以直接引用它，而实际上应该更快。

继承人的方法我使用

for (y = 0; y <= vHeight; y++) { 
    for (x = 0; x <= vWidth; x++) { 
     theX = x * 32; 
     theY = y * 32; 

     var tile = (board[y+vY][x+vX]-1), 
      tileY = Math.floor(tile/tilesX), 
      tileX = Math.floor(tile%tilesX); 

      context.drawImage(imageObj, tileX*tileWidth, tileY*tileHeight, tileWidth, tileHeight, theX, theY, tileWidth, tileHeight); 
    } 
}

及其几乎的相同，而是看保存的数据预阵列，我只引用已经加载图像的面积。

说明上获得参考的瓷砖

说我有一个网格那是4X4的，我需要得到瓦数7，得到y我会做7/4，然后拿到x我会使用7/4的其余部分（7模4）。

至于原来的问题..我真的不知道是什么导致了失踪的瓷砖，我只是改变了我的方法，所以我可以从那里测试，但它立即为我工作。

来源

2012-07-20 17:55:23 Loktar

你是一位专家。谢谢。我看到你刚才引用了当前的'imageObj'。虽然我想知道imageObj如何区分下一个图块？无论哪种方式。比，s – nn2 2012-07-20 18:00:35

'drawImage'正上方的3行是我如何得到引用部分。很高兴有帮助:) – Loktar 2012-07-20 18:01:31

@weka我编辑了我的答案，以提供一个简单的解释，从图像获取瓷砖参考数据，如果有帮助。 – Loktar 2012-07-20 18:04:42

JavaScript - putImageData不绘制每块瓷砖

回答

相关问题