Canvas 元素 + Javascript 在 Chrome 和 Firefox 中工作，而不是在 Internet

Canvas element + Javascript working in Chrome and Firefox, not in Internet Explorer

本文关键字：工作 Internet Firefox 元素 Javascript Chrome Canvas      更新时间：2023-09-26

我正在使用Leaflet FullCanvas插件的修改版本在地图上画线。这些线条在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);
            }
        });
    },

有人知道这里发生了什么吗？修复会很好，但如果有人能指出发生这种情况的原因，以便我可以自己尝试修复，我已经很高兴了。

为什么？

因为鼠标滚轮事件尚未标准化。(浏览器制造商注意：说真的???为什么你还没有标准化鼠标滚轮事件。滚动鼠标已经存在多年了！-- 咆哮结束/(。

修复：

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

问题已解决：

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((。

相关文章：