本文介绍了FabricJS没有给我moveX和movementY在IE中平移图像,但它在其他浏览器中工作正常的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在fabric.js中加载图像并尝试使用。
但是,它在Firefox,Chrome中运行良好但在IE中不起作用(它只是渲染图像)。

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).

这是代码:

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

如果我调试,我看到的是 eemovementX 在FF和Chrome的情况下给出正确的值但在IE的情况下它给出 undefined
这是一个Fabric.js问题还是我错过了什么?

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?

推荐答案

好的我在帮助下得到了答案of @Infer-on
代码:

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

这篇关于FabricJS没有给我moveX和movementY在IE中平移图像,但它在其他浏览器中工作正常的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-01 07:37