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

Опрос:

Какой версией Pano2VR вы пользуетесь?
Всего ответов: 30
Заменяем курсор из стандартной стрелки на "Grabbing cursor" в виртуальных турах формата HTML5, создаваемых в программе Pano2VR
1 5 0.0 0

Как сделать правильный курсор в виртуальных турах 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.

18.12.2018 | Создание VR-панорам и виртуальных туров | Добавил: СЕРГЕЙ ДИШУК
261 | Теги: jQuery, скрипт, курсор, Pano2VR, Виртуальный тур, HTML5, Javascript, Панорама
Рейтинг: 0.0 / 0 | Оцените материал:

Об авторе:

Сергей Дишук, фотограф-любитель. Снимает пейзажи, животных, репортажи различных городских мероприятий. Увлекается программированием и разработкой программного обеспечения. Занимается съемкой панорам и созданием виртуальных туров более 5-ти лет. Имеет опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR, Autopano, Panotour.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Поделиться в социальных сетях:

Возможно, вам будет интересно:

Комментарии:

Загляните в мои соцсети

Если желаете получать информацию о новых материалах сайта (статьи, новости, панорамы и туры) или следить за моим творчеством (фотография в целом), подпишитесь на мои сообщества в социальных сетях.

Фотографии и панорамные изображения публикую на этих ресурсах:

Популярные страницы
Опрос
Как помогают Вам мои материалы по работе с Pano2VR?
Всего ответов: 13