2014年6月28日土曜日

Androidでpinch in/outのjsイベント(gesturestart, gesturechange, gestureend)

gesturestart, gesturechange, gestureendはAndroidに無いので、独自実装。

var funcGestureStart = function (e) {};
var funcGestureChange = function (e) {};
var funcGestureEnd = function (e) {};

// iOS向けイベント設定
document.body.addEventListener('gesturestart', funcGestureStart, false);
document.body.addEventListener('gesturechange', funcGestureChange, false);
document.body.addEventListener('gestureend', funcGestureChange, false);

// Android向けイベント設定
var pinchDistance = 0;
document.body.addEventListener('touchstart',function(e){
    if(e.touches.length > 1){
        pinchDistance = Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
        funcGestureStart(e);
    } else {
        pinchDistance = 0;
    }
},false);
document.body.addEventListener('touchmove', function (e) {
    if (pinchDistance <= 0) {
        return;
    }
    var newDistance = Math.sqrt(Math.pow((e.touches[1].pageX - e.touches[0].pageX),2)+Math.pow((e.touches[1].pageY - e.touches[0].pageY),2));
    var event = {scale: newDistance / pinchDistance};
    funcGestureChange(event);
});
document.body.addEventListener('touchmove', function (e) {
    if (pinchDistance <= 0) {
        return;
    }
    funcGestureEnd(e);
});