Длительный слушатель, первый раз вызывающий абонент.
Хорошо, я приношу свои извинения за длину этого сообщения, но я хочу быть предельно ясным в том, что я пытаюсь сделать, и о том, что я пытался, надеюсь, руководствовать ваши ответы.
Цель: Я пытаюсь создать сетку из плиток (изображений) 100 х 100, и я буду отображать только часть сетки за раз, потому что изображения 240 х 120. Нажимая кнопки (обратите внимание: нет необходимости в прокрутке мыши, масштабировании и т.д..), пользователь будет перемещаться по горизонтали и по вертикали.
В качестве аналогии возьмите шашку, которая настроена для игры, и вы смотрите на нее. Было бы довольно просто отобразить, требуя всего лишь нескольких базовых изображений и помещая их в сетку. Теперь подумайте, что вы только хотели показать нижнюю 1/3 платы. Затем, когда пользователь нажимает на них, они перемещают свой вид на середину, а другой щелчок берет их на верхнюю 1/3 панели. Это простой пример того, что я пытаюсь выполнить, за исключением гораздо большей сетки с меньшим представлением/перемещением.
Что я пробовал:
- Сначала я написал код в PHP, чтобы нарисовать полную сетку 100x100, и все выглядело великолепно.
- Затем я изменил код, чтобы на самом деле писать файлы для каждого квадрата, сохраняя их как X-Y.png
- Я втянулся в мир инструментов карты и инструментов типа масштабирования.
- У меня был некоторый частичный успех при написании собственного решения.
Инструменты карты/Масштабирование сбоя:
После получения полной карты и фрагментов я попытался выяснить, как черт прокручивать часть этого окна. Лампочка погасла: "как насчет того, как карты Google делают что-то!" Это, когда начались неприятности, и я засасывал кроличью нору, изучая все эти картографические инструменты, которые действительно меня не достали, потому что просто они кажутся только для отображения географических карт.
Однако, в какой-то момент я получил Zoomify, и я подумал, что это действительно вариант. Первая проблема заключалась в том, что я не мог заставить ее забрать свои собственные плитки без одного снимка полного изображения, поэтому я попробовал каждую программу захвата экрана под солнцем, чтобы попытаться получить полный снимок моего браузера с полной сеткой, чтобы позволить zoomize сделать их. Скажем так, это не сработало, но я попытался уменьшить размер. Это сработало, но потеряло много качества, и я понял, что zoomize даже не выполняет действительно то, что мне нужно, потому что 1. свиток не так гладен; и 2. эти изображения в конечном итоге содержат некоторые ссылки, связанные с их координатами X-Y, что означает, что мне нужно контролировать, сколько прокручивается каждый раз, когда будут нажаты стрелки вверх, вниз, влево, вправо.
Моя неудачная попытка сделать это не сама.
Хорошо, тогда я вернулся к основам, и я выбросил сетку в DIV с переполнением: скрытый в CSS. Отлично, теперь у меня было окно. Я не хотел загружать все эти изображения одновременно, поэтому я рисовал только часть сетки в абсолютно позиционированных DIV с уникальным идентификатором (например, Tile_1_1). Все это выглядело отлично, но теперь мне нужно было убедиться, что вы прокручиваете сетку при нажатии на кнопки со стрелками, поэтому я бросил ее на функцию javascript для этого. У меня был javascript, который вычисляет новый X и новый Y и заменяет источник изображения всех фрагментов, так как все они названы после их координат X/Y в сетке. Фактически, это полностью сработало, и теперь карта прокручивается. Проблема в том, что это немного изменчиво, чтобы просто изменить источники изображения. Нет иллюзий, что мы перемещаемся по этой сетке так же сильно, как только контент мгновенно меняется. И ЭТО мои друзья - это то, где мне нужна наша помощь.
Где я ошибся? Был ли я на правильном пути с этой последней попыткой? Должен ли я полностью переосмыслить это или есть какое-то простое исправление для перемещения плиток немного элегантнее, чем замена источника?
Пожалуйста, имейте в виду, что я неплохо справился с php, css и т.д., но я никогда не вкладывал много времени в javascript, поэтому вам может понадобиться немного больше объяснить в этой области.
P.S. это была самая близкая вещь, которую я мог найти на этих досках, но на самом деле она не получила четкого ответа: Прокрутка/предварительная загрузка плитки (стиль Google Maps) слоев HTML с помощью Ajax
Обновление: используемое решение
Мне понравились и ответы Cobby, и псевдопоты. Решение Pseudosavant было действительно правильным моим союзником, позволяя CSS выполнять большую часть тяжелой работы, однако я пошел с решением Cobby. Я думал, что это даст мне немного больше контроля, и потому, что я на самом деле использую бриллиантовую сетку, я мог бы обернуть вокруг себя голову (не говоря, что другой тоже не обязательно будет работать).
Вот что я сделал. Я знаю, что код немного груб и нуждается в некоторой очистке, но, возможно, он может помочь кому-то.
Сначала мне нужно было найти связь между моей осью X и Y, поэтому я сделал небольшую диаграмму.
Я быстро заметил, что больше X означало запуск алмаза как дальше слева, так и выше, чтобы получить правильные координаты в центре представления (пользовательский старт), а затем смещаться по координатам Y, чтобы снять некоторые отрицательные левые и опустите начальную точку.
Затем PHP для рисования сетки выглядит примерно так: $xcoord и $ycoord исходят из формы):
//draw the grid
//Offset leftStart and topStart by Xcoord
$leftStart = 360 - ($xcoord * 120);
$topStart = 360 - ($xcoord * 60);
//Offset leftStart and topStart by Ycoord
$leftStart += ($ycoord * 120);
$topStart -= ($ycoord * 60);
for($y = 1; $y <= 99; $y++) { //y min to y max
$left = $leftStart;
$top = $topStart;
for($x = 1; $x <= 99; $x++) { //x min to x max
//I only want to draw part of the square
if(($x < ($xcoord + 6) && $x > ($xcoord - 6)) && ($y < ($ycoord + 6) && $y > ($ycoord - 6))) {
//Put out the image - this is how i needed mine formated
echo "\t<div class=\"move\" id=\"T" . $x . "_" . $y . "\" style='position:absolute; left:" . $left . "px; top:" . $top . "px;'>\n";
echo "\t\t<img src=\"./<path to your image>" . $x . "-" . $y . ".gif\">\n";
echo "\t</div>\n";
}
$left = $left + 120;
$top = $top + 60;
}
$leftStart = $leftStart - 120;
$topStart = $topStart + 60;
}
Бросьте DIV вокруг этого с переполнением: спрячьте и дайте ему идентификатор (мой - #tileView). Хорошо, теперь у вас есть алмазная сетка, нарисованная внутри вашего взгляда, и теперь нам нужно начать ее перемещение!
Вот как выглядит мой jquery. Извините, если он нуждается в улучшении, я только что узнал Jquery и Ajax вчера.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#top").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "-=120px", "top": "+=60px"}, 500);
changeImg(x, y, 'up');
$("#ycoord").val(parseInt( y ) - 1);
});
$("#bottom").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "+=120px", "top": "-=60px"}, 500);
changeImg(x, y, 'down');
$("#ycoord").val(parseInt( y ) + 1);
});
$("#left").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "+=120px", "top": "+=60px"}, 500);
changeImg(x, y, 'left');
$("#xcoord").val(parseInt( x ) - 1);
});
$("#right").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "-=120px", "top": "-=60px"}, 500);
changeImg(x, y, 'right');
$("#xcoord").val(parseInt( x ) + 1);
});
function changeImg(x, y, move){
$.ajax({
type: "POST",
url: "addImage.php",
data: 'x=' + x + '&y=' + y + '&move=' + move,
cache: false,
success: function(html){
$(html).appendTo($("#tileView"));
}
});
$.ajax({
type: "POST",
url: "removeImage.php",
data: 'x=' + x + '&y=' + y + '&move=' + move,
cache: false,
success: function(xml){
$("removeTile",xml).each(function(id) {
removeTile = $("removeTile",xml).get(id);
removeID = $("tileID",removeTile).text();
$("#" + removeID).remove();
});
}
});
}
});
</script>
ajax вызывает addImage.php, чтобы добавить новую строку в нужное место и deleteImage.php, чтобы удалить строку, которая теперь не видна (я обнаружил, что не удалял эти строки, которые начали работать довольно медленно).
В дополнительном изображении вы просто определяете новую позицию и вывод для html для добавления на страницу. Например, часть может выглядеть так (но установить переменные в зависимости от перемещения, затем пройти через цикл):
if($_REQUEST["move"] == "up") {
$xmin = $x - 5;
$xmax = $x + 5;
$y = $y - 6;
$left = 360;
$top = -360;
for($i = $xmin; $i <= $xmax; $i++) {
$id = "T" . $i . "_" . $y;
$newTiles .= "<div class='move' style='position:absolute; left:" . $left . "px; top:" . $top . "px;' id='$id'><img src='./Map/TileGroup1/1-$i-$y.gif'></div>\n";
$left += 120;
$top += 60;
}
}
то просто используйте echo $newTiles для использования script.
Удалить похоже, просто выставляя в xml идентификатор DIV для удаления, потому что я не мог заставить каждый() работать иначе.
if($_REQUEST["move"] == "up") {
$xmin = $x - 5;
$xmax = $x + 5;
$y = $y + 5;
echo "<?xml version=\"1.0\"?>\n";
echo "<response>\n";
for($i = $xmin; $i <= $xmax; $i++) {
echo "\t<removeTile>\n";
echo "\t\t<tileID>T" . $i . "_" . $y . "</tileID>\n";
echo "\t</removeTile>\n";
}
echo "</response>";
}
Надеюсь, это поможет кому-то. Спасибо всем за идеи и поддержку!
