Как сделать правильный курсор в виртуальных турах Pano2VR

 Работа в Pano2VR | Создание VR-панорам и виртуальных туров
 18.12.2018 |  23:15 |  3.7k |  5.0/2 |  22.12.2018
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Заменяем курсор из стандартной стрелки на "Grabbing cursor" в виртуальных турах формата HTML5, создаваемых в программе Pano2VR

Как сделать правильный курсор в виртуальных турах Pano2VR

Изображение

В виртуальных турах формата HTML5, создаваемых в программе Pano2VR курсор мыши отображается как стандартная стрелка. То ли это недоработка, то ли это так должно быть. В данной статье, вы узнаете, как заменить курсор на "Grabbing cursor" – руку, которая при нажатии кнопки мыши в области панорамы принимает вид зажатой руки. Таким же образом можно будет установить любой курсор, в том числе и собственный.

Первый пример показывает, как выглядит просмотр панорамы со стандартными курсором.

Вид курсора Grab / Grabbing

В этом примере будет произведена замена стандартного курсора. Как выглядят курсоры вы можете проверить, наведя курсор мыши на слова "Grab" и "Grabbibg" в заголовке раздела.

Создадим два правила CSS в секции style. Селектор .cursor-grabing определяет вид курсора при нажатии кнопки мыши. Селектор .cursor-grab определяет вид курсора при не нажатой кнопке мыши.

Важный момент. Элементам оформления (скина), таким как кнопкам, необходимо назначать вид курсор вида pointer, или стандартный для остальных элементов, через свойства CSS в настройках элемента. Это нужно для того, чтобы вид курсора не перекрывался тем, что будет установлен.

.cursor-grabing {
   /* cursor: url(images/grabbing.cur); Собственный курсор */
   cursor: -webkit-grabbing !important;
   cursor: -moz-grabbing !important;
   cursor: grabbing !important;
}

.cursor-grab {
   /* cursor: url(images/grab.cur); Собственный курсор */
   cursor: -webkit-grab !important;
   cursor: -moz-grab !important;
   cursor: grab !important;
} 

Обязательно используем декларацию !important для повышения приоритета свойств CSS.

В секции script после инициализации объекта pano добавим следующий код, написанный с использованием библиотеки jQuery.

$("#container > div:first").find("div:eq(1)").on({
  //Нажатие кнопки мыши
  "mousedown": function (e) {
    //Меняем классы с cursor-grab на cursor-grabing
    $(this).addClass("cursor-grabing");
    $(this).removeClass("cursor-grab");
    return false;
  },
  //Отпускание кнопки мыши
  "mouseup": function (e) {
    //Меняем классы с cursor-grabing на cursor-grab
    $(this).removeClass("cursor-grabing");
    $(this).addClass("cursor-grab");
  }
});

//Текущий вид курсора
$("#container > div:first").find("div:eq(1)").addClass("cursor-grab"); 

#container – это идентификатор элемента, который служит областью воспроизведения панорамы.

Вид курсора в зависимости от режима DRAG / MOVE

А что если вид курсора устанавливать в зависимости от режима вида: перетаскивание (Drag), когда зритель нажимает кнопку мыши и перетаскивает панораму нужную сторону (этот режим включен по умолчанию), или движение (Move), когда панорама вращается в сторону, куда смещается курсор относительно точки, где была нажата кнопка мыши.

Для этого создадим еще одно правило, определяющее курсор в виде стрелок, направленных в четыре стороны.

.cursor-move {
  cursor: move !important;
} 

Код скрипта будет следующим:

$("#container > div:first").find("div:eq(1)").on({
  //Нажатие кнопки мыши
  "mousedown": function(e) {
    //Определяем режим вида
    if (pano.getViewMode() == 0) {
      //Если это 0, значит режим move
      $(this).addClass("cursor-move");
    } else {
      //Иначе - drag
      $(this).addClass("cursor-grabing");
      $(this).removeClass("cursor-move");
    }
    //Вне зависимости от режима удаляем класс cursor-grab
    $(this).removeClass("cursor-grab");
    return false;
  },
  //Отпускание кнопки мыши
  "mouseup": function(e) {
    //Вне зависимости от режима удаляем класс cursor-grabing
    $(this).removeClass("cursor-grabing");
    //Определяем режим вида
    if (pano.getViewMode() == 1) {
      //Если это 1, значит режим drag
      $(this).addClass("cursor-grab");
    }
  }
});

//Текущий вид курсора
if (pano.getViewMode() == 0) {
  $("#container > div:first").find("div:eq(1)").addClass("cursor-move");
} else {
  $("#container > div:first").find("div:eq(1)").addClass("cursor-grab");
}

В отличие от режима drag, в котором курсор имел 2 состояния, в режиме move курсор будет одинаков при нажатой и при не не нажатой кнопке мыши.

Собственный курсор

Собственный курсор устанавливается через CSS c указанием имени файла курсора.

.cursor-custom {
  cursor: url(images/custom.cur), auto !important;
}

В качестве имени файла указывается изображение в формате .png и .cur. Формат .png поддерживается не всеми браузерами. Поэтому рекомендуется использовать формат .cur.

Если кому-то нужны коды скриптов на чистом Javascript, пишите в комментарии.

Демонстрационные примеры не оптимизированы под мобильные устройства. Рекомендуется просмотр в браузерах на ПК.

Исходный код примеров можно просмотреть в браузере, нажав специальную комбинацию клавиш. Обычно это Ctrl + U.

Теги:  jquery, скрипт, Панорама, Виртуальный тур, HTML5, javascript, Pano2VR, курсор
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 3
Гостей: 3
Пользователей: 0