Форум

Deff · #**111** (**permalink**) 30.08.2012, 22:25

cyber,
У тебя должна быть текущая координата левого верхнего угла картинки карты и константы смещения пойнтера - leftt00 и тор00 (для каждой точки ) относительно левого верхнего угла картинки карты при максимальном масштабе карты (далее та же схема - что мну выше пояснил
Далее ты вычисляешь поправку координаты пойнтера относительно карты, - домножая на zoom и добавляешь текущие координаты угла карты(относительно того родительского блока , где лежат пойнтеры), тогда любые погрешности карты не влияют на пойнтеры

cyber · #**112** (**permalink**) 30.08.2012, 22:59

я устанавливаю координаты относительно zooming (блока в котором лежат карта и точки)

points.each(function() {

  var coords = $(this).offset();
  var zoomCoord = zooming.offset();
  
   $(this).css({
	  left: coords.left - zoomCoord.left +'px',
	  top: coords.top - zoomCoord.top +'px'  
	     
	   
	   });

и потом просто получаю координаты из самих точек (беру тот вариант который делал изначально, так как работают они одинаково и твой и мой)

var left = parseInt($(this).css('left'));
var top = parseInt($(this).css('top'));

и потом умножаю их на зум

cyber · #**113** (**permalink**) 31.08.2012, 00:09

вот не пойму где я напортачил , что появляется смещение=(

cyber · #**114** (**permalink**) 31.08.2012, 00:36

все таки дело не в отступе

<!DOCTYPE HTML>
<html>
  <head> 
  <style>
    #wrapper {
      position:absolute;
    }
    
    #wrapper > a{
      top:50px;
      left:70px;
      width:30px;
      height:30px;
      background-color:red;
      position:absolute;
      border-radius:50%;
    
    }
    
    </style>
  </head>
  <body>

<div id='wrapper'> 
 <img src='http://worldofwarplanes.ru/dcont/fb/media/contest_24_02_2012/graf_grob.jpg'> 
  <a href='https://www.google.com.ua/'></a>
  <div>    
    
    <a href='#' onclick='newSize()'>size</a> 
    <script>

      function newSize() {
        var zoomL = 1000 / 640;
        var zoomT = 1000 / 480;
        
        _('img').style.width = 1000+'px';
        _('img').style.height = 1000+'px';
      
        _('a').style.left = 70 * zoomL+'px';
        _('a').style.top = 50 * zoomT+'px';
      }
     
           function _(selector) {
           return document.querySelectorAll(selector)[0];
             
           }
    </script>

  </body>
</html>

cyber · #**115** (**permalink**) 31.08.2012, 17:32

Deff, уже вариантов нет для точек, у тебя еще идеи остались?

cyber · #**116** (**permalink**) 31.08.2012, 18:36

пытаюсь понят как тут http://vectorflower.com/preview/smoo...m/sample5.html
у них точка почти не смещается

Deff · #**117** (**permalink**) 31.08.2012, 19:22

cyber,
1. Всё абсолютно верно, если про логику работы, что я объяснял

2. Замеченные Баги на версии по ссылке =>
Первое небольшое увеличение(масштаба) - крутка колесиком на пол-щелчка - Всегда проходит корректно , без смещения точек относительно карты!, второе и последущие - глюки.

cyber,
а) Нет привязки координат точек к углу карты http://cyberua.16mb.com/files/general.jpg и выставления констант смещений(константы смещений приведенные к максимальному масштабу карты left и top точки (они посточнны и неизменяемы, меняеется лишь множитель zoom.

2) Нет явного вычисления координат угла картинки карты относительно id="zooming"

cyber · #**118** (**permalink**) 31.08.2012, 19:39

Цитата:

а) Нет привязки координат точек к углу карты http://cyberua.16mb.com/files/general.jpg

эм..
т.е нет я определяю координаты блока zooming а его координаты такие же как и у карты

Цитата:

выставления констант смещений(константы смещений приведенные к максимальному масштабу карты left и top точки

не уловил смысел, если ты про тот вариант что ты предлагал то вот сам глянь тут видна его погрешность http://learn.javascript.ru/play/LkXCU (нажать на кнопку size).

Цитата:

2) Нет явного вычисления координат угла картинки карты относительно id="zooming"

есть

Deff · #**119** (**permalink**) 31.08.2012, 20:00

Сообщение от cyber

т.е нет я определяю координаты блока zooming а его координаты такие же как и у карты

Карта движецо относительно родителя - zooming - посколь у него позиция relative, любые лефт и топ для картинки - это смещения относительно родителя, - выставляй тады left=0 и top=0 у картинки карты,

Сообщение от cyber

не уловил смысел, если ты про тот вариант что ты предлагал то вот сам глянь тут видна его погрешность http://learn.javascript.ru/play/LkXCU (нажать на кнопку size).

Ты не добавил постоянный margin-left:-1/2ширины кружка
и margin- тоp:-1/2высоты кружка - а так всё стоит - обведи верхнюю левую точку крепления кружка крестиком на картинке

Для варианта метки - "Восклицательным знаком"(как сейчас на карте) = margin- тоp:-высота ("Значка")

cyber · #**120** (**permalink**) 31.08.2012, 20:04

вот смотри
использовал плагин ленейку для хрома , и посчитал ширину от верха карты до точки(так как все не влезло на экран показано для высоты) на панельки в верху видно сколько от вверха карты, в консоли видно текущую позицию .
исходные координаты точки left = 100; top = 100;
начальная ширина карты = 1000px
конечная = 4890
4890 / 1000 = 4,89;
4,89 * 100 = 489
ну вот где ошибка, почему точка уежает?

Форум

Справочник

Discord чат

Курсы javascript