js gesture 事件 处理

http://wanglingshu.com/wp-content/uploads/ios-gesture.html


    var canvas = document.getElementById("canvas"),
        spirit, startScale, startRotation;

    function touchStart(e) {
        e.preventDefault();
        if (spirit || e.touches.length != 2) return;
        var touch1 = e.touches[0],
            pagex1 = touch1.pageX,
            pagey1 = touch1.pageY,
            touch2 = e.touches[1],
            pagex2 = touch2.pageX,
            pagey2 = touch2.pageY,
            left = Math.min(pagex1, pagex2),
            top = Math.min(pagey1, pagey2),
            width = Math.abs(pagex1 - pagex2),
            height = Math.abs(pagey1 - pagey2);
        spirit = document.createElement("div");
        spirit.className = "spirit";
        spirit.innerHTML = "fadfdsafsdafsadfsdafsadfsdafsafsda";
        spirit.style.height = height + "px";
        spirit.style.width = width + "px";
        spirit.style.left = left + "px";
        spirit.style.top = top + "px";
        canvas.appendChild(spirit);
    }

    function gestureStart(e) {
        e.preventDefault();
    }

    function gestureChange(e) {
        e.preventDefault();
        if (!spirit) return;
        if (startScale == null || startRotation == null) {
            startScale = e.scale;
            startRotation = e.rotation;
        } else {
            spirit.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation + 'deg)';
        }
    }

    function gestureEnd(e) {
        e.preventDefault();
        if (!spirit) return;
        canvas.removeChild(spirit);
        spirit = null;
        startScale = null;
        startRotation = null;
    }

    canvas.addEventListener("touchstart", touchStart, false);
    canvas.addEventListener("gesturestart", gestureStart, false);
    canvas.addEventListener("gesturechange", gestureChange, false);
    canvas.addEventListener("gestureend", gestureEnd, false);