Question

我正在尝试对我的kineticjs项目进行缩放。我发现这两个源在它们独立实现时似乎工作正常：

问题是我在移动设备上需要捏合/缩放，在桌面设备上滚动缩放。

有没有人在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);
});

HammerJS用于缩放缩放：

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);
});

捏/变焦＆amp;滚动/缩放以指向kinetic.js

1 个答案: