Question

我正在使用Leaflet FullCanvas Plugin的修改版本在地图上绘制线条。这些行在Firefox和Chrome上可以很好地找到，但在Internet Explorer（版本11，我使用的是Windows 8.1）中，这些行在移动/缩放地图时永远不会被重置。我做了一个小提琴来说明问题：

http://jsfiddle.net/tee99z65/

尝试在Chrome或Firefox上进行拖动和缩放，然后尝试在Internet Explorer（11）上进行拖动和缩放。这段代码发生了什么？每次需要重绘行时调用的方法是 drawCanvas（）：

drawCanvas: function () {
        var canvas = this.getCanvas();
        var ctx = canvas.getContext('2d');
        var me = this;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var bounds = this._myMap.getBounds();
        if (!this.options.filterPointsInBounds) bounds = new L.LatLngBounds([-90, -180], [90, 180]);
        var points = this._myQuad.retrieveInBounds(this.boundsToQuery(bounds));
        points.forEach(function (point) {
            var d = point.data;
            if (d.draw && !d.draw(d)) return;    // allows dynamic filtering of curves
            var spoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.slat, d.slon));
            if (d.tlat && d.tlon) {
                var tpoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.tlat, d.tlon));
                me.drawCurve(point, spoint, tpoint, d.style ? d.style(d) : null);
            }
        });
    },

有没有人知道这里发生了什么？解决方案会很好，但是如果有人能指出为什么这种情况发生，我很高兴，所以我可以自己尝试修复。

Answer 1

<强>为什么吗

因为鼠标滚轮事件尚未标准化。（请注意浏览器制造商：严重！??? ，为什么还没有标准化鼠标滚轮事件。滚动鼠标已存在多年了！ - 咆哮结束/）。

<强>修正：

您必须在IE上侦听mousewheel事件，而不是大多数其他浏览器都在监听的DOMMouseScroll事件。我没有使用leavlet，但这似乎是你需要添加修复程序的地方。

Answer 2

问题解决了：

http://jsfiddle.net/tee99z65/3/

绘制曲线的函数drawCurve（）已经从：

进行了编辑

ctx.moveTo(startPoint.x, startPoint.y);
ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
ctx.stroke();

致：

 ctx.beginPath();
 ctx.moveTo(startPoint.x, startPoint.y);
 ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
 ctx.stroke();
 ctx.closePath();

获得的经验：永远不要忘记beginPath（）和closePath（）。

Canvas元素+ Javascript在Chrome和Firefox中运行，而不是在Internet Explorer中

2 个答案: