2012-10-31 66 views
3

我無法在ipad上捏和放大,我想下面給出的代碼可能會影響代碼, 請給任何完美的解決方案。 是否有任何與身體的孩子事件的綁定或需要計算不同變量的觸摸問題,並做手動計算。捏和縮放不能在ipad上工作

 ///I-Pad evenet Binding 
    $(document).ready(function() { 

     $("body").children().bind('touchstart touchmove touchend touchcancel', function() { 
      var touches = event.changedTouches, first = touches[0], type = ""; 
      switch (event.type) { 
       case "touchstart": type = "mousedown"; 
        break; 
       case "touchmove": type = "mousemove"; 
        break; 
       case "touchend": type = "mouseup"; 
        break; 
       default: return; 
      } 

      var simulatedEvent = document.createEvent("MouseEvent"); 
      simulatedEvent.initMouseEvent(type, true, true, window, 1, 
        first.screenX, first.screenY, 
        first.clientX, first.clientY, false, 
        false, false, false, 0/*left*/, null); 
      if (touches.length < 2) { 
       first.target.dispatchEvent(simulatedEvent); 
       event.preventDefault(); 
      } 

     }); 


    (function() { 
      var last_x = null, last_y = null, w_area = workarea[0], 
       panning = false, keypan = false, dopanning = false; 

      $("#svgroot").bind('mousemove mouseup', function (evt) { 
       if (dopanning === false) return; 
       var clientxnew = +$("#svgcontent")[0].getAttribute("x"), 
       clientynew = +$("#svgcontent")[0].getAttribute("y"); 
       clientxnew += (evt.clientX - last_x); 
       clientynew += (evt.clientY - last_y); 
       last_x = evt.clientX; 
       last_y = evt.clientY; 
       //this.setAttribute("viewBox", vb.join(' ')); 
       // updateCanvas(true); 
       $("#svgcontent").show(); 
       $("#svgcontent")[0].setAttribute("x", clientxnew); 
       $("#svgcontent")[0].setAttribute("y", clientynew); 
       svgedit.select.getSelectorManager().selectorParentGroup.setAttribute("transform", "translate(" + clientxnew + "," + clientynew + ")"); 
       if (evt.type === 'mouseup') { dopanning = false; } 

       return false; 
      }).mousedown(function (evt) { 

       var mouse_target = svgCanvas.getMouseTarget(evt); 
       if (svgCanvas.getMode() == "text" || svgCanvas.getMode() == "textedit") { 
        dopanning = false; return; 
       } 
       if ((mouse_target.id.indexOf("grouplayerdragged") > -1 || mouse_target.id.indexOf("hotspot") > -1 || 
       mouse_target.id.indexOf("clonediv") > -1 || mouse_target.tagName === "text")) { dopanning = false; return; } 
       if (selectedElement != null) { 
        dopanning = false; return; 
       } 
       if (evt.button === 0) { 
        dopanning = true; 
        last_x = evt.clientX; 
        last_y = evt.clientY; 
        svgCanvas.clearSelection(true); 
        return false; 

       } 
      }); 

      $(window).mouseup(function() { 
       panning = false; 
       dopanning = false; 
      }); 
+0

我有一個類似的問題。看起來,將任何觸摸事件綁定到元素會導致_pinch zoom_停止工作 – Mohoch

回答

0

你應該使用gesturechange。試試這個方法(這是不是你的精確解,但你可以攻擊它)

var angle = 0; 
var newAngle; 
var scale = 1; 
var newScale; 

function saveChanges() { 
    angle = newAngle; 
    scale = newScale; 
} 
function getAngleAndScale(e) { 

    // Don't zoom or rotate the whole screen 
    e.preventDefault(); 
    // Rotation and scale are event properties 
    newAngle = angle + e.rotation; 
    newScale = scale * e.scale; 
    // Combine scale and rotation into a single transform 
    var tString = "scale(" + newScale + ")"; 
    document.getElementById("theDiv").style.webkitTransform = tString; 
} 
function init() { 
    // Set scale and rotation during gestures 
    document.getElementById("theDiv").addEventListener("gesturechange", getAngleAndScale, false); 
    // Preserve scale and rotation when gesture ends 
    document.getElementById("theDiv").addEventListener("gestureend", saveChanges, false); 
} 

< >

<div style="width:300px;height:300px;overflow:scrool;-webkit-overflow-scrolling: touch;"> 
    <img id="theDiv" style="width:100%;" src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" /> 
</div> 

Try this on your ipad