HTML5 캔버스에 그려진 이미지가 몇 개 있는데 마우스 클릭으로 맞았는지 확인하고 싶습니다. 이미지의 경계는 있지만 이미지는 변형 (변환 및 크기 조정)됩니다. 아쉽게도 컨텍스트에는 현재 변환 행렬을 가져 오는 메소드가 없으며 행렬 곱셈을위한 API도 없습니다. 유일한 해결책은 변환을 추적하고 행렬 곱셈을 구현하는 것입니다. 제안을 환영합니다.HTML5 캔버스 hittesting
이것은 3D (OpenGL) 그래픽 세계에서도 흔히 발생하는 문제입니다.
해결 방법은 표시되지 않는 보조 캔버스 개체를 만들고 이미지를 이미지에 다시 그리는 것입니다. 드로잉은 주 캔버스 드로잉과 완전히 동일하지만, 각 요소는 고유 한 색으로 그려집니다. 그런 다음 마우스 선택에 해당하는 픽셀을 찾아 색상을 읽으십시오. 그러면 해당 요소 (있는 경우)가 표시됩니다.
이것은 OpenGL 세계에서 일반적으로 사용되는 방법입니다. "opengl object picking"과 같은 용어를 검색하여 설명을 찾을 수 있습니다. 여기에 one of the many search results입니다.
업데이트 : HTML5 캔버스 사양에는 이제 hit regions이 포함됩니다. 브라우저에서 어느 정도 지원되는지 확실하지 않습니다.
멋진 아이디어! 잘 진술 된 –
천재. 내가 할 수 있다면 나는 upxote 10 배! –
여기서 문제는 캔버스가 모두 선택적 컬러 블렌딩 및 앤티 앨리어싱을 수행한다는 것입니다. 물체가 서로 맞 닿았을 때 색상이 달라집니다. 이 색상들은 서로 다른 색상의 ID에 충분히 가깝게 위치 할 수 있으므로 테두리 영역이 다른 객체의 히트로 잘못 표시 될 수 있습니다. 이 문제를 해결하는 가장 좋은 방법은 확실하지 않습니다. 탐지 가능한 객체마다 별도의 캔버스를 사용하면 너무 많은 메모리가 낭비되고 마우스가 움직이는 동안 각 객체를 개별적으로 렌더링하면 너무 많은 성능을 낭비하게됩니다. –
더 많은 생각을하고 나면 컨텍스트에 현재 변환 행렬을 가져 오는 방법이 있어도 마우스 클릭시 이미지 변환 행렬이 필요하므로 유용하지 않을 것입니다. 컨텍스트에는 다른 컨텍스트가 있습니다. 변환. 내가 필요한 것은 씬 그래프이다. 간단한 그래프를 구현하거나 Cake JS와 같은 라이브러리를 사용한다. –
번역 및 크기 조정을위한 행렬이 필요하지 않습니다. 예를 들어, 마우스의 X 좌표를 평행하게하고 스케일을 조정하려면 newPointX = event.x * scaleX + translateX –
을 사용하십시오.이 경우에는 행렬 곱셈을 구현할 필요가 없습니다. –