Отпуск. Скучно.
|
Ох и намучался же я с этим Explode.js
Разрезал картинку на NxN кусков, встал вопрос - каждый кусок надо анимировать в определённом направлении, как придумать алгоритм? Дано: координаты i, j и кол-во ячеек NxN. Сначала была идея вычислять направление (0 - вверх, 1 - вверх и вправо, 2 - вправо и т.д. по часовой стрелке). Но было очень много повторяющегося кода, да и если поставить N > 5, то всё вычислялось неправильно. Подумал даже формировать двумерный массив из нулей, задавать элементу (i, j) единицу и искать его рекурсивным спуском (напр. из массива 5х5 делать 4х4, потом 3х3 и т.д., отрезая по одному слою). Тогда крайние элементы - это диагональное направление (например, i=0 - это вверх и влево, i=N-1 - вверх и вправо), а промежуточные - это обычное направление (например, 0<i<N-1 && j>0 - это вверх). Но это было тоже слишком сложно. Тогда додумался делать через векторы. Код:
vY = (N - 1) / 2 - iДело осталось за малым: анимировать ячейки с учётом векторов. Вычисляем конечные значения. Например, левую верхнюю ячейку двигаем на 150 пикселей вверх и столько же влево. (fromY, fromX - начальное положение ячейки) Код:
toY = fromY - 50 * vYКод:
top = fromY + (toY - fromY) * m----- Конечно же, в реальности пришлось не так легко. Изначально я правильно посчитал все формулы, но по невнимательности перепутал местами аргументы в функции для анимирования ячеек (в коде Explode.animate()). Вместо fromX подавал fromY и наоборот. В результате ячейки не разлетались, а скручивались в непонятную спираль. Я начал искать проблему в коде Explode.animate, хотя ошибка была в вызове, который находится внутри Explode(). Пробовал и так, и сяк, уже не руководствуясь логикой просто наугад менял плюсы на минусы, умножить на разделить и т.д. В порядке бреда поменял местами vX и vY, и о чудо - стало получаться нечто похожее на то, чего я добиваюсь. Но я в остальных формулах уже такого накрутил, что анимация всё равно получалась неправильная. То сдвиг непонятно куда, то ячейки разбрасывает в 2 раза больше, чем надо (в смысле, при начале анимации между ячейками пробелы, выглядит не очень красиво). Потому что я высчитывал left по vY, а top по vX. Подумал, что конфликт итераторов, т.е. при вызове функции i и j уже равны n-1. Попробовал закешировать значения, присвоив каждой ячейке tile.cashTop, tile.cashLeft и tile.cashDirection. Закешированные значения я подал уже в правильном порядке, т.е. fromX как cashLeft и fromY как cashTop. А в коде Explode.animate переменные vX и vY были поменяны местами (в порядке бреда, абзацем выше), о чём я благополучно забыл. Ячейки опять стало крутить в спираль, и тут моя реальность просто сломалась. Бросил всё это дело, перевёл мысли, потом сел снова, убрал кеширование (и опять случайно поменял местами fromX и fromY в вызове!!!) заново провёл все расчёты, проверил все параметры алертами, нашёл ошибку и наконец-то всё заработало. Главное, изначально всё было посчитано верно, но из-за перепутанных параметров я сидел с этими формулами часа два. Такой майндфак на ровном месте. ----- Напомнило мне один случай, не связанный с кодингом. Был у меня телефон на две симки, одна МТС и другая Билайн - новая, т.е. свой номер ещё не успел запомнить. Важно, что на МТС денег не было, только на билайне. От скуки решил посмотреть, что будет, если с одной симки позвонить себе на другую. Позвонил - занято. Через минуту внезапно на МТС-овскую симку доходит звонок с билайна. Однако свой билайновский номер я не знал наизусть, поэтому решил, что это по работе (как раз искал работу тогда и оставлял этот номер). Звонок же сбросился через секунду (странно, что он вообще дошёл, причём через минуту), а я в тот момент как раз ковырялся в телефоне и подумал, что случайно сбросил вызов. Звонок мог быть важным, ведь вдруг это по поводу трудоустройства. И я начал с билайновской симки названивать на свой же номер, не зная, что он мой. Было всё время занято, однако после каждой попытки дозвониться приходила СМС "Этот абонент вновь в сети", но каждый раз когда я звонил было естественно занято. Что ещё более странное, приходила также СМС "Этот абонент пытался с вами связаться +7963...", хотя это я вообще-то пытаюсь с ним связаться. Звоню сам себе уже двадцатый раз, всё одно и то же - приходит смс "абонент в сети", звоню снова - опять занято. У меня начинается истерика. Сходил, положил деньги на МТС, попробовал перезвонить с неё. Опять занято. Реальность начинает ломаться. Что это, сбои в матрице? Архитектор перезагружает лимб? Тут я внимательно вгляделся в билайновский номер. Мне кажется, я где-то его недавно видел. Мельком, прочёл один раз и забыл. Достаю из кармана куртки контейнер от билайновской симки (или хз как он там называется, ну такая пластиковая карта откуда выковыриваешь симку при покупке) - и понимаю, что я уже полчаса пытаюсь дозвониться сам до себя. |
Кстати, как сделать мин./макс. размеры при ресайзе?
Если просто проверять elem.clientHeight <= minHeight, то при достижении minHeight обратно увеличить уже не получится, т.к. срабатывает условие. Можно конечно при срабатывании условия делать elem.style.height = minHeight + 1, но это как-то по-клоунски... и будет дёргать элемент туда-сюда. |
Цитата:
|
Цитата:
Если при mousemove документа выполнять такую проверку: if (elem.clientHeight <= minHeight || elem.clientWidth <= minWidth) return; то при достижении минимальных размеров ресайз перестаёт работать вообще, т.к. при начале ресайзинга выполняется вышеописанное условие и делается return. |
Diphenyl Oxalate,
ок понятно |
Спросил, и тут же сам догадался.
Надо делать так: if (elem.clientHeight < minHeight) elem.style.height = minHeight + "px"; |
Diphenyl Oxalate,
вычислить height и скорректровать if(height <= minHeight) height = minHeight и также с width и только потом менять стиль |
Diphenyl Oxalate,
варианты сошлись когда другому обьясняешь, лучше сам понимаешь. :) |
Извините, а можно кое что из вашего кода взять и переработать для своих целей?
|
Цитата:
А что именно? |
Цитата:
|
Что интересно, в IE8 не работает ни один из скриптов.
Даже на банальной страничке со ссылками вместо русского текста было ������� |
Дык конечно, кодировка на странице не указана
во многих браузерах так будет <meta charset="utf-8"> завидую я вам, формулы знаете, векторы, а этого не знаете |
Переписал скрипт окошек с нуля, теперь это хотя бы не выглядит как привет из 95-го
Oxalate Window (английский не для вые*она, а потому что юКоз упорно не хочет дружить с ру��кими б�кв�ми) Планируется линейка виджетов Oxalate.JS, призванная Работа над Oxalate Window ещё не закончена; будет добавлена большая гибкость (пользовательские стили, обработчики resize/drag/toggle/close и прочее), анимированный ресайз и перенос окна, а также кастомизация:
var custom = Oxalate.window( { width : "500px", height : "500px" } );
custom({ /* [...] */ });
// теперь все окна, созданные через custom(), будут иметь размеры 500х500
// так можно задать любые парамеры по умолчанию
// это позволит не указывать их каждый раз, если надо создать много окон с похожими параметрами
Доступные параметры:
{
width : "500px", // ширина
height : "300px", // высота (без учёта заголовка - 20px)
headerText : "Header", // заголовок
contentText : "Your text", // тело
animated : true, // анимация при открытии, закрытии, сворачивании
modal : false, // блокировать ли содержимое
notDraggable : false, // запретить перенос окна
noToggleBtn : false, // убрать кнопку "Свернуть"
noCloseBtn : false, // убрать кнопку "Закрыть"
holdIfAny : false, // не открывать если открыто другое окно (окно-чмо)
closeAll : false, // при открытии закрыть все остальные окна (окно-деспот)
holdAll : false, // не открывать другие окна, пока открыто это (окно-лидер)
noCopy : null, /* запретить больше одной копии окна
// по умолчанию null (копии разрешены). Чтобы запретить, надо вместо null передать
// элемент, который вызывает окно, например так:
// A.onclick = function() {
// Oxalate.window({ noCopy : this });
// }
// Таким образом, если второй раз кликнуть по ссылке которое вызывает окно, а оно открыто, то окно не появится
*/
closeIfAny : false, // закрывать при открытии другого окна (пугливое окно)
resize : "11111111", /* стороны для ресайзинга
// 1 - включить, 0 - отключить
// Первые четыре единицы - ресайз вверх, вправо и т.д. по часовой стрелке
// Последние четыре единицы - ресайз по диагонали, вверх-вправо и т.д. по часовой стрелке
// Например, чтобы запретить ресайз по диагонали, следует ввести 11110000
// А чтобы запретить ресайз вообще, следует ввести 00000000
*/
minSize : [100, 100], // мин. размеры
maxSize : [500, 500], // макс. размеры
clickAndClose : false, // закрывать по клику вне окна
buttons : { // пользовательские кнопки
OK : function () { this.close(); OkFunction() },
Cancel : function () { this.close() }
} // надпись на кнопке и функция по клику
// в this передаётся служебный объект oWnd, который предоставляет
// доступ к this.close() - закрыть окно и this.toggle() - свернуть/развернуть
}
|
Два часа лишнего времени вылились в это: Colorado.js
Самый интересный параметр - without (по умолчанию blue, может быть так же red/green). Например, если without="blue", то из двух компонентов (red и green) рисуется градиент, ползунком можно изменять значение blue. То же самое и для red/green. В общем лучше один раз увидеть. invertI, invertJ, invertIJ - направление градиента (0 или 1), тоже можно поиграться. Остальные настройки думаю понятны по названию. |
| Часовой пояс GMT +3, время: 08:50. |