DOM Canvas 도형의 클릭 이벤트 처리

황제낙엽 2016.08.22 07:14 조회 수 : 383

sitelink1 http://blog.naver.com/shadowbug/220741936442 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

도형의 클릭 이벤트를 처리하기 위해서는,

Path2D객체를 이용해서 Path정보를 따로 저장해 놓고, 이 정보로 클릭 여부를 체크 할 수 있다.

 

Path2D 객체

context의 패스작업을 따로 보관하는 객체

context에서 제공하는 Path관련 함수들을 사용 할 수 있다.

 

html

  1. <body onload="load(this)">

  2.     <canvas  id="draw" onclick="clickCanvas(window.event)" width="300px" height="300px;"></canvas>

  3. </body>

 

javascript

Path2D 객체로 Path작업을 분리시키고, 

따로 보관한 Path2D객체를 context객체의 isPointInPath 객체로 포인트 접근 여부를 확인한다.

  1. var ctx = null;

  2. var path = null;

  3.  

  4. function load(target) {

  5.     // 실제로 그려지는 위치의 캔버스 생성

  6.     var canvas = document.getElementById("draw");

  7.     ctx = canvas.getContext("2d");

  8.    

  9.     path = new Path2D();

  10.     path.fillStyle = "rgb(255, 0, 0)";

  11.     path.arc(100, 100, 100, 0, 2*Math.PI, true);

  12.     ctx.stroke(path);

  13. }

  14.  

  15. function clickCanvas(event) {

  16.     var x = event.pageX;

  17.     var y = event.pageY;

  18.     if(ctx.isPointInPath(path, x,  y)) {

  19.         alert("in circle");

  20.     } else {

  21.         alert("out circle");

  22.     }

  23. }

 

번호 제목 글쓴이 날짜 조회 수
88 HTML5 강좌 12강 - HTML5 태그 - canvas 채우기 스타일,그라데이션 file 황제낙엽 2016.12.03 235
87 HTML5 강좌 11강 - HTML5 태그 - canvas 베지에곡선, 선 스타일 file 황제낙엽 2016.12.03 179
86 HTML5 강좌 10강 - HTML5 태그 - canvas 원그리기 file 황제낙엽 2016.12.03 214
85 HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 file 황제낙엽 2016.12.03 136
84 HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 file 황제낙엽 2016.12.03 146
83 HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 file 황제낙엽 2016.12.03 129
82 HTML5 강좌 6강 - HTML5 태그 - canvas #1 file 황제낙엽 2016.12.03 218
81 HTML5 강좌 5강 - HTML5 태그 - prograss,download file 황제낙엽 2016.12.03 147
80 HTML5 강좌 4강 - HTML5 태그 - mark,time,meter file 황제낙엽 2016.12.03 153
79 HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 file 황제낙엽 2016.12.03 156
78 HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 file 황제낙엽 2016.12.03 360
77 HTML5 강좌 1강 - HTML5 개념 및 기본구조 file 황제낙엽 2016.12.03 144
76 HTTP 오류 코드의 종류 황제낙엽 2016.12.01 147
75 Multiple Canvas Layer 예제 file 황제낙엽 2016.08.23 147
74 Canvas 개요 황제낙엽 2016.08.22 199
73 Canvas 확대 file 황제낙엽 2016.08.22 149
72 Canvas setTransform 함수 황제낙엽 2016.08.22 167
71 Canvas 회전 file 황제낙엽 2016.08.22 175
70 Canvas 영역 선택 file 황제낙엽 2016.08.22 160
69 Canvas CanvasRenderingContext2D Context 속성 황제낙엽 2016.08.22 113