2

Имеется конструкция, состоящая из изображения, двух кнопок для его зума, и зеленых точек, расположенных поверх синих отметок в самом изображении.

Необходимо сделать так, чтобы зелёные точки позиционировались на синих метках даже при смене масштаба изображения.

На данный момент, при смене позиции точек пропорционально изменению масштаба изображения, я получаю отклонение от синих меток. При большем количестве манипуляций с зумом, отклонение позиции зеленых точек от синих меток только увеличивается.

Пример кода:

$(".zoo_in").click(function() {
  var width = $('.img').width();
  width = width * 1.1;
  $('.img').css({
    "width": width
  });
  $('.point').each(function(i, elem) {
    l = $(this).css('left');
    l = parseInt(l);
    $(elem).css({
      "left": l * 1.1
    });
    t = $(this).css('top');
    t = parseInt(t);
    $(elem).css({
      "top": t * 1.1
    });
  });
});

$(".zoom_out").click(function() {
  var width = $('.img').width();
  width = width / 1.1;
  $('.img').css({
    "width": width
  });
  $('.point').each(function(i, elem) {
    l = $(this).css('left');
    l = parseInt(l);
    $(elem).css({
      "left": l / 1.1
    });
    t = $(this).css('top');
    t = parseInt(t);
    $(elem).css({
      "top": t / 1.1
    });
  });
});
body {
  width: 1080px;
  height: 1080px;
  margin: 0 auto;
  text-align: center;
}
.img {
  width: 900px;
  height: 900px;
  background: url(http://fs214.www.ex.ua/show/283368708529/263754406/263754406.png?800);
  background-repeat: no-repeat;
  background-size: 100%;
}
.zoo_in {
  width: 40px;
  font-size: 40px;
  position: absolute;
  top: 265px;
  z-index: 2;
  left: 55px;
  background: white;
}
.zoom_out {
  width: 40px;
  font-size: 40px;
  position: absolute;
  z-index: 2;
  top: 265px;
  left: 250px;
  background: white;
}
.points {
  position: absolute;
  z-index: 3;
  top: 0;
}
.point_1 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: green;
  position: relative;
  top: 49px;
  left: 216px;
}
.point_2 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: green;
  position: relative;
  top: 130px;
  left: 220px;
}
.point_3 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: green;
  position: relative;
  top: 15px;
  left: 241px;
}
.point_4 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: green;
  position: relative;
  top: 228px;
  left: 154px;
}
.point_5 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: green;
  position: relative;
  top: 275px;
  left: 348px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<body>
  <div class="img"></div>
  <div class="zoo_in">+</div>
  <div class="zoom_out">-</div>
  <div class="points">
    <div class="point_1 point"></div>
    <div class="point_2 point"></div>
    <div class="point_3 point"></div>
    <div class="point_4 point"></div>
    <div class="point_5 point"></div>
  </div>
</body>

Можно ли как-то убрать отклонения в расстоянии, или хотя-бы очень сильно минимизировать?

2 ответа 2

4

Есть 2 варианта:

Первый — хранить координаты точек в массиве — тем самым можно избежать проблемы с накоплением ошибки при операциях. Т.е. Вам нужно в массиве хранить начальные координаты для каждой точки и потом просто умножать их на масштаб.

Второй — хранить положения точек в процентах. Т.е. Вам нужно сначала поставить точку в нужное место и и потом left / parent.width так мы получим проценты и можем их указывать вместо пикселей, но тут нужно что бы родительский контейнер менял размер.

Получается очень даже точно

3
+50

На самом деле, для того, чтобы ваш код заработал, достаточно изменить у точек свойство position: relative; на position: absolute; и добавить margin: -5px; для позиционирования от центра, а затем заново скорректировать координаты.

Но я бы рекомендовал вам переписать ваш код:

  1. оформить скрипт в виде переиспользуемого модуля;
  2. поступить как говорить Mihanik71, и хранить координаты точек в массиве;
  3. вынести общие стили для точек в единый класс;
  4. выработать методологию именования классов.

Получится нечто подобное:

(function($) {
  function customMap($target, options) {
    /**
     * Инициализация конструкции:
     * - для начала соберем координаты всех размещенных точек;
     * - и сохраним размеры изображения, это будет эталонный масштаб;
     */
    var self = this;

    self.pointCoordSet = [];
    self.$img = $(options.img, $target);
    self.$pointSet = $(options.point, $target);
    self.mapWidth = self.$img.width();
    self.mapHeight = self.$img.height();
    self.scale = 1;

    self.$pointSet.each(function() {
      var $point = $(this);
      self.pointCoordSet.push({
        left: parseInt($point.css('left'), 10),
        top: parseInt($point.css('top'), 10)
      });
    });

    /**
     * Добавляем слушателей событий
     */
    $(options.zoomIn, $target).click(function() {
      self.zoomIn();
    });

    $(options.zoomOut, $target).click(function() {
      self.zoomOut();
    });
  }

  customMap.prototype.changeScale = function(scale) {
    var self = this;

    self.$img.css({
      width: self.mapWidth * scale,
      height: self.mapHeight * scale
    });

    self.$pointSet.each(function(i) {
      var $point = $(this);
      $point.css({
        left: self.pointCoordSet[i].left * scale,
        top: self.pointCoordSet[i].top * scale
      });
    });

    self.scale = scale;
  };

  customMap.prototype.zoomIn = function() {
    var self = this;
    self.changeScale(this.scale + .1);
  };

  customMap.prototype.zoomOut = function() {
    var self = this;
    self.changeScale(this.scale - .1);
  };

  var methods = {
    init: function(options) {
      var settings = $.extend({}, $.fn.customMap.defaults, options);

      return this.each(function() {
        var $target = $(this);

        if (!$target.data('customMap')) {
          $target.data('customMap', new customMap($target, settings));
        }
      });
    },

    changeScale: function(scale) {
      return this.each(function() {
        var $target = $(this);

        if ($target.data('customMap')) {
          $target.data('customMap').changeScale(scale);
        } else {
          $.error('customMap not init');
        }
      });
    },

    zoomIn: function(scale) {
      return this.each(function() {
        var $target = $(this);

        if ($target.data('customMap')) {
          $target.data('customMap').zoomIn(scale);
        } else {
          $.error('customMap not init');
        }
      });
    },

    zoomOut: function(scale) {
      return this.each(function() {
        var $target = $(this);

        if ($target.data('customMap')) {
          $target.data('customMap').zoomOut(scale);
        } else {
          $.error('customMap not init');
        }
      });
    }
  };

  $.fn.customMap = function() {
    if (arguments.length && methods[arguments[0]]) {
      return methods[arguments[0]].apply(this, Array.prototype.slice.call(arguments, 1));
    } else {
      return methods.init.apply(this, arguments);
    }
  }

  $.fn.customMap.defaults = {
    img: '.custom-map_img',
    zoomIn: '.custom-map_zoom-in',
    zoomOut: '.custom-map_zoom-out',
    point: '.custom-map_point'
  }
})(jQuery);

// Применение
(function($) {
  $('.js-map').customMap();
  $('.js-map').customMap('changeScale', .5);
})(jQuery);
/* Стили модуля
---------------------------*/

.custom-map {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.custom-map_img {
  width: 900px;
  height: 900px;
  background: url(http://fs214.www.ex.ua/show/283368708529/263754406/263754406.png?800);
  background-repeat: no-repeat;
  background-size: 100%;
}
.custom-map_zoom-in {
  width: 40px;
  font-size: 40px;
  text-align: center;
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;
  background: white;
  cursor: pointer;
}
.custom-map_zoom-out {
  width: 40px;
  font-size: 40px;
  text-align: center;
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 60px;
  background: white;
  cursor: pointer;
}
.custom-map_points {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
}
.custom-map_point {
  margin: -5px;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
}
/* Стили для использования
---------------------------*/

.point-1 {
  top: 42px;
  left: 200px;
}
.point-2 {
  top: 54px;
  left: 220px;
}
.point-3 {
  top: 40px;
  left: 247px;
}
.point-4 {
  top: 262px;
  left: 159px;
}
.point-5 {
  top: 320px;
  left: 353px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<body>
  <div class="custom-map js-map">
    <div class="custom-map_img"></div>
    <div class="custom-map_zoom-in">+</div>
    <div class="custom-map_zoom-out">-</div>
    <div class="custom-map_points">
      <div class="custom-map_point point-1"></div>
      <div class="custom-map_point point-2"></div>
      <div class="custom-map_point point-3"></div>
      <div class="custom-map_point point-4"></div>
      <div class="custom-map_point point-5"></div>
    </div>
  </div>
</body>

Это фундамент, который вы можете дорабатывать и модифицировать для реализации собственных задач.

Для повышения собственного уровня, рекомендую вам ознакомиться со следующими материалами:

А это вам на будущее https://new.vk.com/bashkos?w=note1981585_11784872

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.