[Programming / WebApp] Canvas Touch Gesture 예제

이번 글에서는 HTML5의 Canvas Element의 Touch Gesture를 통해 이미지를 이동하거나 확대(Pinch Zoom)하는 방법에 대하여 알아보고자 한다.

Canvas의 Image Touch Gesture를 위한 소스코드는 https://github.com/rombdn/img-touch-canvas를 이용하였으며, Touch가 안 되는 환경(Desktop without Touch Device)에서는 Mouse를 이용한 Drag를 통하여 이미지 이동이 가능하다.

다음 링크의 프로젝트 파일을 다운받아 테스트 할 수 있다:

img-touch-gesture.zip

img-touch-canvas.js

상기 Github 페이지에서 img-touch-canvas.js를 다운받는다.

/* ================================= img-touch-canvas - v0.1 http://github.com/rombdn/img-touch-canvas (c) 2013 Romain BEAUDON This code may be freely distributed under the MIT License ================================= */ (function() { var root = this; //global object var ImgTouchCanvas = function(options) { if( !options || !options.canvas || !options.path) { throw 'ImgZoom constructor: missing arguments canvas or path'; } this.canvas = options.canvas; this.canvas.width = this.canvas.clientWidth; this.canvas.height = this.canvas.clientHeight; this.context = this.canvas.getContext('2d'); this.desktop = options.desktop || false; //non touch events this.position = { x: 0, y: 0 }; this.scale = { x: 0.5, y: 0.5 }; this.imgTexture = new Image(); this.imgTexture.src = options.path; this.lastZoomScale = null; this.lastX = null; this.lastY = null; this.mdown = false; //desktop drag this.init = false; this.checkRequestAnimationFrame(); requestAnimationFrame(this.animate.bind(this)); this.setEventListeners(); }; ImgTouchCanvas.prototype = { animate: function() { //set scale such as image cover all the canvas if(!this.init) { if(this.imgTexture.width) { var scaleRatio = null; if(this.canvas.clientWidth > this.canvas.clientHeight) { scaleRatio = this.canvas.clientWidth / this.imgTexture.width; } else { scaleRatio = this.canvas.clientHeight / this.imgTexture.height; } this.scale.x = scaleRatio; this.scale.y = scaleRatio; this.init = true; } } this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.drawImage( this.imgTexture, this.position.x, this.position.y, this.scale.x * this.imgTexture.width, this.scale.y * this.imgTexture.height); requestAnimationFrame(this.animate.bind(this)); }, gesturePinchZoom: function(event) { var zoom = false; if( event.targetTouches.length >= 2 ) { var p1 = event.targetTouches[0]; var p2 = event.targetTouches[1]; var zoomScale = Math.sqrt(Math.pow(p2.pageX - p1.pageX, 2) + Math.pow(p2.pageY - p1.pageY, 2)); //euclidian distance if( this.lastZoomScale ) { zoom = zoomScale - this.lastZoomScale; } this.lastZoomScale = zoomScale; } return zoom; }, doZoom: function(zoom) { if(!zoom) return; //new scale var currentScale = this.scale.x; var newScale = this.scale.x + zoom/100; //some helpers var deltaScale = newScale - currentScale; var currentWidth = (this.imgTexture.width * this.scale.x); var currentHeight = (this.imgTexture.height * this.scale.y); var deltaWidth = this.imgTexture.width*deltaScale; var deltaHeight = this.imgTexture.height*deltaScale; //by default scale doesnt change position and only add/remove pixel to right and bottom //so we must move the image to the left to keep the image centered //ex: coefX and coefY = 0.5 when image is centered <=> move image to the left 0.5x pixels added to the right var canvasmiddleX = this.canvas.clientWidth / 2; var canvasmiddleY = this.canvas.clientHeight / 2; var xonmap = (-this.position.x) + canvasmiddleX; var yonmap = (-this.position.y) + canvasmiddleY; var coefX = -xonmap / (currentWidth); var coefY = -yonmap / (currentHeight); var newPosX = this.position.x + deltaWidth*coefX; var newPosY = this.position.y + deltaHeight*coefY; //edges cases var newWidth = currentWidth + deltaWidth; var newHeight = currentHeight + deltaHeight; if( newWidth < this.canvas.clientWidth ) return; if( newPosX > 0 ) { newPosX = 0; } if( newPosX + newWidth < this.canvas.clientWidth ) { newPosX = this.canvas.clientWidth - newWidth;} if( newHeight < this.canvas.clientHeight ) return; if( newPosY > 0 ) { newPosY = 0; } if( newPosY + newHeight < this.canvas.clientHeight ) { newPosY = this.canvas.clientHeight - newHeight; } //finally affectations this.scale.x = newScale; this.scale.y = newScale; this.position.x = newPosX; this.position.y = newPosY; }, doMove: function(relativeX, relativeY) { if(this.lastX && this.lastY) { var deltaX = relativeX - this.lastX; var deltaY = relativeY - this.lastY; var currentWidth = (this.imgTexture.width * this.scale.x); var currentHeight = (this.imgTexture.height * this.scale.y); this.position.x += deltaX; this.position.y += deltaY; //edge cases if( this.position.x > 0 ) { this.position.x = 0; } else if( this.position.x + currentWidth < this.canvas.clientWidth ) { this.position.x = this.canvas.clientWidth - currentWidth; } if( this.position.y > 0 ) { this.position.y = 0; } else if( this.position.y + currentHeight < this.canvas.clientHeight ) { this.position.y = this.canvas.clientHeight - currentHeight; } } this.lastX = relativeX; this.lastY = relativeY; }, setEventListeners: function() { // touch this.canvas.addEventListener('touchstart', function(e) { this.lastX = null; this.lastY = null; this.lastZoomScale = null; }.bind(this)); this.canvas.addEventListener('touchmove', function(e) { e.preventDefault(); if(e.targetTouches.length == 2) { //pinch this.doZoom(this.gesturePinchZoom(e)); } else if(e.targetTouches.length == 1) { var relativeX = e.targetTouches[0].pageX - this.canvas.getBoundingClientRect().left; var relativeY = e.targetTouches[0].pageY - this.canvas.getBoundingClientRect().top; this.doMove(relativeX, relativeY); } }.bind(this)); if(this.desktop) { // keyboard+mouse window.addEventListener('keyup', function(e) { if(e.keyCode == 187 || e.keyCode == 61) { //+ this.doZoom(5); } else if(e.keyCode == 54) {//- this.doZoom(-5); } }.bind(this)); window.addEventListener('mousedown', function(e) { this.mdown = true; this.lastX = null; this.lastY = null; }.bind(this)); window.addEventListener('mouseup', function(e) { this.mdown = false; }.bind(this)); window.addEventListener('mousemove', function(e) { var relativeX = e.pageX - this.canvas.getBoundingClientRect().left; var relativeY = e.pageY - this.canvas.getBoundingClientRect().top; if(e.target == this.canvas && this.mdown) { this.doMove(relativeX, relativeY); } if(relativeX <= 0 || relativeX >= this.canvas.clientWidth || relativeY <= 0 || relativeY >= this.canvas.clientHeight) { this.mdown = false; } }.bind(this)); } }, checkRequestAnimationFrame: function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } } }; root.ImgTouchCanvas = ImgTouchCanvas; }).call(this);

Line 15 - 49에서는 ImgTouchCanvas의 개체 속성을 정의하고 있다.

Line 52 - 262에서는 ImgTouchCanvas의 프로토타입을 정의하고 있다.
animate는 애니메이션에 대한 초기화와 애니메이션 프레임 갱신을 위한 개체를 바인딩한다.

getsturePinchZoom는 두 점 이상의 터치를 통해 두 점을 벌려 Zoom In을 하거나 두 점을 오므려 Zoom Out을 할 수 있는 제스쳐를 정의한다.

doZoom은 제스쳐로 정의된 스케일에 따라 Zoom을 실행한다.

doMove는 터치로 오브젝트를 드래그함에 따라 오브젝트 Move를 실행한다.

setEventListeners는 touchStart, touchMove 등 각종 이벤트를 정의한다. 만약 터치를 인식할 수 없는 일반 Desktop PC의 경우, Key Code 입력을 통해 Zoom In/Out 및 마우스 드래그를 통해 오브젝트 이동을 정의한다.

Key Code는 브라우저에 따라 약간씩 다를 수 있으니, 다음 링크를 참고하도록 한다.

http://www.javascripter.net/faq/keycodes.htm

index.html

index.html 파일을 다음과 같이 작성하였다. Canvas 태그를 갖는 4개의 View를 구성하였고, Style은 base.css 파일에 정의하였으며, 각 Canvas에 대한 ID-Image 바인딩을 main.js에 정의하였다.

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./base.css">
  <title>Touch Gesture Test</title>
</head>

<body>
    <h1>Touch Gesture Test</h1>
    <hr>

    <div class="mycontainer" style="position:absolute; top: 70px; left:4px;">
        <canvas id="top-left-pane" class="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <div class="mycontainer" style="position:absolute; top: 70px; left:330px;">
        <canvas id="top-right-pane" class="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <div class="mycontainer" style="position:absolute; top: 240px; left:4px;">
        <canvas id="bottom-left-pane" class="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <div class="mycontainer" style="position:absolute; top: 240px; left:330px;">
        <canvas id="bottom-right-pane" class="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <script src="./jquery-3.0.0.min.js"></script>
    <script src="./img-touch-canvas.js"></script>
    <script src="./main.js"></script>
</body>

</html>

base.css

Style은 다음과 같이 정의하였다:

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0px;
}

body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    color: #888888;
    background-color: black;
}

.mycontainer {
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  border-color: #004852;
  background-color: #fff;
  width: 320px;
  height: 167px;
}

.mycanvas {
  border-style: solid;
  border-radius: 10px;
  border-width: 3px;
  border-color: #004852;
  background-color: #fff;
}

main.js

main.js에 다음과 같이 Canvas ID-Image 바인딩을 하였다.

$(function() { $(document).ready(function() { var topLeft = new ImgTouchCanvas({ canvas: document.getElementById('top-left-pane'), path: "./baseball.png", desktop: true }); var topRight = new ImgTouchCanvas({ canvas: document.getElementById('top-right-pane'), path: "./soccer.png", desktop: true }); var bottomLeft = new ImgTouchCanvas({ canvas: document.getElementById('bottom-left-pane'), path: "./basketball.png", desktop: true }); var bottomRight = new ImgTouchCanvas({ canvas: document.getElementById('bottom-right-pane'), path: "./volleyball.png", desktop: true }); }) })

Result

이제 작성된 코드의 결과를 테스트 해 보자.