從畫布精靈獲取圖像像素數據
[英]Getting image pixel data from a canvas sprite
問題描述
我正在嘗試在我的畫布游戲中實現像素完美碰撞檢測，但是我似乎無法從精靈中獲取像素信息。
我需要為子畫面的每個像素設置x和y值，從我讀到的內容中，我使用getImageData()方法來實現。
但是，這不起作用：
this.sprite = new Image();
this.sprite.src = 'img/player.png';
console.log(this.sprite.getImageData());
我可能使用了錯誤類型的Sprite嗎？ 因為我在控制台中收到此錯誤：
未捕獲的TypeError：對象＃沒有方法'getImageData'
1 個解決方案
解決方案1
5 2013-03-13 21:37:46
這是使用精靈的像素數據進行像素完美命中測試的方法
首先，通常在可見的畫布上繪制精靈。
在隱藏的畫布上創建該精靈的紅色蒙版副本 。 此副本的大小與精靈相同，但僅包含透明或紅色像素。
跟蹤可見的精靈的邊界框。 單擊邊界框時，請相對於精靈的邊界框 （而不是相對於畫布）計算mouseclick的X / Y。
然后，參考紅色蒙版精靈，查看該X / Y處的相應像素是紅色還是透明的。 如果像素為紅色，則表示像素完美匹配。 如果像素是透明的，則不會命中。
在此插圖中，假設藍點是X / Y單擊位置。 由於紅色蒙版畫布中對應的X / Y像素為“紅色”，因此這是HIT。
這是創建紅色蒙版精靈的代碼。 我在這里沒有顯示用於命中測試的代碼，但是如果您嘗試並且無法對命中測試進行編碼，我也會花時間來編寫命中測試。
重要說明：要使此代碼運行，必須避免跨域安全限制。 確保您的圖像源位於您的本地域上，否則您將遇到跨域安全沖突，並且將不會繪制遮罩圖像……因此，您不能對您的sprite源執行此操作： http : //otherDomain.com/ picture.jpg ！
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid blue;}
</style>
<script>
$(function(){
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(this,100,25);
// make a red-masked copy of just the sprite
// on a separate canvas
var canvasCopy=document.getElementById("canvasCopy");
var ctxCopy=canvasCopy.getContext("2d");
canvasCopy.width=this.width;
canvasCopy.height=this.height;
ctxCopy.drawImage(img,0,0);
// make a red-masked copy of the sprite on a separate canvas
var imgData=ctxCopy.getImageData(0,0,c.width,c.height);
for (var i=0;i<imgData.data.length;i+=4)
{
if(imgData.data[i+3]>0){
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
}
ctxCopy.putImageData(imgData,0,0);
}
img.src = "houseIcon.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Original sprite drawn on canvas at XY:100/25</p>
<canvas id="canvas" width="400" height="300"></canvas>
<p>Red-masked on canvas used for hit-testing</p>
<canvas id="canvasCopy" width="300" height="300"></canvas>
</body>
</html>
要在2個精靈之間進行像素完美的碰撞測試，您需要：
為sprite＃1和sprite＃2創建一個紅色蒙版的畫布。
首先測試兩個精靈的邊界框是否碰撞。 如果邊界框不碰撞，則兩個精靈不碰撞，因此您可以在此處停止命中測試。
如果使用邊界框測試可能會碰撞2個精靈，請為碰撞測試創建第三個畫布。
您將使用畫布的合成方法通過將sprite＃1和sprite＃2都繪制到第三張畫布上來測試sprite＃1和sprite＃2之間的沖突。 使用合成時，只有兩個Sprite的COLLIDING像素將繪制在第三個畫布上。
這是“目標插入”合成的工作方式：現有畫布內容保留在新形狀（sprite＃2）和現有形狀（sprite＃1）內容重疊的位置。 其他一切都變得透明。
所以…
將Sprite＃1 以其轉換后的狀態繪制到第三個畫布中（轉換可以是移動，旋轉，縮放，傾斜等等）。
將globalCompositeOperation設置為destination-in。
context.globalCompositeOperation = 'destination-over';
將處於轉換狀態的 sprite＃2繪制到第三個畫布中。
在繪制之后，第三幅畫布僅包含sprite＃1和sprite＃2的碰撞部分
測試第三個畫布中的每個像素是否有非透明像素。 如果發現任何不透明的像素，則說明這2個精靈在收集中。
根據要在碰撞時采取的操作，找到第一個碰撞像素后，您可能會紓困。
使用KineticJS從畫布獲取像素數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.