Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.07.2014, 05:15
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 01.08.2010
Сообщений: 46

Центрирования divа в контейнере при использовании в css transform scale
Всем привет.
Дано: div#view контейнер (на нем весят все события), в котором находится еще один div#map с огромной матрицей divиков.cells внутри.
Задача: сделать #map перетаскиваемым и зумящимся с колесика мышки.
Проблема: я очень долго тупил над вопросом, что делать после применения к #map css trasform scale. Куда, насколько и что конкретно двигать.

Решение: Главная проблема была тут:
checkborders: function(){
 		this.border.left = 200 - (( window.innerWidth - (window.innerWidth * this.zoomdelta) ) / 2) / this.zoomdelta;
 		this.border.top = 200 - (( window.innerHeight - (window.innerHeight * this.zoomdelta) ) / 2) / this.zoomdelta;
 		this.border.right =  -200-30*114+window.innerWidth + (( window.innerWidth - (window.innerWidth * this.zoomdelta) ) / 2) / this.zoomdelta;
 		this.border.bottom= -200-20*66+window.innerHeight + (( window.innerHeight - (window.innerHeight * this.zoomdelta) ) / 2) / this.zoomdelta;
 	}

200 - реальный желаемый отступ по краям.
30*114 дивы в одной строчке на их ширину
20*66 строчки на высоту дивов

Рабочий пример для Firefox, Opera, Chrome: _http://mogame.org/test2.php
js, css, scale, transform, zoom, zooming, scaling, position div, mapping

Последний раз редактировалось morg4n, 28.07.2014 в 22:22.
Ответить с цитированием
  #2 (permalink)  
Старый 28.07.2014, 10:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,127

morg4n,
у вас вопрос или презентация? и почему бы недоделать для ie
Ответить с цитированием
  #3 (permalink)  
Старый 28.07.2014, 22:25
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 01.08.2010
Сообщений: 46

У меня был вопрос, но перед отправкой решил слегка упростить код и решение нашлось само собой. Я пытался найти информацию по этому вопросу в сети - у меня не вышло, поэтому решил поделиться, может кому пригодится.
В принципе вопрос совместимости с последними IE не так уж и плох, когда я допилю, выложу обновленный код. Но на текущем этапе разработки поддержка IE не является главной целью.
Ответить с цитированием
  #4 (permalink)  
Старый 28.07.2014, 22:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,127

morg4n,
для ie и нетолько ... http://learn.javascript.ru/play/vEZYec
Ответить с цитированием
  #5 (permalink)  
Старый 28.07.2014, 23:14
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 01.08.2010
Сообщений: 46

Эта часть, я так понимаю:
view.element.style.transform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.webkitTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.msTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.mozTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.oTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";


У меня на деле отрисовка карты, тоже идет через js. IE ее вообще не рисует.

element: document.createElement("div"),

.....
build: function(){
//map cells json с координатами, айди, и прочей лабудой (далее нужны координаты)
a = map.cells;
		for(key in a){
			 if (a.hasOwnProperty(key)  && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294){
			 	var row;
			 	if(a[key][3] == 1){
			 		row = document.createElement("div");
			 		row.className = "row";
			 		map.element.appendChild(row);
			 	}
       			element = document.createElement("div");
//watter grass mountain из массива с вариантами текстур
       			element.className = map.terrain[a[key][8]][2];
       			element.className += " cell";

       			element.setAttribute("data-row",a[key][2]);
       			element.setAttribute("data-col",a[key][3]);

       			row.appendChild(element);
       			map.cells[key].element = element;
    			}
		}
		}
Ответить с цитированием
  #6 (permalink)  
Старый 28.07.2014, 23:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,127

morg4n,
а консоль в ie что шепчет?
Ответить с цитированием
  #7 (permalink)  
Старый 28.07.2014, 23:32
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 01.08.2010
Сообщений: 46

ie11. win81.
Ничего в консоли нет. было б че в консоли
Ответить с цитированием
  #8 (permalink)  
Старый 29.07.2014, 05:11
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 01.08.2010
Сообщений: 46

Я что-то очень сильно туплю с зум эффектом. Сейчас при наведение на ячейку прямоугольную 128*64 пикселя (но так как они у меня накладываются друг на друга, рабочая область 128х32 обведена черной линией), я проверяю попадаю ли я в изометрическую часть ячейки, или на ее соседей (если левее или правее белых линий).


Вся магия в функции getBoundingClientRect(). Я, чесслово, не понимаю, по видимому, как работает гугл. Потому, что 'js element screen position' далеко не сразу привел меня к этой чудесной функции. Они мне все твердили про: scrollLeft, clientLeft, offsetLeft! Идиоты.

cellmouseover: function(e){
		if(!e) e = event || window.event;
		var cell = e.target;
		
		//чудо функция! положение ячейки, "начало координат"
		var pos = cell.getBoundingClientRect();

		var cellx=parseInt(cell.getAttribute("data-x")), 
			celly=parseInt(cell.getAttribute("data-y"));

		this.currentdiv = cell.id;

		zd = view.zoomdelta;
		
		posx = pos.left + e.pageX;
		posy = pos.top + e.pageY;
		

		posx = posleft + e.pageX;
		posy = postop + e.pageY;
		//левее первой белой линии
		if(posy < (64*zd - posx) / 2){
			celly--;
			}
		//правее второй белой линии
		else if(posy < (1/2)*(posx - 64*zd)){
			cellx++;
			}
		
		//предыдущая и текущая ячейки
		beforecell = this.currentcell;
		this.currentcell = cellx+"-"+celly;
		//снять выделение с прошлой и одеть на новую ячейки
		if(beforecell != this.currentcell && beforecell != 0)
			$(beforecell).classList.remove('selected');
		$(this.currentcell).classList.add('selected');
	}
Изображения:
Тип файла: png cell-example.png (38.0 Кб, 4 просмотров)

Последний раз редактировалось morg4n, 29.07.2014 в 09:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не выводится результат MySQL (при использовании AJAX) iBars AJAX и COMET 1 17.12.2012 07:13
Как запретить применение css при изменении окна браузера east (X)HTML/CSS 7 12.10.2012 20:23
Подключение другого CSS при выводе через IFRAME Smokvin Events/DOM/Window 7 16.07.2012 11:03
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 14:15