예제 11-11. 마우스 드래깅으로 캔버스에 그림 그리기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 4. 13:55 |4. canvas 객체와 마우스 이벤트 활용
이 절에서는 마우스 이벤트를 이용하여, 사용자가 드래깅하여 캔버스 위에 자유롭게 그림을 그리는 자바스크립트 응용 프로그램을 작성해보자.
* 캔버스 태그와 초기화
- 캔버스 태그
<canvas> 태그를 작성한다
1 | <canvas id="myCanvas" style="background-color: aliceblue" width="500" height="400"></canvas> | cs |
- 캔버스 객체와 컨텍스트 알아내고 초기화
1 2 3 4 5 | var canvas, context; canvas = document.getElementById('myCanvas'); context = canvas.getContext("2d"); context.lineWidth = 2; // 선 굵기를 2픽셀로 설정 context.strokeStyle = "blue"; // 선 색을 파란색으로 지정 | cs |
1 2 3 4 | context.addEventListener("mousedown",function(e){ down(e) }, false) // 마우스가 눌러질 때 context.addEventListener("mouseup",function(e){ up(e) }, false) // 눌러진 마우스가 놓여질 때 context.addEventListener("mousemove",function(e){ move(e) }, false) // 마우스를 움직이는 동안 context.addEventListener("mouseout",function(e){ out(e) }, false) // 마우스가 캔버스 영역을 벗어나는 경우 | cs |
* 마우스 이벤트 처리
- 마우스가 눌러질 때, function down(e) 실행
마우스가 눌러지면 down(e) 함수가 실행되며, 이벤트 객체 e의 e.offsetX와 e.offsetY를 통해 캔버스 내 마우스가 눌러진 위치를 알 수 있다.
마우스가 눌러진 위치에서 드래깅하는 동안 그림을 그리기 때문에 마우스가 눌러진 위치를 전역변수 startX와 startY에 저장한다.
startX = e.offsetX; // 마우스가 눌러진 x 위치 저장
startY = e.offsetY; // 마우스가 눌러진 y 위치 저장
그리고 이제 드래깅을 통해 그림이 그려질 상태를 뜻하는 dragging 변수를 true로 설정한다
dragging = true;
- 마우스가 놓여질 때, function up(e) 실행
dragging = false;
- 마우스가 움질일 때, function move(e) 실행
마우스가 움직이는 동안 mousemove 이벤트가 계속 발생하여 move(e) 함수가 계속 호출한다.
move(e) 함수는 다음 코드를 이용하여 마우스가 눌러져 있지 않으면 그냥 리턴한다.
if(!dragging) return;
dragging이 true라면 curX와 curY에 현재 마우스의 위치 값 e.offsetX와 e.offsetY를 저장한다
curX = e.offsetX;
curY = e.offsetY;
그리고 나서 (startX, startY)에서 (curX, curY) 사이의 선을 그리도록 draw(curX, curY)를 호출한다
draw(curX, curY);
(curX, curY)는 드래깅하는 동안 계속 변하는 마우스 커서의 현재 위치이다.
startX와 startY를 현재 마우스의 위치로 변경하고 함수를 빠져나온다
startX = curX;
startY = curY;
- 마우스가 캔버스를 벗어날 때, function out(e) 실행
마우스가 캔버스를 벗어나면 그림 그리기를 중단시킨다. 이를 위해 out(e) 함수에서는 다음과 같이 dragging 변수 값을 false로 설정한다
dragging = false;
* 그림 그리기, draw(curX, curY)
캔버스는 점 단위로 그래픽을 수행하는 기능은 없고 기본 단위가 선이다. 그러므로 한 픽셀의 점도 선으로 표현해야 한다.
이 예제에서 그림을 그리는 함수는 draw()이다.
이 함수를 호출하기전에 선의 시작점은 전역변수인 startX, startY에 저장하고,
끝 점 curX, curY를 매개변수로 하여 draw(curX, curY)를 호출하면 된다.
다음은 (startX, startY)에서 (curX, curY)까지 선을 그리는 draw() 함수 코드이다.
1 2 3 4 | context.beginPath(); // 새로운 경로 시작 context.moveTo(startX, startY); // 새로운 시작점 추가 context.lineTo(curX, curY); // 경로에 (startX, startY)에서 (curX, curY) 사이의 선을 추가 context.stroke(); // 경로 모두 그리기 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>마우스 드래깅으로 캔버스에 그림 그리기</title></head> <body onload="init()"> <h3>마우스를 누른 채 드래깅하여 그림 그려 보세요</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="400" height="300"> </canvas> <script> var canvas, context; function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); context.lineWidth = 2; // 선 굵기를 2로 설정 context.strokeStyle = "blue"; // 마우스 리스너 등록. e는 MouseEvent 객체 canvas.addEventListener("mousemove", function (e) { move(e) }, false); canvas.addEventListener("mousedown", function (e) { down(e) }, false); canvas.addEventListener("mouseup", function (e) { up(e) }, false); canvas.addEventListener("mouseout", function (e) { out(e) }, false); } var startX=0, startY=0; // 드래깅동안, 처음 마우스가 눌러진 좌표 var drawing=false; function draw(curX, curY) { context.beginPath(); context.moveTo(startX, startY); context.lineTo(curX, curY); context.stroke(); } function down(e) { startX = e.offsetX; startY = e.offsetY; drawing = true; } function up(e) { drawing = false; } function move(e) { if(!drawing) return; // 마우스가 눌러지지 않았으면 리턴 var curX = e.offsetX, curY = e.offsetY; draw(curX, curY); startX = curX; startY = curY; } function out(e) { drawing = false; } </script> </body> </html> | cs |
