캔버스 : 마우스 이벤트

Question

캔버스의 특정 원이나 사각형에 이벤트 핸들러를 추가 할 수 없다는 것을 알고 있습니다. 그러나 특정 요소에 대한 이벤트 처리를 지원하는 EaselJS, KineticJS, Paper.js, Fabric.js와 같은 멋진 프레임 워크가 있습니다.

다른 사람들이 어떻게 작동하는지 설명 할 수 있습니까?

두 가지 해결책이 있다고 생각합니다.
1. 각 요소에 대해 새 캔버스 영역을 만들고 서로 배치하십시오. 이 방법으로 각 영역에 이벤트 처리기를 제공 할 수 있습니다.
2. 하나의 캔버스 영역과 하나의 이벤트 처리기 만 있습니다. 이 방법으로 복잡한 수학 계산을 수행하여 특정 요소가 클릭되었는지 확인해야합니다. 원이나 사각형 만있는 경우이 방법이 쉽습니다. 그러나 커브가 많은 경로가있는 경우이 솔루션은 상당히 어렵습니다.

라이브러리를 사용하고 싶지 않습니다. 누군가가 나를 도울 수 있다면 좋을 것입니다.

Answer 1

여기 라이브러리를 그리기 캔버스가 변경되지 않은 캔버스가 단지 하나의 큰 비트 맵

를 작동하는 방법의 간단한 요약입니다. 일단 캔버스에 도형을 그리면 액세스 할 수없고 잊어 버린 픽셀입니다.

캔버스 드로잉 라이브러리는 모든 모양을 "보관 된"개체에 저장합니다. 각 도형 객체에는 도면 라이브러리가 필요할 때마다 다시 그릴 수 있도록하는 데 필요한 충분한 정보가 있습니다.

캔버스 드로잉 라이브러리는 개체의 "컨트롤러"입니다. 라이브러리에는 필요에 따라 모든 쉐이프 객체를 추적, 조작 및 다시 그리는 데 필요한 알고리즘이 있습니다. 모양의

고유의 속성을

기본 식별

• ID
• 모양 이름
• 부모 또는 컨테이너 :

  다음 정보는 모든 형태의 객체에 대해 유지됩니다 :

  • 직사각형 모양 (rect, image, text) 너비와 높이를 알아야합니다.
  • 원형 모양 (원, 도형, 규칙적인 다각형, 별)은 반경과 측면 수를 알고 있습니다.
  • 선은 길이를 알고 있습니다.
  • 곡선 모양 (호, 베 지어, 패스)은 고정 점과 제어점을 알고 있습니다.
  • 텍스트도 알고 ... 음, 텍스트!
  • 이미지는 또한 픽셀 데이터가

  변형 적 정보를 (보통 자바 스크립트 이미지 객체에 저장) 알고

  • 시작 X는/Y가 시작 좌표를 해제
  • 번역 축적 된 움직임을 좌표입니다.
  • 이 모양의 회전 누적 회전 (일반적으로 라디안 단위).
  • 스케일링 축적 resizings
  • 다른 변환 (흔하지)는 스큐하고
  • 정보 - 현재 Z- 색인을

  스타일링 정보 레이어링 날실 :

  • 은, strokeColor,
  을
  • StrokeWidth,
  • FillColor,
  • 불투명도,
  • 에서 IsVisible,
  • lineCaps,
  • CornerRadius를

  추적 능력 :

  • 완전히이 모양을 포함 박스 작은 사각형 경계는
  • 이 사용됩니다 "히트 테스트"를 통해 마우스가이 객체 안에 있는지 확인 (선택 및 끌기)

Answer 2

라이브러리를 사용하지 않으려는 경우 내 대답 in this thread이 도움이 될 수 있습니다. markE에서 말한 것처럼 일단 캔버스가 쓰여지면 데이터를 추적 할 수있는 방법이 없습니다 (픽셀 수준의 충돌 감지에 유용하지만 각 픽셀을 반복하여 색을 테스트하지 않는 한).