javascriptjquerykineticjsjquery-eventsmousewheel

Mouse wheel event in not getting triggered


I using Kinetijs in my project and trying to implement zoom using mousewheel. I don't know why the event is not getting triggered. I am doing this:

//... a helper object for zooming
var zoomHelper = {
    stage: null,
    scale: 1,
    zoomFactor: 1.1,
    origin: {
        x: 0,
        y: 0
    },
    zoom: function(event) {
        event.preventDefault();
        var delta;
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }
        var evt = event.originalEvent,
            mx = evt.clientX - zoomHelper.stage.getX(),
            my = evt.clientY - zoomHelper.stage.getY(),
            zoom = (zoomHelper.zoomFactor - delta),
            newscale = zoomHelper.scale * zoom;
        zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
            .x - mx / newscale;
        zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
            .y - my / newscale;
        zoomHelper.stage.setOffset({
            x: zoomHelper.origin.x,
            y: zoomHelper.origin.y
        });
        zoomHelper.stage.setScale({
            x: newscale,
            y: newscale
        });
        zoomHelper.stage.draw();
        zoomHelper.scale *= zoom;
    }
};

$(function() {
    var width = $(document).width() - 2,
        height = $(document).height() - 5;
    var stage = zoomHelper.stage = new Kinetic.Stage({
        container: 'container',
        width: width,
        height: height,
        draggable: true
    });
    var layer = new Kinetic.Layer();
    
    var background=new Kinetic.Rect({
        x:0,
        y:0,
        width: width,
        height: height,
        fill:'#E4E4E4'
    });

    var box1 = new Kinetic.Circle({
        x: 50,
        y: 50,
        radius: 50,
        fill: '#00D200',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });
    
    var box2  = new Kinetic.Circle({
        x: 150,
        y: 150,
        radius: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });
    
    // add cursor styling
    box1.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    box1.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });
    
    // add cursor styling
    box2.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    box2.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });

    layer.add(background);
    layer.add(box1);
    layer.add(box2);
    stage.add(layer);

    $(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
});

I have created fiddle for this. I don't know whats going wrong. Please help.


Solution

  • mousewheel event is non-standard and deprecated. Use wheel event instead, and it will work fine: http://jsfiddle.net/Lhru88oq/4/

    //... a helper object for zooming
    var zoomHelper = {
        stage: null,
        scale: 1,
        zoomFactor: 1.1,
        origin: {
            x: 0,
            y: 0
        },
        zoom: function(event) {
            event.preventDefault();
            var delta;
            if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
                if (event.originalEvent.detail > 0) {
                    //scroll down
                    delta = 0.2;
                } else {
                    //scroll up
                    delta = 0;
                }
            } else {
                if (event.originalEvent.wheelDelta < 0) {
                    //scroll down
                    delta = 0.2;
                } else {
                    //scroll up
                    delta = 0;
                }
            }
            var evt = event.originalEvent,
                mx = evt.clientX - zoomHelper.stage.getX(),
                my = evt.clientY - zoomHelper.stage.getY(),
                zoom = (zoomHelper.zoomFactor - delta),
                newscale = zoomHelper.scale * zoom;
            zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
                .x - mx / newscale;
            zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
                .y - my / newscale;
            zoomHelper.stage.setOffset({
                x: zoomHelper.origin.x,
                y: zoomHelper.origin.y
            });
            zoomHelper.stage.setScale({
                x: newscale,
                y: newscale
            });
            zoomHelper.stage.draw();
            zoomHelper.scale *= zoom;
        }
    };
    
    $(function() {
        var width = $(document).width() - 2,
            height = $(document).height() - 5;
        var stage = zoomHelper.stage = new Kinetic.Stage({
            container: 'container',
            width: width,
            height: height,
            draggable: true
        });
        var layer = new Kinetic.Layer();
        
        var background=new Kinetic.Rect({
            x:0,
            y:0,
            width: width,
            height: height,
            fill:'#E4E4E4'
        });
    
        var box1 = new Kinetic.Circle({
            x: 50,
            y: 50,
            radius: 50,
            fill: '#00D200',
            stroke: 'black',
            strokeWidth: 2,
            draggable: true
        });
        
        var box2  = new Kinetic.Circle({
            x: 150,
            y: 150,
            radius: 50,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 2,
            draggable: true
        });
        
        // add cursor styling
        box1.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        box1.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });
        
        // add cursor styling
        box2.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        box2.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });
    
        layer.add(background);
        layer.add(box1);
        layer.add(box2);
        stage.add(layer);
    
        $(stage.content).on('wheel DOMMouseScroll', zoomHelper.zoom);
    });
    <script type="text/javascript" src="https://rawgit.com/ericdrowell/KineticJS/master/kinetic.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <div id="container"></div>