캔버스에 사용자 정의 색상이 0 %보다 큰 보이는 픽셀 만 그리는 방법은 무엇입니까?

PNG 이미지와 다른 모양에 대한 성능 테스트를하고 싶습니다. 이 기술을 사용하면 검사 할 때 성능상의 문제 (설정 아님)가 없기 때문에 어떤 모양이 좋을지 신경 쓰지 않습니다.캔버스에 사용자 정의 색상이 0 %보다 큰 보이는 픽셀 만 그리는 방법은 무엇입니까?

히트 테스트를 위해 보조 캔버스에서 화면의 모든 이미지를 수집하려고합니다. 그려진 각 이미지에 대해 나는 그 특정 이미지에 첨부 된 새로운 색을 생성 할 것입니다. 그런 다음 캔버스에 모든 이미지를 그립니다. 각 이미지의 채움 색상이 다릅니다.

픽셀 (x, y)를 클릭하면 색상 (r, g, b)이 표시됩니다. 모든 색상이 이미지에 매핑되므로 아무런 오류없이 이미지를 클릭하게됩니다 (해당 클릭으로 발생한 결과를 찾는 데 낭비하지 않습니다).

enter image description here

나는

... 그 모든 색상을하지만 난 그게 지금 문제가 될 것이라고 생각하지 않기 때문에이 256 * 256 * 256 = 16 777 216 항목으로 제한됩니다 알고

그래서 정말로 필요한 것은 각 이미지의 가시 픽셀에만 기반한 보조 캔버스에 채우기 색을 넣는 방법을 아는 것입니다. 오른쪽에 볼 수있는

UPDATE

enter image description here 그것은 히트 테스트 맵입니다. 그래서 검은 색 음영을 클릭하면 다른 계산없이 파란색 상자를 클릭 한 것을 즉시 알 수 있습니다.

알파 데이터를 캐시하는 것이 하나의 개선점입니다. 또한 각 이미지 인스턴스에 대해 동일한 알파 데이터를 재사용합니다 (크기 조정 및 회전에주의해야합니다 ...).

감사

출처

2013-02-13 Totty.js

다른 충돌 감지 테스트에는 어떤 문제가 있습니까? – David

충돌 감지는 각 픽셀이 맞았는지 여부를 확인하지 않습니다. 1000 픽셀 정도의 타일 각각에 대해 너무 느릴 것입니다. (마우스 오버가 발생할 때마다 1000000 개의 검사가 매우 느려질 것입니다). 나는 단지 내 생각이 효과가 있는지 알지 못한다. 단지 15 분 전에 나에게 일어났다. ... –

http://active.tutsplus.com/sessions/collision-detection-and-reaction/ – David

다음은 캔버스 이미지의 불투명 픽셀을 색 마스크 것입니다 방법입니다.

"PutYourImageHere.png"을 자신의 이미지 URL로 바꾸십시오.

<!doctype html> 
<html> 
<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid blue;} 
</style> 

<script> 
    $(function(){ 

     var img=new Image(); 
     img.onload=function(){ 

      var red=255; 
      var blue=0; 
      var green=0; 

      var canvasCopy=document.getElementById("canvasCopy"); 
      var ctxCopy=canvasCopy.getContext("2d"); 

      var c=document.getElementById("canvas"); 
      var ctx=c.getContext("2d"); 
      ctx.drawImage(this,0,0); 

      var imgData=ctx.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]=red; 
        imgData.data[i+1]=green; 
        imgData.data[i+2]=blue; 
        imgData.data[i+3]=255; 
       } 
      } 
      ctxCopy.putImageData(imgData,0,0); 
     } 
     img.src = "PutYourImageHere.png"; 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 

    <canvas id="canvas" width="300" height="300"></canvas> 
    <canvas id="canvasCopy" width="300" height="300"></canvas> 

</body> 
</html>

출처

2013-02-14 02:26:10 markE

나는 그것이 효과가 있다고 생각합니다! 지금은 테스트 할 수 없지만 정확히 원하는 것 같습니다. ImageData가 이렇게 구성되어 있다는 것을 알지 못했습니다. [pixels1.red, pixel1.green, pixel1.blue, pixel2.alpha, pixel2.red] ..이 주제를 더 깊이 설명하는 링크를 알고 계십니까? 덕분에 (: –

) 지금 당장 테스트가 더렵혀지며 완벽하게 작동합니다! 대단히 감사합니다! http://jsfiddle.net/Tj5qG/1/ –

다행입니다. 몇 가지 최적화 팁 : --- 1. 캐시 imgData. var data = imgData.data, --- 2. 캔버스의 전체 부분 대신 작은 부분을 잡을 수 있습니다. var myArea = ctx.getImageData (X, Y, Width, Height), --- 3. 최상의 최적화 가능 : 이미지의 경계 상자 (BB)를 계산하고 충돌에 대한 BB를 테스트하십시오. 그래서 충돌이 없다면 충돌 테스트를 완전히 피할 수 있습니다! – markE

캔버스에 사용자 정의 색상이 0 %보다 큰 보이는 픽셀 만 그리는 방법은 무엇입니까?

답변

관련 문제