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不繪製每塊瓷磚

回答

相關問題