简介
- 随视角变化指南针比例尺随之变化。
- 图标控制指南针显示。
- 方便控制指南针
- 本文为文档翻译。
krpano插件
T氏krpano工具箱
使用方式
T氏HTML5多边形热区编辑器
使用方式
Textfield插件完全解析
krpano内支持的HTML元素
下面所列出的html写法必须在textfield插件的html进行获取;
|
1 |
html="data:test" |
对应的data元素（name和上面html属性中的test对应上）为，
|
1 2 3 4 5 6 7 |
<data name=test" > <![CDATA[ 这里写html内容 ]]> </data> |
由于代码格式的关系，就有可能被krpano viewer或其它解析xml的程序解析到。因此我们需要在数据前后加上<![CDATA[以及]]>。
HTML 标题
标题（Heading）是通过 <h1> – <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。
|
1 2 3 |
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> |
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
|
1 2 3 4 5 |
<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> |
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
|
1 |
<!-- This is a comment --> |
HTML 段落
段落是通过 <p> 标签定义的。
|
1 2 |
<p>This is a paragraph</p> <p>This is another paragraph</p> |
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
|
1 |
<p>This is<br />a para<br />graph with line breaks</p> |
速查
文本元素
|
1 2 3 4 |
<p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre> |
Logical Styles
|
1 2 3 |
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code> |
Physical Styles
|
1 2 |
<b>This text is bold</b> <i>This text is italic</i> |
Links, Anchors, and Image Elements
|
1 2 3 4 5 6 |
<a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a> |
Unordered list
|
1 2 3 4 |
<ul> <li>First item</li> <li>Next item</li> </ul> |
Ordered list
|
1 2 3 4 |
<ol> <li>First item</li> <li>Next item</li> </ol> |
Definition list
|
1 2 3 4 5 6 |
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> |
Tables
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table> |
Frames
|
1 2 3 4 |
<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> |
Entities
|
1 2 3 |
&lt; is the same as < &gt; is the same as > &#169; is the same as © |
Other Elements
|
1 2 3 4 5 6 7 8 9 |
<!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address> |
HTML 样式
应该避免使用下面这些标签和属性：
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容。 |
| <font> 和 <basefont> | 定义 HTML 字体。 |
| <s> 和 <strike> | 定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
对于以上这些标签和属性：请使用样式代替！
CSS属性与style
应用字体外观
| 属性 | 描述 | CSS |
|---|---|---|
| font | 在一个声明中设置所有字体属性。 | 1 |
| font-family | 规定文本的字体系列。 | 1 |
| font-size | 规定文本的字体尺寸。 | 1 |
| font-size-adjust | 为元素规定 aspect 值。 | 2 |
| font-stretch | 收缩或拉伸当前的字体系列。 | 2 |
| font-style | 规定文本的字体样式。 | 1 |
| font-variant | 规定是否以小型大写字母的字体显示文本。 | 1 |
| font-weight | 规定字体的粗细。 | 1 |
操作文本显示
| 属性 | 描述 | CSS |
|---|---|---|
| color | 设置文本的颜色。 | 1 |
| direction | 规定文本的方向 / 书写方向。 | 2 |
| letter-spacing | 设置字符间距。 | 1 |
| line-height | 设置行高。 | 1 |
| text-align | 规定文本的水平对齐方式。 | 1 |
| text-decoration | 规定添加到文本的装饰效果。 | 1 |
| text-indent | 规定文本块首行的缩进。 | 1 |
| text-shadow | 规定添加到文本的阴影效果。 | 2 |
| text-transform | 控制文本的大小写。 | 1 |
| unicode-bidi | 设置文本方向。 | 2 |
| white-space | 规定如何处理元素中的空白。 | 1 |
| word-spacing | 设置单词间距。 | 1 |
| hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
| punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
| text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 | 3 |
| text-outline | 规定文本的轮廓。 | 3 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
| text-shadow | 向文本添加阴影。 | 3 |
| text-wrap | 规定文本的换行规则。 | 3 |
| word-break | 规定非中日韩文本的换行规则。 | 3 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
背景色和背景图像
| 属性 | 描述 | CSS |
|---|---|---|
| background | 在一个声明中设置所有的背景属性。 | 1 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-color | 设置元素的背景颜色。 | 1 |
| background-image | 设置元素的背景图像。 | 1 |
| background-position | 设置背景图像的开始位置。 | 1 |
| background-repeat | 设置是否及如何重复背景图像。 | 1 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 |
外边距属性
| 属性 | 描述 | CSS |
|---|---|---|
| margin | 在一个声明中设置所有外边距属性。 | 1 |
| margin-bottom | 设置元素的下外边距。 | 1 |
| margin-left | 设置元素的左外边距。 | 1 |
| margin-right | 设置元素的右外边距。 | 1 |
| margin-top | 设置元素的上外边距。 | 1 |
边框属性
| 属性 | 描述 | CSS |
|---|---|---|
| border | 在一个声明中设置所有的边框属性。 | 1 |
| border-bottom | 在一个声明中设置所有的下边框属性。 | 1 |
| border-bottom-color | 设置下边框的颜色。 | 2 |
| border-bottom-style | 设置下边框的样式。 | 2 |
| border-bottom-width | 设置下边框的宽度。 | 1 |
| border-color | 设置四条边框的颜色。 | 1 |
| border-left | 在一个声明中设置所有的左边框属性。 | 1 |
| border-left-color | 设置左边框的颜色。 | 2 |
| border-left-style | 设置左边框的样式。 | 2 |
| border-left-width | 设置左边框的宽度。 | 1 |
| border-right | 在一个声明中设置所有的右边框属性。 | 1 |
| border-right-color | 设置右边框的颜色。 | 2 |
| border-right-style | 设置右边框的样式。 | 2 |
| border-right-width | 设置右边框的宽度。 | 1 |
| border-style | 设置四条边框的样式。 | 1 |
| border-top | 在一个声明中设置所有的上边框属性。 | 1 |
| border-top-color | 设置上边框的颜色。 | 2 |
| border-top-style | 设置上边框的样式。 | 2 |
| border-top-width | 设置上边框的宽度。 | 1 |
| border-width | 设置四条边框的宽度。 | 1 |
| outline | 在一个声明中设置所有的轮廓属性。 | 2 |
| outline-color | 设置轮廓的颜色。 | 2 |
| outline-style | 设置轮廓的样式。 | 2 |
| outline-width | 设置轮廓的宽度。 | 2 |
| border-bottom-left-radius | 定义边框左下角的形状。 | 3 |
| border-bottom-right-radius | 定义边框右下角的形状。 | 3 |
| border-image | 简写属性，设置所有 border-image-* 属性。 | 3 |
| border-image-outset | 规定边框图像区域超出边框的量。 | 3 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定用作边框的图片。 | 3 |
| border-image-width | 规定图片边框的宽度。 | 3 |
| border-radius | 简写属性，设置所有四个 border-*-radius 属性。 | 3 |
| border-top-left-radius | 定义边框左上角的形状。 | 3 |
| border-top-right-radius | 定义边框右下角的形状。 | 3 |
| box-decoration-break | 3 | |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |
内边距属性
| 属性 | 描述 | CSS |
|---|---|---|
| padding | 在一个声明中设置所有内边距属性。 | 1 |
| padding-bottom | 设置元素的下内边距。 | 1 |
| padding-left | 设置元素的左内边距。 | 1 |
| padding-right | 设置元素的右内边距。 | 1 |
| padding-top | 设置元素的上内边距。 | 1 |
尺寸属性
| 属性 | 描述 | CSS |
|---|---|---|
| height | 设置元素高度。 | 1 |
| max-height | 设置元素的最大高度。 | 2 |
| max-width | 设置元素的最大宽度。 | 2 |
| min-height | 设置元素的最小高度。 | 2 |
| min-width | 设置元素的最小宽度。 | 2 |
| width | 设置元素的宽度。 | 1 |
定位属性
| 属性 | 描述 | CSS |
|---|---|---|
| bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移。 | 2 |
| clear | 规定元素的哪一侧不允许其他浮动元素。 | 1 |
| clip | 剪裁绝对定位元素。 | 2 |
| cursor | 规定要显示的光标的类型（形状）。 | 2 |
| display | 规定元素应该生成的框的类型。 | 1 |
| float | 规定框是否应该浮动。 | 1 |
| left | 设置定位元素左外边距边界与其包含块左边界之间的偏移。 | 2 |
| overflow | 规定当内容溢出元素框时发生的事情。 | 2 |
| position | 规定元素的定位类型。 | 2 |
| right | 设置定位元素右外边距边界与其包含块右边界之间的偏移。 | 2 |
| top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 | 2 |
| vertical-align | 设置元素的垂直对齐方式。 | 1 |
| visibility | 规定元素是否可见。 | 2 |
| z-index | 设置元素的堆叠顺序。 | 2 |
CSS 参考手册
列表属性（List）
| 属性 | 描述 | CSS |
|---|---|---|
| list-style | 在一个声明中设置所有的列表属性。 | 1 |
| list-style-image | 将图象设置为列表项标记。 | 1 |
| list-style-position | 设置列表项标记的放置位置。 | 1 |
| list-style-type | 设置列表项标记的类型。 | 1 |
| marker-offset | 2 |
HTML 布局
实例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright W3School.com.cn </div> </body> |
CSS：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<data name="testtext"><![CDATA[ <div id="header" style="background-color:black; color:white; text-align:center; padding:5px;"> <h1>City Gallery</h1> </div> <div id="nav" style="line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; "> London<br> Paris<br> Tokyo<br> </div> <div id="section" style="width:350px; float:left; padding:10px; "> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer" style=" background-color:black; color:white; clear:both; text-align:center; padding:5px; "> Copyright W3School.com.cn </div> ]]> </data> |
棒棒糖热点编辑器1.4
简介
- 输入热点名称（hotspot的name），若热点已存在，则进入编辑模式，如热点不存在，提示是否创建热点；创建热点可选择样式以及添加热点所链接到的场景或热点上显示的文字。
- 可视化编辑热点属性：尺寸（scale）、透明度（alpha）、旋转(rotate)、3D属性（rx、ry、rz）、平移（ox、oy）;
- 热点点击可指定跳转场景；
- 支持热点上显示文字或纯文字；
- 内置多种热点样式，也可以使用自定义热点样式；
- 所见即所得，即时看到效果。
B2U远程屏幕分享插件
简介
本插件可实现多台联网终端（被分享者）共同观看分享者所操作浏览的全景画面。如A设备将画面分享，则B、C、D设备可浏览A设备当前的画面操控。适用于旅游景区导览、房地产项目现场解说。使用者无需配置服务器，即插即用，傻瓜式操作。
HTML5多边形热区编辑器之一
使用方式
Editor插件完全解析
插件简介
视频转换器droplet
简介
livepanoConverterVideo.droplet原本是VirtualTourBuilder插件的配套livepano视频转换软件，专门用于将livepano视频转换为krpano可用的编码。当然，这也适用于一起需要在krpano中播放的视频，包括热点视频、平面视频以及全景视频。 （更多…）
已访问热点XML插件
简介
本插件可标记已访问过的热点，同时对默认皮肤的缩略图也提供了已访问标记。 （更多…）
全景漫游设计器 Virtual Tour Builder
- 包含免费皮肤模版
- 无需krpano代码知识
- 7种类型的兴趣点热点
- livepano生成助手
- 包含4个商业插件
- 自适应移动端和VR模式
- 包含4种皮肤
- 包含多层自定义地图和雷达