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

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

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. }

 

이 게시물을
목록
쓰기 태그