캔버스의 모양 지정 및 식별

Question

개체의 캔버스에 네 가지 모양이 렌더링되어 있다고 가정 해 봅니다.

var shapes = [ 
    { shape1 : 'A cool Triangle', structure: triangle(40,40,40,40,40,40) }, 
    { shape2 : 'A cool Rectangle', structure: rect(220,220,220,220) }, 
    { shape3 : 'Another cool rectangle', structure: rect(140,140,140,140) } 
] 

그런 다음 우리는 (간결함을 위하여, 내가 포함되지 않습니다) 우리의 셋업 코드에 간단한 for 루프를 사용하여 렌더링합니다.

for(let shape in shapes){ 
// Really shouldn't be using for...in on this array for obvious reasons 
    shape.structure 
} 

이제 캔버스에 세 가지 모양이 있습니다.

캔버스에서 어떻게 든 모양을 식별 할 수있는 inbuilt 메서드가 있는지 알고 싶습니다. 삼각형을 클릭하면 'A cool Triangle'을 반환합니다. P5에 대한 기본 기능을 대신

, 나는의 조정 짓을했습니다 단순히 나에게 x와 마우스 클릭의 y 좌표를 줄 것이다

sketch.mousePressed = function(){ 
    var mouseXCoord = mouseX; 
    var mouseYCoord = mouseY; 
    console.log("x:" + mouseXCoord + "y:" + mouseYCoord) 
} 

하고 나는 좋겠 사용자 지정 함수를 실행하여 클릭 된 좌표에있는 모양을 찾습니다. 문제는, 이것은 항상 방탄하지 않습니다 - 예를 들어 삼각형의 경우 경계 내에서 마우스 클릭이 항상 삼각형을 반환하지는 않을 것입니다 ... 어떻게 든 모양 영역을 계산해야합니다 (비록 사용자 정의 함수가 필요함), 그리고 이것은 단지 견과류처럼 보인다.

캔버스에서 요소를 식별 할 수있는 기본 함수가 있습니까?

Answer 1

단순히 나에게 x와 마우스 클릭의 y 좌표를 제공하고 나는 정확히 클릭 한 좌표

에 앉아있는 모양을 추구하는 사용자 정의 함수를 실행 거라고하는 당신이해야 할 일. 좀 더 정확하게 말하자면, 도형을 반복하고 클릭 된 점이 그 중 어떤 점에 있는지 확인하십시오.

캔버스에서 요소를 식별 할 수있는 기본 함수가 있습니까?

번호 그리고 귀하의 용어에주의 : 당신이 DOM에서 찾을 것 같은 이러한 요소 수 없습니다.

문제는 이것이 항상 방탄하는 것은 아닙니다. 예를 들어 삼각형의 경우, 경계 내에서 마우스를 클릭해도 항상 삼각형이 반환되는 것은 아닙니다.

포인트가 경계 상자가 아닌 각 삼각형 안에 있는지 확인해야합니다. 결과의 무리에 대한 "포인트 삼각형 충돌 탐지"또는 "포인트 삼각형 교차점"에 대한 Google 검색을 수행합니다. 이것은 프로그래밍 문제보다 수학 문제에 더 가깝습니다.

당신은 collide2D 라이브러리를 사용할 수 있습니다. 솔직히 아마 당신은 아마도 이것과 같은 간단한 것을 직접 찾아야 할 것입니다.