捏/缩放和滚动/缩放点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); 
});