Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   оптимизация drag and drop (https://javascript.ru/forum/events/31024-optimizaciya-drag-drop.html)

Deff 31.08.2012 20:14

cyber,
1. Начальные координаты точки считай от левого верхнего угла пойнтера - до левого верхнего угла карты(если отсутствуют маргины для пойнтера

cyber 31.08.2012 20:20

Цитата:

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




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

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

а смысел от margin если он отрицательный оно все равно будет уезжать в верх, и даже если задать положительный будет не нужно смещение относительно начальных координат и все равно не поможет так как размер точки
.point_on_map {

width: 20px;
height: 34px;
background-image:url([url]http://www.google.com/mapfiles/marker.png);[/url]

}

а то непонятно смещение на -40 px в лево и на -124 в высоту

cyber 31.08.2012 20:23

Цитата:

Сообщение от Deff (Сообщение 202043)
cyber,
1. Начальные координаты точки считай от левого верхнего угла пойнтера - до левого верхнего угла карты(если отсутствуют маргины для пойнтера


Deff 31.08.2012 20:24

Цитата:

Сообщение от cyber
а то непонятно смещение на -40 px в лево и на -124 в высоту

Просто тады ты Визуально (и это будет соответствовать left и top для заострёнки) считаешь и вводишь координаты от заострённого края пойнтера до левого верхнего угла картинки карты

cyber 31.08.2012 20:29

если бы проблема была в этом смещение было бы в пару раз меньши

Deff 31.08.2012 20:50

cyber,
1. Считаю нужно добивацо ясности во всём

2. Покажи реальный подсчет координаты пойнтера?

3. Где начальные неизменяемые установки для заострённого края(от краёв картинки карты) при максимальном масштабе ? ,которые в дальнейшем множацо на zoom.

cyber 31.08.2012 21:06

Цитата:

Сообщение от Deff (Сообщение 202054)
cyber,
1. Считаю нужно добивацо ясности во всём

2. Покажи реальный подсчет координаты пойнтера?

3. Где начальные неизменяемые установки для заострённого края(от краёв картинки карты) при максимальном масштабе ? ,которые в дальнейшем множацо на zoom.

ты об этом?
нет разницы чей вариант использовать твой или мой результаты одинаковы
function setNewPosition (zoom, width, height) {

 
points.each(function(index, element) {
 
  var left = parseInt($(this).css('left'));
  var top = parseInt($(this).css('top'));

  if (zoom) {
   left *= width / zooming.width();
   top *= height / zooming.height();
  } else {
	left /= zooming.width() / width;
   top /= zooming.height() / height;  
	  
	}
	

   $(this).css({
	  left:left+'px',
	  top: top +'px'  
	 }); 
	 
});
		
	
}

я только что провел эксперемент, взял обьект на карте измерял расстояние до него при исходном размере , рассчитал по той формуле что и для точек и получилось что считает правильно, потом проверил линейкой(плагин линейка:)) при макс зуме и совпали координаты(с не большую погрешностью).Значит дело все таки в самих точках

cyber 31.08.2012 21:15

ты прав дело в точка, чем меньше точка тем меньше смещение

cyber 31.08.2012 21:57

насчет твоей идеи с margin , проще тогда уже отнимать от позиции точки чем ставить margin , но это не помогает.
не хрина не помогает

cyber 31.08.2012 23:03

все мои нервы сдали!!!
теперь точка будет нарисована и координаты буду до нее расчитыватся=)

Deff 31.08.2012 23:14

Цитата:

Сообщение от cyber
все мои нервы сдали!!!
теперь точка будет нарисована и координаты буду до нее расчитыватся=)

По идее , при маргинах (а их просто задаём в файле стиля) фактически размера объекта и будут задавацо точкой

Имхо - разделяй и властвуй - чем те маргины мешают, не участвующие в скрипте ?

cyber 31.08.2012 23:20

тем что я уже пробывал, эффекта 0!

Deff 31.08.2012 23:30

cyber,
ща я тьву рожу элемент

cyber 31.08.2012 23:31

Цитата:

Сообщение от Deff (Сообщение 202098)
cyber,
ща я тьву рожу элемент

что значить "тьву"?=)

Deff 31.08.2012 23:32

Нууу ты опять стер демку - ну где я найду элементы ??

"тьву"?=) - это типо - тебе (Или Вам)

cyber 31.08.2012 23:43

эм..
я не стирал , щас пере залью

cyber 31.08.2012 23:44

http://cyberua.16mb.com/files/

Deff 31.08.2012 23:45

Цитата:

Сообщение от cyber
, щас пере залью

мне нужен сам пойнтер вместе с миниокружением

cyber 31.08.2012 23:50

т.е с мини окружением?

Deff 31.08.2012 23:56

cyber,
ну он по моему в линке <a стоял ?

cyber 31.08.2012 23:57

ты об этом?
.point_on_map {

width: 20px;
height: 34px;
background-image:url([url]http://www.google.com/mapfiles/marker.png);[/url]

}	


.map a {
position:absolute;
-webkit-transition: all 1s ease;	
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;

}

<a href="#" class="point_on_map" style="left:20%; top:30%;"></a>
<a href="#" class="little_point" style="left: 435px; top: 384px;"></a>
<a href="#" class="point_on_map" style="left: 427px; top: 356px; "></a>

Deff 01.09.2012 00:18

:dance:
<style type="text/css">
.point_on_map {
width: 0px;
height: 0px;
position:absolute;
display:block;
*!*
border:1px blue solid;
*/!*
}


.point_on_map img{
 margin:-34px 0 0 -10px!important;
 position:absolute;
 border:0 none transparent;
}
</style>
<br>
<a href="#" class="point_on_map"  style="left: 435px; top: 384px;"><img src="http://www.google.com/mapfiles/marker.png" /></a>

cyber 01.09.2012 00:27

теперь точка уежает, не много меньше и в низ

Deff 01.09.2012 00:31

cyber,
Поставь точку в начало картинки карты позицию left:2px; top:2px;
Отслеживай left: точки (выводи знчение в input тext

cyber 01.09.2012 00:42

2px не получится ты же сам поставил margin - 34

Deff 01.09.2012 00:43

cyber,
Гы - должно получицо - маргин то для картинки - а ты двигаешь <a
Если не убирал бордер - красная точка должна быть на карте!

Вот в макромасштабе (бордер сделал синим

cyber 01.09.2012 00:51

эм..
не двинулась http://cyberua.16mb.com/files/
а вторая сместилась, почему?

cyber 01.09.2012 00:59

ахахха, я понял, сместилась ссылка а картинка осталась на месте?!

Deff 01.09.2012 01:21

cyber,
Поменяй css - по-ходу глюк с анимацией в css

<style>
*{margin:0; padding:0;}

.wrapper .zooming-map,.zooming-map > img{
position:absolute;
width:100%;
height:100%;

}
.wrapper .zooming-map,.zooming-map {
   position:absolute;z-index:100;
   transition-duration: 0.06s;
  -webkit-transition-duration: 0.06s;
  -moz-transition-duration: 0.06s;
  -o-transition-duration: 0.06s;
  -ms-transition-duration: 0.06s;/* IE9+ */

}	
.point_on_map {
width: 0px;
height: 0px;
position:absolute;
display:block;
border:1px red solid;
}


.point_on_map img{
 margin:-34px 0 0 -10px!important;
 position:absolute;
 border:0 none transparent;
}





.map{
	width:1800px;
	height:1000px;
	overflow:hidden;
	/*margin:10px;*/
	border:1px solid black;
	
	}

.map .wrapper{
	
 width:1600px;
height:1000px;	
cursor: move;
}	


.little_point {
	
position:absolute;
width:5px;
height:5px;
background-color:#000;
-webkit-transition: all 1s ease;	
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
	
	
	}
		
</style>

cyber 01.09.2012 01:25

неа, вторая точка как двигалась так и двигается

Deff 01.09.2012 01:32

Т.е при такой задержке в Анимации - Ти неправильно считываешь координаты, пойнтера - поскольку их нун считывать не из Dom - а создавать массив предыдущей позиции

Чего бы не было при проставке координат пойнтеров при максимальном размере карты и чисто домножении на zoom

Deff 01.09.2012 01:33

Цитата:

Сообщение от cyber
неа, вторая точка как двигалась так и двигается

Ты не заменил css целиком!!!

cyber 01.09.2012 01:43

заменил, и до меня дошло в чем проблема она не в css и не в js .
я не учел один фактор, что зум считает с учетом того что изображение тоже будет зумится
если увеличивать точки вместе с картинкой то все станет ясно =)

левый угол именно в той точке где всегда оказывалась картинка

Deff 01.09.2012 01:50

Цитата:

Сообщение от cyber
я не учел один фактор, что зум считает с учетом того что изображение тоже будет зумится

Поэтому зум нужно получать не считыванием width из DOM - а чисто задавать новое width c шагом и его запоминать
и на следующем шаге - зуммить от запомненного

cyber 01.09.2012 01:56

Цитата:

Сообщение от Deff (Сообщение 202171)
Поэтому зум нужно получать не считыванием width из DOM - а чисто задавать новое width c шагом и его запоминать
и на следующем шаге - зуммить от запомненного

и толку оно будет одинаково
к примеру :
текущий размер лефт = 1600, топ = 1000
зум - 1.5

1600* 1.5 = 2400
1000* 1.5= 1500
запомнили эти 2 значения
в итоге
zooming.width() == 2400
zooming.height() = 1500

cyber 01.09.2012 01:57

нужно просто расчитывать координаты точек с учетом того что они зумтся

cyber 01.09.2012 02:10

пошел я спать, завтра до пилю.
спокойной ночи=)

Deff 01.09.2012 02:12

Цитата:

Сообщение от cyber
текущий размер лефт = 1600, топ = 1000
зум - 1.5

Чушь - ты не учитываешь задержки при увеличении уменьшении - css еще будет увеличивать - а ти ....
карочь - делай как заешь - я и спойнтерами независимую штуку рассказал (посколь координата константа - zoom текущий)

И с зуммом, запоминая ширину картинки на предыдущем шаге...
Хотя конечно свои идеи интересней

cyber 01.09.2012 02:28

а ну так я добавлю transitionEnd и пока оно не наступит не каких плюшек пользоваться зумом будет нельзя

Deff 01.09.2012 02:31

Цитата:

Сообщение от cyber
а ну так я добавлю transitionEnd и пока оно не наступит не каких плюшек пользоваться зумом будет нельзя

Если запоминать ширину карты на предыдущем шаге - на поведение css можно наплевать


Часовой пояс GMT +3, время: 02:35.