layer/hotspot元素说明文档(1.21)

<layer><hotspot>

更新 2023.12.11 krpano 1.21.2

<layer> 与<hotspot> 是krpano主要的界面交互元素:

  • layer元素基于 2D 屏幕空间,是可用于所有类型的布局元素。可包含图像,文本,按钮,视频,也可以为其他layer创建容器以及添加特殊元素,如嵌入iframe,html代码甚至其他krpano viewer。
  • hotspot元素与layer元素基本相同,但处于全景图/3D空间中。
  • hotspot元素还能绘制多边形或直线。
  • 这两种元素可通过父设置或定义更多layer子元素来组合、堆栈、继承。
  • 从技术上看,layer元素就是HTML元素,hotspot元素可以是HTML元素也可以由WebGL绘制,这取决于 renderer 设置和hotspot的类型(type),以及是否需要进行立体渲染(stereo-rendering )。

关于 <plugin> 元素:

  •  <plugin> 元素和 <layer> 元素本质上是同一元素
  • 仅仅名字不同而已。
  • 任何时候都可以使用<layer>或<plugin> 或反向来处理相同的元素。在静态xml代码和动态Action或Javascript代码中,是相同的。
  • 术语 ‘plugin(插件)’ 来自krpano的老版本,其中的插件主要用于包含用于进一步交互的外部工具。
  • 如今,该元素提供了更多的布局功能,因此较新的术语“layer(图层)”更好地描述了它的行为、
  • 因此建议<plugin>仅在包含使用附加功能扩展的krpano插件(如SoundinterfaceWebVR插件)时使用,<layer>则使用在所有与布局相关的元素。

目录

(更多…)

N氏图层编辑器

简介

可通过鼠标拖拽图层控制layer的位置,通过鼠标在对应的参数上左右滑动来实时调整对应的参数,然后复制所有设置到对应的layer的代码中。

最新版本 1.0

(更多…)

krpano中如何让图片不变形自适应全屏

本教程是衍生于

krpano中如何让图片自适应屏幕尺寸

该方法可以让图片自适应屏幕尺寸,但因为窗口尺寸比例与图片比例不可能完全一致,如果我们需要图片满屏展示的话,该方法只能是完整展示图片,但却会出现黑边无法覆盖完整窗口的情况。

问题是,如果这个图片是作为启动画面,或者是需要全屏展示但又不希望被拉伸的时候。也就是我们不能这样设置图片

如果用百分百来设置layer的宽高,尽管是满屏了,但往往会被拉伸或者被压扁,这样的情况效果更加糟糕。 (更多…)

利用textfield插件和layer嵌入在线视频

krpano的layer和hotspot是两个神奇的元素,它们支持的文件类型非常广泛,嘻嘻,其实也就支持四种: SWF、JPG、PNG、GIF

textfield是krpano一个神奇的插件,它有一个神奇的属性HTML,不过textfield的Flash版本插件仅支持极少量的HTML4和CSS代码。大部分HTML5代码的工作只能在JS插件下完成。

我们今天介绍如何在layer中嵌入一个网站在线视频。 (更多…)

layer元素完全解析

layer元素概述

<layer>或<plugin>元素可以用于嵌入图像、HTML元素(如iframe)、按钮或动态插件。它与hotspot元素的区别就在于它的定位是屏幕坐标,坐标系是以浏览器窗口本身作为参照的,子元素则相对于父元素作为坐标参照系。hotspot元素则是相对于3D空间的球面坐标系进行定位。直观的感受就是,当我们转动全景时,layer元素通常是相对于屏幕不动的,它不会随着全景的转动而移动。所以我们会用layer元素来做皮肤。hotpsot元素就如同是3D空间中的一个“固有”的对象,就像“粘贴”住一样,会随同转动一同移动。所以我们用hotspot元素来做引导方向和指示场景中物体的热点。

另外,layer和plugin在本质上是一样的元素,区别就是名字不一样,就好比广东和粤的区别。

layer元素官方说明文档 以及 layer元素从入门到精通

因为内容有重复,建议可直接查看 layer元素从入门到精通  (更多…)

krpano中如何让图片自适应屏幕尺寸

自适应屏幕尺寸的图片

我们制作的漫游会在各种各样的设备上浏览,不同的设备屏幕尺寸各有差异,如果我们按照固定的像素来固定layer的尺寸,那么有些图片在显示器上可能合适,但在手机上看可能就会太大。通常我们需要根据屏幕的宽度和高度来确定layer的宽度和高度。 (更多…)