Блог

Главная - Вопросы по программированию - Рисуем овал с помощью библиотеки рисования Leafletjs

Рисуем овал с помощью библиотеки рисования Leafletjs

#javascript #math #canvas #leaflet

#javascript #математика #холст #листовка

Вопрос:

Я пытаюсь нарисовать овал и круг с помощью библиотеки рисования Leafletjs, это работает нормально, но проблема в том, что граница круга не соприкасается с указателем мыши на 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);
    }
  }

Комментарии:

1. Я вижу в вашей скрипке, что центр круга не стабилен, а движется по вертикальной (меридиональной) линии. Должен ли он быть закреплен, когда мышь нажата? Какая функция рисует ваш круг и каковы параметры?

2. Функция @MBo Circle, описанная выше в моем коде, рисует круг на основе SVG

Ответ №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';