liqiang70 发表于 2013-1-30 20:46:44

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,
            pagex1 = touch1.pageX,
            pagey1 = touch1.pageY,
            touch2 = e.touches,
            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);
页: [1]
查看完整版本: js gesture 事件 处理