Question

I am trying to draw oval and Circle using Leafletjs Draw library, it works fine but the problem is the Circle boundary doesn't touch with the Mouse pointer on mousemove. here is the code and fiddle.

try to draw the oval you will observe the mouse pointer is not touching the circle boundary

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 method

 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';

Draw oval using Leafletjs Draw Library

1 个答案: