Горячие точки (ХотСпоты) — это области в панораме, которые реагируют на зависание или щелчок мыши. Они могут использоваться для загрузки других панорам, ссылок на другие URL-адреса, изменения просмотра и т. д..
2 типа горячих точек (хотспотов)
- Полигональные (Polygonal Hotspots)
- Картиночные (Image Hotspots)
Полигональные определяются набором точек, а картиночные состоят из изображения или флеш-ролика.
Типы горячих точек определяется их атрибутами:
— если имеется атрибут «url», то это точка доступа к изображению
— если нет URL, и определены точки, то это полигональный хотспот.
Структура картиночных точек — image hotspot structure
<hotspot name=»…»
type=»image»
url=»…»
keep=»false»
renderer=»webgl»
visible=»true»
enabled=»true»
handcursor=»true»
maskchildren=»false»
zorder=»»
zorder2=»0.0″
capture=»true»
children=»true»
blendmode=»normal»
mipmapping=»false»
premultiplyalpha=»false»
style=»»
ath=»0.0″ atv=»0.0″
edge=»center»
ox=»0″
oy=»0″
zoom=»false»
distorted=»false» rx=»0.0″ ry=»0.0″ rz=»0.0″
depth=»1000″
tx=»0.0″ ty=»0.0″ tz=»0.0″
details=»8″
inverserotation=»false»
flying=»0.0″
scaleflying=»true»
width=»» height=»»
scale=»1.0″
rotate=»0.0″
pixelhittest=»false»
accuracy=»1″
alpha=»1.0″
autoalpha=»false»
usecontentsize=»false»
scale9grid=»»
stereo=»»
crop=»»
onovercrop=»»
ondowncrop=»»
scalechildren=»false»
onover=»»
onhover=»»
onout=»»
ondown=»»
onup=»»
onclick=»»
onloaded=»»
/>
Структура полигональных точек — polygonal hotspot structure
<hotspot name=»…»
keep=»false»
visible=»true»
enabled=»true»
handcursor=»true»
capture=»true»
blendmode=»normal»
style=»»
alpha=»1.0″
autoalpha=»false»
fillcolor=»0xAAAAAA»
fillalpha=»0.5″
borderwidth=»3.0″
bordercolor=»0xAAAAAA»
borderalpha=»1.0″
polyline=»false»
onover=»»
onhover=»»
onout=»»
ondown=»»
onup=»»
onclick=»»
onloaded=»»
>
<point ath=»…» atv=»…» />
<point ath=»…» atv=»…» />
<point ath=»…» atv=»…» />
…
</hotspot>
Полные имена переменных
hotspot.count
hotspot.enabled
hotspot.visible
hotspot.alpha
hotspot.layer
hotspot[name].name
Имя текущего элемента hotspot
hotspot[name].index
В качестве аттрибута используется name
hotspot[name].type
Тип элемента hotspot. Может принимать два значения:
- image — По умолчанию используется URL-адрес в качестве изображения.
- text — Используйте эту точку как текстовое поле.
В качестве аттрибута используется type
hotspot[name].url
Путь или URL-адрес файла образа hotspot. (см. также примечания к URL)
Поддерживаемые типы файлов: JPG, PNG, GIF и SWF (только для Flash).
Примечание! Когда будет установлен «url», то точка будет точкой к изображению, а не многоугольной точкой!
Чтобы определить разные URL-адреса для Flash и HTML, следует использовать проверку устройств xml:
- url.flash=»animatedhotspot.swf
- url.html5=»animatedhotspot.gif
В качестве аттрибута используется url
hotspot[name].keep
Если элемент hotspot хранится или удаляется при загрузке новой панорамы. См. Также действие loadpano.
В качестве аттрибута используется keep
Значение по-умолчанию false
hotspot[name].renderer
Выберите средство визуализации для отображения точки доступа.
Возможные настройки:
- webgl — отображает точку доступа с помощью WebGL
- css3d — отображает точку доступа с помощью CSS-3D-преобразований
Значение по умолчанию зависит от поддержки браузера. Когда WebGL доступен, он будет использоваться по умолчанию, иначе CSS3D.
В качестве аттрибута используется renderer
hotspot[name].visible
Видимость элемента hotspot. Да или нет.
В качестве аттрибута используется visible
Значение по-умолчанию true
hotspot[name].enabled
Позволяет элементу hotspot получать события мыши. Когда установлено значение «false», события мыши будут перенаправлены на базовые элементы.
В качестве аттрибута используется enabled
Значение по-умолчанию true
hotspot[name].handcursor
Показывает курсор мыши, когда мышь находится над элементом hotspot (горячей точки).
В качестве аттрибута используется handcursor
Значение по-умолчанию true
hotspot[name].maskchildren
Если установлено значение true, все дочерние элементы, которые находятся вне родительского элемента, будут обрезаны / замаскированы.
В качестве аттрибута используется maskchildren
Значение по-умолчанию false
hotspot[name].zorder
Глубокое / «Z» упорядочение элементов «горячих точек».
Это значение может быть любой строкой или числом. Все элементы hotspot с настройкой zorder будут отсортированы по заданному значению. Когда ничего не задано — порядок не определен и зависит от порядка загрузки / завершения браузера.
Примечание! Это важная настройка для перекрывающихся элементов!
HTML5 Примечание. Zorder должен быть значением от 0 до 100, без отрицательных значений!
В качестве аттрибута используется zorder
hotspot[name].zorder2
Настройка zorder2 предназначена для упорядочения нормальных и искаженных точек доступа в средстве просмотра HTML5.
Из-за ограничений, связанных с браузером и CSS, не всегда возможно смешивать/заказывать обычные горячие точки и искажать горячие точки с одним и тем же слоем.
Но, используя новую настройку zorder2, можно определить, должна ли нормальная, не искаженная точка быть доступа выше или ниже других искаженных горячих точек.
zorder2=0.0
Текущая точка доступа находится ниже искаженных горячих точек (по умолчанию).
zorder2=1.0
Текущая точка доступа находится выше искаженных горячих точек.
В качестве аттрибута используется zorder2
hotspot[name].capture
Это дополнительная настройка для включенной настройки:
Когда enabled = true и capture = true, события мыши будут отправляться только в эту точку доступа, перемещение и управление панорамой невозможно.
Когда enabled = true и capture = false, события мыши будут отправляться в точку доступа, а также ко всем базовым элементам, управление панорамой будет по-прежнему возможно.
В качестве аттрибута используется capture
Значение по-умолчанию true
hotspot[name].children
Позволяет дочерним элементам текущего элемента hotspot получать события мыши.
В качестве аттрибута используется children
Значение по-умолчанию true
hotspot[name].blendmode
Режим наложения или смешивания.
Поддерживаемые настройки в Flash: normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert.
Поддерживаемые настройки в HTML5 с помощью рендеринга WebGL: normal, add.
Подробнее о всех доступных режимах смешивания: https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BlendMode.html
И здесь для некоторых иллюстраций / примеров: https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode
В качестве аттрибута используется blendmode
Значение по-умолчанию «normal»
hotspot[name].mipmapping
Если изображение hotspot получает mip-карту во время рендеринга (например, чтобы избежать сглаживания при уменьшении).
Когда enabled, это работает только тогда, когда размеры пикселей (ширина и высота) изображения точки доступа имеют размеры в два порядка.
Доступно только для рендеринга WebGL.
В качестве аттрибута используется mipmapping
Значение по-умолчанию false
hotspot[name].premultiplyalpha
Умножает альфа-канал изображения горячих точек на цветные каналы.
Будет отображаться в настройке WebGL UNPACK_PREMULTIPLY_ALPHA_WEBGL.
Доступно только для рендеринга WebGL.
В качестве аттрибута используется premultiplyalpha
Значение по-умолчанию false
hotspot[name].style
Загрузите атрибуты из одного или нескольких элементов <style>.
Это можно использовать для уменьшения кода xml — атрибуты, которые являются одинаковыми для большего количества элементов layer / plugin или hotspot, могут храниться вместе в одном месте в элементе <style>. Чтобы указать более одного стиля, отделите имена стилей по каналу | (вертикальной линией) персонажи.
Примечание! Атрибуты, которые были определены в стиле, не могут быть перезаписаны в определении слоя / плагина / горячей точки!
Пример:
<style name=»style1″ alpha=»0.5″ scale=»0.5″ … />
<plugin name=»p1″ … style=»style1″ />
<plugin name=»p2″ … style=»style1″ />
<hotspot name=»h1″ … style=»style1″ />
Стиль можно также динамически загружать действием loadstyle(name).
В качестве аттрибута используется style
hotspot[name].ath и hotspot[name].atv
Сферические координаты точки доступа в градусах. Там изображение hotspot будет выровнено по заданной точке границы.
Значение по-умолчанию 0.0
hotspot[name].edge
Край или опорная точка элемента «горячих точек».
Возможные значения:
- lefttop
- left
- leftbottom
- top, center
- bottom
- righttop
- right
- rightbottom
В качестве аттрибута используется edge
Значение по-умолчанию «center»
hotspot[name].ox и hotspot[name].oy
Смещение или параллельное смещение элемента точки доступа из граничной точки.
Это может быть абсолютное значение пикселя или относительное (до размера точки) процентное значение.
В качестве аттрибута используется ox и oy
hotspot[name].zoom
Зуммируется вместе с панорамой, если размер масштабируемого изображения изменяется.
В качестве аттрибута используется zoom
Значение по-умолчанию false
hotspot[name].distorted
Если изображение Hotspot будет искажено в трехмерном пространстве вместе с текущим искажением панорамы / просмотра.
При искажении используйте настройки rx / ry / rz для поворота точки доступа в трехмерном пространстве.
Примечание 1 — При включении в качестве эталона для размеров пикселей будет использоваться размер 1000 пикселей. И это 1000 пикселей покрывают поле зрения 90 градусов в трехмерном пространстве.
Примечание 2 — Искаженные горячие точки не могут и не должны иметь дочерние элементы. Вероятно, они будут отображаться неправильно.
Примечание 3 — Отображение Flash-плагинов, поскольку искаженные точки доступа должны быть возможны, но не быть прямым взаимодействием с ними. В этом случае плагин не будет отображаться напрямую, а только его «скриншот».
Примечание 4 — В HTML5 сортировка нормальных и искаженных горячих точек через zorder невозможна, параметр zorder2 можно использовать дополнительно для обычных горячих точек, чтобы переместить их выше искаженных горячих точек.
hotspot[name].rx + hotspot[name].ry + hotspot[name].rz
3D-вращение в градусах по осям X / Y / Z. (порядок оси: Y-X-Z)
Примечание — может использоваться только при искажении = «true»!
hotspot[name].depth
Внутренняя глубина 3D-рендеринга — это расстояние 3D-объекта до экрана.
Для 2D-просмотра это не имеет видимого эффекта, но для просмотра стерео 3D или VR это может быть важная настройка. Например. используйте более мелкие значения для более сильного эффекта «всплывающих окон».
Когда изображение точки доступа должно быть бесконечно удалено (например, само изображение панорамы, например, для пикселя — идеально подходит для панорамы фона), то для настройки глубины следует использовать «недопустимое» значение (например, String like «off») например depth=»off» (Глубина = «выключено»).
В качестве аттрибута используется depth
Значение по-умолчанию 1000.0
hotspot[name].tx + hotspot[name].ty + hotspot[name].tz
Смещения 3D-трансляции (доступны только для искаженных горячих точек).
Настройки для перемещения или перевода горячих точек в 3D-пространстве.
В качестве аттрибута используется tx, ty, tz
Значение по-умолчанию 0.0
hotspot[name].details
Внутренний рендеринг мозаичной детализации. Более высокое значение детали приведет к более подробной внутренней 3D-геометрии.
При использовании Flashplayer 10 и кубических изображений без каких-либо искажений (рыбий глаз, стереографический, …), этот параметр будет проигнорирован, потому что мозаичность не понадобится.
В качестве аттрибута используется details
Значение по-умолчанию 8
hotspot[name].inverserotation
Противопоставляет вращение и порядок оси параметров rx / ry / rz.
В качестве аттрибута используется flying
Значение по-умолчанию false
hotspot[name].flying
Эта настройка автоматически интерполирует значения ath / atv и scale на текущие значения просмотра. Диапазон значений от 0.0 до 1.0.
В 1.0 изображение hotspot будет заблокировано всегда до середины экрана, и размер будет относительно 1000 пикселей в высоте экрана.
В качестве аттрибута используется flying
Значение по-умолчанию 0.0
hotspot[name].scaleflying
Масштабирует горячую точку из pano-space-size в screen-space-size, когда вылетает.
Для использования VR может оказаться полезным отключить эту настройку, потому что в VR нет реального «экранного пространства».
В качестве аттрибута используется scaleflying
Значение по-умолчанию true
hotspot[name].width + hotspot[name].height
Размер получателя элемента hotspot — изображение будет масштабироваться до этого размера.
Это может быть абсолютное значение пикселя или относительное (по отношению к экрану или экрану) процентное значение. Если не задано — размер загруженного изображения будет использоваться.
Кроме того, можно использовать специальное значение «prop» для масштабирования изображения по ширине или высоте, сохраняя его пропорции (например установите ширину или высоту в значение, а другая настройка «prop» будет width=»500″ height=»prop»)
Примечание. При использовании искаженных горячих точек размер зависит от внутреннего базового размера, где 1000 пикселей покрывают поле зрения 90 градусов.
hotspot[name].imagewidth + hotspot[name].imageheight
Эти переменные содержат исходный размер немасштабированного пикселя загруженного изображения, эта информация сначала доступна после события onloaded.
hotspot[name].scale
Масштабирование элемента «горячих точек».
В качестве аттрибута используется scale
Значение по-умолчанию 1.0
Как увеличить размер (масштаб) элемента горячей точки (hotspot) в krpano?
hotspot[name].rotate
Вращение элемента горячих точек в градусах.
Примечание — этот параметр НЕ должен использоваться вместе с искаженным = «true»!
В качестве аттрибута используется rotate
Значение по-умолчанию 0.0
Как повернут элемент горячей точки (hotspot) налево, направо, вверх или вниз в krpano?
hotspot[name].pixelhittest
Включение точного теста на пиксель, который учитывает прозрачность изображения вместо использования ограничивающего прямоугольника.
Примечание. Используйте этот параметр с осторожностью! Точный хит-тест пикселя — это гораздо более тяжелая операция, чем обычная проверка по умолчанию!
В качестве аттрибута используется pixelhittest
Значение по-умолчанию false
hotspot[name].accuracy
Точность позиционирования изображения точек доступа:
- Если установлено значение 1, округление значений позиции не будет выполнено.
- Когда установлено значение 0, позиции пикселей будут округлены до полных значений пикселей.
Примечание. Если точность = 1 будет зависеть также от параметров качества отображения Flashplayer и если браузер поддерживает субпиксельные точные CSS-координаты.
В качестве аттрибута используется accuracy
Значение по-умолчанию 1
hotspot[name].alpha
Альфа-значение или прозрачность элемента hotspot:
- 0.0 = полностью прозрачный
- 1.0 = полностью видимый
Примечание — даже если установлено значение 0.0 — элемент будет по-прежнему там и доступен для нажатия — чтобы полностью скрыть его, атрибут VISIBLE должен быть установлен на false!
В качестве аттрибута используется alpha
Значение по-умолчанию 1.0
hotspot[name].autoalpha
Если установлено значение «true», то при значении «alpha» значение 0.0 будет равно «false», если alpha будет равна 0.0 и вернется к «true».
В качестве аттрибута используется autoalpha
Значение по-умолчанию false
hotspot[name].usecontentsize
Когда будет загружен файл .swf, то есть две возможности определить его размер или измерение — либо будет использоваться размер полного холста флэш-объекта (usecontentsize = false, значение по умолчанию) — или — только размер рисованного содержание там (usecontentsize = true).
В качестве аттрибута используется usecontentsize
Значение по-умолчанию false
hotspot[name].scale9grid
Определяет сетку в пиксельных координатах, которая разделяет изображение точки доступа на 9 сегментов. И при масштабировании слоя (layer) или плагина (plugin) с помощью значений ширины / высоты / масштаба сегменты «края-edge» будут сохраняться немасштабированными, и будут масштабироваться только «средние» сегменты.
При использовании scale9grid, scalechildren всегда будет false.
Синтаксис:
scale9grid=»x-position|y-position|width|height|prescale*»
- x / y-position — начальное положение пикселя x / y для внутреннего блока
- width / height — размер пикселя внутреннего ящика
- prescale — необязательная настройка масштабирования для предварительного масштабирования самого базового изображения
hotspot[name].stereo
Определите, является ли изображение точки доступа стереоизображенным (только HTML5 и WebGL).
Возможные настройки:
- нет значения — не стереоизображение (по умолчанию)
- SBS — изображение Side-by-Side «бок о бок» (левая половина = левое изображение, правая половина = изображение в правом глазу)
- TB — изображение Top-Bottom «сверху-снизу» (верхняя половина = изображение в левом глазу, снизу-половина = изображение в правом глазу)
hotspot[name].crop + hotspot[name].onovercrop + hotspot[name].ondowncrop
Обрезает или вырезает прямоугольную область исходного изображения. Полезно использовать только одно изображение для нескольких элементов изображения.
onovercrop / ondowncrop — различные области обрезания для мыши и состояний кнопки мыши.
Синтаксис:
crop=»x-position|y-position|width|height»
hotspot[name].scalechildren
Если элемент child layer / plugin, который был назначен родителем (parent), также масштабируется, когда текущий элемент hotspot будет масштабироваться.
В качестве аттрибута используется scalechildren
Значение по-умолчанию false
hotspot[name].fillcolor + hotspot[name].fillalpha
Цвет заливки и альфа (прозрачность) области полигональной точки доступа.
fillcolor по-умолчанию 0xAAAAAA
fillalpha по-умолчанию 0.5
hotspot[name].borderwidth + hotspot[name].bordercolor + hotspot[name].borderalpha
Ширина, цвет и альфа (прозрачность) полигональной граничной линии.
borderwidth по-умолчанию 3.0
bordercolor по-умолчанию 0xAAAAAA
borderalpha по-умолчанию 1.0
hotspot[name].polyline
Нарисуйте линию-многоугольник вместо заполненного-многоугольника.
Начальная и конечная точки не будут объединены.
Значение по-умолчанию false
hotspot[name].point.count
Число точек многоугольника.
Значение по-умолчанию 0
hotspot[name].point[..].ath + hotspot[name].point[..].atv
Сферические координаты точек многоугольной точки hotspot в градусах.
hotspot[name].loading
Логическая переменная только для чтения, указывающая, что точка доступа в настоящее время загружает изображение.
В качестве аттрибута используется loading
Значение по-умолчанию false
hotspot[name].loaded
Булева переменная только для чтения, указывающая, что точка доступа загрузила данное изображение.
В качестве аттрибута используется loaded
Значение по-умолчанию false
hotspot[name].loadedurl
Атрибут loadedurl содержит полный URL-адрес загружаемого изображения.
hotspot[name].hovering
Логическая переменная, доступная только для чтения, которая указывает, что курсор мыши в данный момент находится над точкой доступа.
В качестве аттрибута используется hovering
Значение по-умолчанию false
hotspot[name].pressed
Логическая переменная только для чтения, указывающая на то, что кнопка мыши была нажата на горячую точку и все еще удерживается.
В качестве аттрибута используется pressed
Значение по-умолчанию false
hotspot[name].onover
Действия или функции, которые будут вызываться, когда мышь перемещается над элементом hotspot.
hotspot[name].onhover
Действия или функции, которые будут вызываться через интервалы (15 раз в секунду), когда мышь остается над / hovers элементом hotspot.
hotspot[name].onout
Действия или функции, которые будут вызываться, когда мышь перемещается из элемента hotspot.
hotspot[name].ondown
Действия или функции, которые будут вызываться, когда кнопка мыши будет нажата на элементе hotspot.
hotspot[name].onup
Действия или функции, которые будут вызываться, когда ранее нажатая кнопка мыши будет отпущена.
hotspot[name].onclick
Действия или функции (Actions or functions), которые будут вызываться при щелчке мышью на элементе hotspot.
Имя атрибута (Attribute name) — onclick
hotspot[name].onloaded
Действия или функции (Actions or functions), которые будут вызываться при загрузке изображения hotspot.
hotspot[name].loader
Flash — Объект LoadScript ActionScript 3 загруженного изображения горячей точки.
HTML5 — элемент изображения HTML загруженного изображения.
hotspot[name].sprite
Flash — объект ActionScript 3 Sprite точки доступа.
HTML5 — элемент HTML <div> элемента hotspot. Примечание — доступно только при рендеринге точки доступа через CSS3D (см. Настройку renderer)!
Функции
hotspot[name].loadstyle(name)
Действие элемента hotspot для загрузки настроек из элемента <style>.
hotspot[name].resetsize()
Действие для установки значений ширины и высоты обратно в исходный размер загруженного изображения. Это можно использовать после изменения значения URL-адреса, чтобы получить размер нового загруженного изображения.
hotspot[name].getfullpath()
Функция, которая возвращает полный путь или имя элемента hotspot. Из-за возвращаемого значения это действие вызывается только из интерфейса плагина.
hotspot[name].getcenter(ath,atv)
Эти функции сохраняют центральное положение точки доступа к данным переменным. Когда переменные не существуют, они будут созданы.
AS3 / JS: эта функция также может быть вызвана непосредственно из AS3 / JS.
В этом случае нецелесообразно использовать параметры ath / atv, функция напрямую возвращает объект AS3 с координатами центра at / atv точки доступа. Этот объект имеет атрибуты x и y, где x = ath и y = atv.