| sitelink1 | http://blog.naver.com/shadowbug/220741936442 |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars5 | |
| extra_vars6 |
도형의 클릭 이벤트를 처리하기 위해서는,
Path2D객체를 이용해서 Path정보를 따로 저장해 놓고, 이 정보로 클릭 여부를 체크 할 수 있다.
Path2D 객체
context의 패스작업을 따로 보관하는 객체
context에서 제공하는 Path관련 함수들을 사용 할 수 있다.
html
-
<body onload="load(this)">
-
<canvas id="draw" onclick="clickCanvas(window.event)" width="300px" height="300px;"></canvas>
-
</body>
javascript
Path2D 객체로 Path작업을 분리시키고,
따로 보관한 Path2D객체를 context객체의 isPointInPath 객체로 포인트 접근 여부를 확인한다.
-
var ctx = null;
-
var path = null;
-
-
function load(target) {
-
// 실제로 그려지는 위치의 캔버스 생성
-
var canvas = document.getElementById("draw");
-
ctx = canvas.getContext("2d");
-
-
path = new Path2D();
-
path.fillStyle = "rgb(255, 0, 0)";
-
path.arc(100, 100, 100, 0, 2*Math.PI, true);
-
ctx.stroke(path);
-
}
-
-
function clickCanvas(event) {
-
var x = event.pageX;
-
var y = event.pageY;
-
if(ctx.isPointInPath(path, x, y)) {
-
alert("in circle");
-
} else {
-
alert("out circle");
-
}
-
}
