Event Gesture Multitouch di HTML5

Berikut ini adalah contoh kode penulisan untuk menguji Event Gesture Multitouch pada HTML5

Style:

<style>
#square {
    position: relative;
    width:200px;
    height:200px;
    left: 0;
    top: 0;
    background:blue;
    margin: 100px auto;
}
</style>

Kode Javascript (dengan jQuery 1.9.1):

<script>

var props = $.event.props;
props.push("touches");
props.push("scale");
props.push("drag");
props.push("rotation");
props.push("gesturestart");
props.push("gesturechange");
props.push("gestureend");
$.event.props = props;

$.fn.getMatrix = function(i){
    var array = this.css('transform').split('(')[1].split(')')[0].split(',');
    return array[i] || array;
};

$.fn.getRotation = function(){
    return Math.round(Math.atan2(this.getMatrix(1), this.getMatrix(0)) * (180/Math.PI))
};

$.fn.getScaleDegrees = function() {

        var a = this.getMatrix(0),
            b = this.getMatrix(1),
            d = 10;

    return Math.round( Math.sqrt( a*a + b*b ) * d ) / d || 0;
};

var square = $('#square'),
    _width = square.width(),
    vel = 5.0,
    min = _width,
    max = 300,
    oldRotation = 0,
    oldScaleX = 1,
    oldScaleY = 1,
    oldScale = 0,
    posX = 0,
    posY = 0;

square.on("touchstart", touchstart);
square.on("touchmove", touchmove);

var getScalingDistance = function(touches0, touches1){

    var dx = touches0.pageX - touches1.pageX,
        dy = touches0.pageY - touches1.pageY;
    return Math.sqrt(dx*dx + dy*dy) / 100;
};



var getRotationAngle = function(touches0, touches1){
    var dx = touches0.pageX - touches1.pageX,
        dy = touches0.pageY - touches1.pageY;
    return Math.atan2(dy, dx) * 180 / Math.PI; 
};


function touchstart(e){

    posX = parseFloat(square.css('left')) - e.touches[0].pageX;
    posY = parseFloat(square.css('top')) - e.touches[0].pageY;

    if(e.touches.length < 2) return;

    oldScale = square.getScaleDegrees() - getScalingDistance(e.touches[0], e.touches[1]);
    oldRotation = square.getRotation() - getRotationAngle(e.touches[0], e.touches[1]);
};

function touchmove(e){
    if(e.touches.length === 2) {
    var transforms = 'rotate(' + ( oldRotation + getRotationAngle(e.touches[0], e.touches[1]) ) + 'deg)';
    transforms += ' scale(' + ( oldScale + (getScalingDistance(e.touches[0], e.touches[1])) ) + ')';
    }
    square.css({
        top: posY + e.touches[0].pageY,
        left: posX + e.touches[0].pageX,
        transform: transforms
    });
    
    e.preventDefault();
};

function gestureStart(e){
    e.preventDefault();
    var matrix = square.css('transform').split('(')[1].split(')')[0].split(',');
    oldRotation = Math.round(Math.atan2(square.getMatrix(1), square.getMatrix(0)) * (180/Math.PI)) - e.rotation;
};

function gestureChange(e) {

    e.preventDefault();

    var tempWidth = _width * e.scale;

    if (tempWidth > max) tempWidth = max;
    if (tempWidth < min) tempWidth = min;

    square.css({
        width: tempWidth,
        height: tempWidth,
        transform: 'rotate(' + (oldRotation + e.rotation) + 'deg)'
    });
};

function gestureEnd(e) {
    e.preventDefault();
    
    _width = square.width();
};
</script>

Kode HTML:

<meta name='viewport' content='width=device-width'>

<div id="square"></div>