Leafletjs描画ライブラリを使用して楕円を描く

Question

Leafletjs Drawライブラリを使用して楕円と円を描画しようとしていますが、問題はありません。円境界はmousemoveのマウスポインタでは触れません。ここにコードとフィドルがあります。あなたは、マウスポインタを観察する楕円形を描画する

試みは、円の境界

に触れていないhttps://jsfiddle.net/Lscupxqp/12/

var points = [L.GeoJSON.latLngToCoords(this._startLatLng),L.GeoJSON.latLngToCoords(latlng)]; 

      var x = Math.abs(points[1][0] - points[0][0]); 
      var y = Math.abs(points[1][1] - points[0][1]); 


      var x_percent, y_percent; 
      x_percent = y_percent = 1; 

      //show in % 
      if(x < y) { 
       x_percent = x/y; 
      } 
      else { 

       y_percent = y/x; 
      } 

      this._drawShape(latlng); 

      this._shape.rx = x_percent; 
      this._shape.ry = y_percent; 

GetPathString方法

getPathString: function() { 
    var p = this._point, 
     r = this._radius; 

    if (this._checkIfEmpty()) { 
     return ''; 
    } 

    //console.log(this); 

    if (L.Browser.svg) { 
     var rr = 'M' + p.x + ',' + (p.y - r) + 'A' + (r * this.rx) + ',' + (r * this.ry) + ',0,1,1,' + (p.x - 0.1) + ',' + (p.y - r) + ' z'; 

     return rr; 
    } else { 
     p._round(); 
     r = Math.round(r); 

     return 'AL ' + p.x + ',' + p.y + ' ' + r + ',' + r + ' 0,' + (65535 * 360); 
    } 
    } 

Answer 1

私があなたの間違いを持っ​​ているようです - 変更(p.y - r)〜(p.y - r * this.ry)：

if (L.Browser.svg) { 
     var rr = 'M' + p.x + ',' + (p.y - r * this.ry) + 
     'A' + (r * this.rx) + ',' + (r * this.ry) + ',0,0,0,' + p.x + ',' + (p.y + r * this.ry) + 
     'A' + (r * this.rx) + ',' + (r * this.ry) + ',0,1,0,' + (p.x) + ',' + (p.y - r * this.ry) +' z';