FabricJS is not giving me movementX and movementY

问题:

I am loading a image in fabric.js and trying to add pan functionality to the image using this link . However, it works fine in Firefox, Chrome but doesn't work in IE(it just renders the image).

Here's the code :

var panImg = function () {
        var panning = false;
        canvas.on('mouse:up', function (e) {
            panning = false;
        });
        canvas.on('mouse:out', function (e) {
            panning = false;
        });
        canvas.on('mouse:down', function (e) {
            panning = true;
        });
        canvas.on('mouse:move', function(e) {
            if (panning && e && e.e) {
                console.log(e.e.movementX);
                var delta = new fabric.Point(e.e.movementX, e.e.movementY);
                canvas.relativePan(delta);
            }
        });
    }

If I debug ,what I see is e.e.movementX gives proper values in case of FF and Chrome but it gives undefined in case of IE. Is this a Fabric.js issue or am I missing something?

回答1:

Okay I got the answer with the help of @Infer-on Code :

canvas.on('mouse:move', function(e) {
            if (panning && e && e.e) {
                var x = e.e.movementX;
                var y = e.e.movementY;
                if(!x) {
                    x = e.e.screenX - previousEvent.e.screenX;
                    y = e.e.screenY - previousEvent.e.screenY;
                }
                var delta = new fabric.Point(x, y);
                canvas.relativePan(delta);
            }
            previousEvent = e;
        });