2012-08-23 10 views
2

나는 다음과 같은 입자 스크립트 (TEH 웹에서 발견 편집으로!) 한 : 내가 가장 쉬운 방법은 각 입자는 "클릭"하기 위해 무엇을 궁금 http://jsfiddle.net/neuroflux/hSkFX/1/입자를 클릭 할 수있게 할 수 있습니까?

?

나는 이것들이 x/y/radius 포인트가 아닌 요소라는 것을 알고 있습니다.

가장 쉬운 방법은 무엇이라고 생각하십니까?

건배!

[편집]이 질문은

+1

가능한 [캔버스에서 주어진 요소를 클릭하십시오] (http://stackoverflow.com/questions/3213877/click-on-given-element-in-canvas); 또한 [캔버스에서 스프라이트의 영역을 클릭하십시오] (http://stackoverflow.com/questions/5948251/click-area-on-sprite-in-canvas) – mellamokb

+0

클릭하면 '' 클릭 한 좌표가 하나 이상의 입자의 위치인지 확인하십시오. – Pointy

+0

아니요 아니요, 아니요, 클릭 이벤트가 아닙니다 ... 입자의 클릭 영역을 얻는 것에 관한 것입니다 ... –

답변

1

이 튜토리얼은 특히 유용합니다. http://simonsarris.com/blog/510-making-html5-canvas-useful 이 당신이 관련 부분 필요가있다 :

// Determine if a point is inside the shape's bounds 
    Shape.prototype.contains = function(mx, my) { 
// All we have to do is make sure the Mouse X,Y fall in the area between 
// the shape's X and (X + Height) and its Y and (Y + Height) 
    return (this.x <= mx) && (this.x + this.w >= mx) && 
      (this.y <= my) && (this.y + this.h >= my); 
    } 

당신은() 오브젝트 당신의 원형에 .contains 기능을 구현해야하지만 당신은 커서 위치의 거리를 비교하여 방법을 변경해야합니다 원의 반지름을 가진 원의 중심에서 더 작은 경우 하나를 반환합니다.

+0

대단히 감사합니다! –

4

는 캔버스의 요소를 클릭 정말를 알 수있는 방법은 없습니다 .... 클릭 영역 하지 클릭 이벤트에 관한 것입니다. x/y가 사용자가 캔버스 객체를 클릭하는 위치를 알면됩니다. 그 x/y 위치를 취할 수 있고 거기에 무엇이 있는지 알아낼 수 있습니다. 또 다른 옵션은 거기에있는 픽셀 색상을 확인하고 색상이 있는지 확인하는 것입니다.

관련 문제