캔버스 요소 + Internet Explorer가 아닌 Chrome 및 Firefox에서 작동하는 Javascript

Question

수정 된 버전의 리플릿을 사용하여 FullCanvas Plugin 리플렉션을 사용하여지도에 선을 그립니다. 이 라인은 Firefox와 Chrome에서 완벽하게 작동하지만 Internet Explorer (버전 11, Windows 8.1 사용)에서는지도를 이동/확대/축소 할 때이 라인이 재설정되지 않습니다.

http://jsfiddle.net/tee99z65/

드래그 앤 크롬이나 파이어 폭스, 다음 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

문제 해결 :

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

단원 학습

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

곡선을 ​​그리는 함수 drawCurve는()에서 편집 된 : beginPath() 및 closePath()를 잊지 마십시오.

Answer 2

왜?

마우스 휠 이벤트가 아직 표준화되지 않았기 때문에. (브라우저 제조업체 참고 : 심각하게!, 왜 마우스 휠 이벤트를 표준화하지 않았습니까? 스크롤 마우스는 몇 년 전부터 사용되었습니다.

수정 : 당신은 IE에 mousewheel 이벤트 대신에 대부분의 다른 브라우저가 듣는 DOMMouseScroll 이벤트를 수신해야합니다

. 내가 leavlet과 함께 작동하지 않지만, 당신이 수정 프로그램을 추가 해야하는 것 같습니다.