捏/縮放和滾動/縮放點kinetic.js

Question

我想實現我kineticjs項目上的放大。我發現這兩種來源，似乎很好地工作，當他們獨立地實現：

Scroll wheel zoom to point on desktop

Pinch/zoom to point on mobile

問題是，我需要在移動設備上的捏/變焦，並在桌面上時，滾動縮放設備。

有沒有人有kinetic.js項目上的兩個方法的任何示例實現？ 預先感謝您。

滾輪變焦，在桌面上點

var ui = { 
    stage: null, 
    scale: 1, 
    zoomFactor: 1.1, 
    origin: { 
     x: 0, 
     y: 0 
    }, 
    zoom: function (event) { 
     event.preventDefault(); 
     var evt = event.originalEvent, 
      mx = evt.clientX /* - canvas.offsetLeft */ , 
      my = evt.clientY /* - canvas.offsetTop */ , 
      wheel = evt.wheelDelta/120; //n or -n 
     var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0)); 
     var newscale = ui.scale * zoom; 
     ui.origin.x = mx/ui.scale + ui.origin.x - mx/newscale; 
     ui.origin.y = my/ui.scale + ui.origin.y - my/newscale; 

     ui.stage.setOffset(ui.origin.x, ui.origin.y); 
     ui.stage.setScale(newscale); 
     ui.stage.draw(); 

     ui.scale *= zoom; 
    } 
}; 

捏/變焦移動

var layer = new Kinetic.Plugins.PinchLayer({ 
    container: stage, 
    width: image.getWidth(), 
    height: image.getHeight() 
}); 

Answer 1

點我使用jquery.mousewheel爲雙擊自動滾屏：

$("#container").mousewheel(function(e, delta){ 
    // your zoom function 
    camera.zoom(delta); 
}); 

and HammerJS for pinch zoom：

var transformer = Hammer(document.getElementById("container")); 
var startScale; 
transformer.on("transformstart", function (e) { 
    startScale = camera.getScale(); // 
}); 
transformer.on("transform", function (e) { 
    // setting new scale 
    // or you can find delta here by youself 
    camera.setScale(startScale * e.gesture.scale); 
});