Krpano全景漫遊開發手冊

*聲明： 本文檔由做者收集整理，並不是所有原創，若有侵權，請聯繫刪除！另外因爲Krpano自己內容較多，不可能面面聚到，若有不足，歡迎大佬指正。最新文檔請閱讀原文

概述

本文檔基於版本1.19 pr13。

官網：krpano.com

概念

全景漫遊（英文：panorama）技術可讓體驗者在全景圖像構建的全景空間裏切換視角的瀏覽。它是經過拍攝全景圖像，再採用計算機圖形圖像技術構建出全景空間，讓使用者能用控制瀏覽的方向，或左或右、或上或下觀看物體或場景，彷彿身臨其境通常。與傳統的3D建模相比，全景漫遊技術製做簡單，數據量小，系統消耗低，且更有真實感。

早期270°或者360°全景漫遊（柱狀全景）：

720°全景漫遊：

全景圖

全景圖（這裏特指球面全景圖）是指一種圖片寬高比爲2比1的包含了360°x180°空間的圖片，例如8000*4000的jpg圖片或tiff圖片等。 注：寬高比2：1爲水平方向（360）：垂直方向（180）

Krpano簡介

krpano是一款全景漫遊製做軟件和工具。其具備如下特色：

• 高度靈活、性能卓越的輕量化全景漫遊瀏覽器。
• 兼容HTML5和Flash，支持Webgl下的WebVR展現。
• 使用專用的krpano xml代碼編寫全景漫遊，可開發出高度定製化的項目，也可利用krpano工具開發在線全景製做及展現平臺。
• 支持多種類型的全景圖以及全景視頻和環物全景。
• 支持多種投影模式。
• 同時提供簡單高效的批處理方式，可在無需代碼干預下迅速生成一個基本功能兼備的全景漫遊項目。

如何選擇

若是隻想簡單展現全景，無特殊定製需求，那麼可使用默認皮膚，或者使用全景平臺進行開發。 若是須要開發全景平臺、定製全景功能或者對全景開發有濃厚興趣的能夠學習和深刻了解krpano。

特性

• 兼容Flash和HTML5
• 高性能和高質量的渲染
• 高度可定製的
• 豐富的全景格式和圖像文件格式的支持
• 多分辨率
• 三維投影
• 虛擬旅遊熱點/腳本
• 漸進式

案例展現

見下載包或者官方網站

---

文件說明

下載包使用說明

examples文件夾

這是krpano的案例文件夾（1.19的examples文件夾在viewer文件夾下），裏面包含了官方的絕大部分案例，這些案例都是學習krpano代碼的很好的素材。注意下載包的案例所使用的viewer是下載包自身的默認viewer文件夾。由於你不能簡單複製案例文件夾，你還須要設置一下對應viewer的路徑，並且該viewer還必須是你本身的viewer。

templates 文件夾

官方一系列模版所在的文件夾，包括了圖片、xml、html以及相關配置文件等。經過對這裏的瞭解和修改，咱們能夠作出本身的皮膚模版，而後一鍵生成，實現批量的工做流。固然，正常狀況下，你也無需從這裏拷貝，由於在droplet過程當中會自動生成。部分模版在默認droplet過程當中並無使用到。

viewer 文件夾

krpano 下載包的官方插件、引擎、案例的存放位置，同時也是讓案例文件夾可以正確顯示的 viewer 所在的位置。其中plugins是當前版本的全部官方插件；examples是官方提供的案例。

小貼士

自身項目的 viewer（js和swf）會在droplet過程當中自動生成無需從這裏拷貝

droplet.bat 文件

Krpano Droplets 是krpano命令行工具加上配置文件config的一個快捷方式。droplets使用方式很是簡單，將文件（一般是圖片或者xml等文件）直接拖放在droplet圖標上鬆開便可。

krpano droplet （圖中齒輪狀圖標文件）

MAKE PANO (NORMAL) Droplet

用法說明:

• 生成普通 (=單分辨率) 全景.
• 製做典型的360度全景.
• 所有全景圖將會一次性載入. 默認下方塊最大邊長爲2048像素(能夠在config配置文件中修改).
• 包括默認的導航皮膚.
• 支持Flash和HTML5.

Droplet 說明:

• 基於 kmakemultires 工具.
• 配置文件: normal.config
• 默認模版/皮膚配置文件: defaultbuttons.skin

 

MAKE PANO (MULTIRES) Droplet   

用法說明:

• 生成多分辨率全景
• 製做全部類型的全景
• 只有特定的切片在須要時載入. 沒有尺寸/分辨率限制.
• 包含默認的導航皮膚.
• 支持Flash和HTML5.

Droplet 說明:

• 基於 kmakemultires 工具.
• 配置文件: multires.config
• 默認模版/皮膚配置文件: defaultbuttons.skin

 

MAKE PANO (SINGLESWF) Droplet

用法說明:

• 生成普通 (=單分辨率) 全景同時將全部文件嵌在一個SWF文件中.只輸出一個SWF文件和一個HTML文件.
• 製做典型的360度全景 .
• 所有全景圖將會一次性載入. 默認下方塊最大變長爲2048像素(能夠在配置文件中修改).
• 包含默認的導航皮膚.
• 僅支持Flash.

Droplet 說明:

• 基於 kmakemultires 工具.
• 配置文件: singleswf.config
• 默認模版/皮膚配置文件: defaultbuttons.skin

 

MAKE PANO (FLAT) Droplet

用法說明:

• 生成平面切片多分辨率圖像.
• 製做平面圖像. 輸出時既定爲平面圖像.
• 只有特定的切片在須要時載入. 沒有尺寸/分辨率限制.
• 包含有默認導航按鈕的皮膚，針對特定的視角.
• 支持Flash與HTML5.

Droplet 說明:

• 基於 kmakemultires工具
• 配置文件: flat.config
• 默認模版/皮膚配置文件: flat.xml / flatskin.xml

 

MAKE VTOUR (NORMAL) Droplet

用法說明:

• 生成普通 (=單分辨率) 全景並將它們整合到一個虛擬漫遊中.
• 製做典型的360度全景.
• 所有全景圖將會一次性載入. 默認下方塊最大邊長爲2048像素(能夠在配置文件中修改).
• 包含一個包括導航按鈕、可滾動縮略圖以及可選擇必應地圖以及重力感應插件的默認皮膚.
• 支持Flash和HTML5.

Droplet 說明:

• 基於kmakemultires 工具.
• 配置文件: vtour-normal.config
• 默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyro.skin

 

MAKE VTOUR (MULTIRES) Droplet （正常生成不考慮VR的漫遊推薦使用這個dropelt）

用法說明:

• 生成多分辨率全景並將它們整合到一個虛擬漫遊中.
• 製做全部類型全景圖像.
• 只有特定的切片在須要時載入. 沒有尺寸/分辨率限制.
• 包含一個包括導航按鈕、可滾動縮略圖以及可選擇必應地圖以及重力感應插件的默認皮膚.
• 支持Flash和HTML5.

Droplet 說明:

• 基於 kmakemultires 工具.
• 配置文件: vtour-multires.config
• 默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyro.skin

 

MAKE VTOUR (VR-OPT) droplet （正常生成帶有VR的漫遊推薦使用這個dropelt）

用法說明:

• 生成多分辨率全景並將它們整合到一個虛擬漫遊中.
• 製做全部類型全景圖像.
• 只有特定的切片在須要時載入. 沒有尺寸/分辨率限制.
• 包含一個包括導航按鈕、可滾動縮略圖以及可選擇必應地圖以及重力感應插件的默認皮膚.
• 支持Flash和HTML5.
• krpano 1.19 pr9後，可生成爲VR優化的全景圖。若是包含立體圖像的輸入時，會生成針對VR使用的立體圖像。

Droplet 說明:

• 基於 kmakemultires 工具.
• 配置文件: vtour-vr.config
• 默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyro.skin

 

MAKE OBJECT Droplet

用法說明:

• 生成若干個平面多分辨率圖像並將它們整合到一個可縮放旋轉的360物體影像中.
• 製做平面圖像物體. 全部物體圖片的尺寸必須一致.
• 只有特定的切片在須要時載入. 沒有尺寸/分辨率限制.
• 包含一個特定的控制物體的皮膚.
• 僅支持Flash.

Droplet 說明:

• 基於 kmakemultires 工具.
• 配置文件: object.config
• 默認模版/皮膚配置文件: object.xml / objectskin.xml

 

Convert SPHERE to CUBE Droplet

用法說明:

• 將球面圖像轉換至立方體圖.
• 輸出的立方體格式、尺寸以及圖像尺寸能夠在配置文件中修改.

Droplet 說明:

• 基於 ktransform 工具.
• 配置文件: convertdroplets.config

 

Convert CUBE to SPHERE Droplet

用法說明:

• 將六張立方體圖像轉換成一張球面全景圖.
• 輸出的圖像尺寸和格式能夠在配置文件中修改.

Droplet 說明:

• 基於 kcube2sphere 工具.
• 配置文件: convertdroplets.config

 

Encrypt XML Droplet

用法說明:

• 將xml文件拖放進droplet進行加密.
• 加密過程當中xml文件會自動被壓縮.

Droplet 說明:

• 基於 encrypt 工具.

製做自定義droplet

內置 droplets 只是針對最多見的狀況的範例。製做自定義的krpano droplet是很是簡單的。你只須要編輯配置文件，而後複製並重命名一個已有的krpano droplet並對droplet自己進行編輯便可。

• Windows下編輯krpano droplet
  • krpano droplet其實是批處理文件 (.bat).
  • 能夠在任意文本編輯器下進行編輯.
  • 用文本編輯器打開krpano droplet，將配置文件的名字和路徑修改成你本身的配置文件.
• Mac OSX下編輯krpano droplet
  • droplet其實是」AppleScript Droplet’.
  • 可使用 ‘Apple Script Editor’打開
  • 在 Apple Script Editor打開krpano droplet，將配置文件的名字和路徑修改成你本身的配置文件.

兩個txt文件

krpano受權的法律聲明以及版本發行說明。

krpanotools

包含 32/64 位的 krpanotools32.exe 與 krpanotools64.exe，該兩個文件爲 krpano 項目核心，會在命令行中調用它們。

krpano Testing Server

krpano 自帶的靜態文件本地服務環境，使用它能夠路過本地文件案例限制來查看 Flash 與 HTML5 效果，另外它還能夠控制瀏覽器緩存、限制下載速度模擬網絡條件。

krpano tools

用來加密保護全景項目的可視化工具，須要註冊纔可使用，這裏就不擴展。

成果文件說明

vtour 文件夾結構

如下是默認與比較基礎文件結構與文件名，根據droplet的不一樣，文件可能更多或更少，同時文件名也並不必定和這些同樣。

vtour/
| -- panos/             #存放全景切片圖片的文件夾
| -- skin/              #存放皮膚相關文件
| -- plugins/           #用來存放插件
| -- tour.swf           #krpano flash viewer
| -- tour.js            #krpano HTML5 viewer
| -- tour.xml           #生成全景的相關配置
| -- tour.html          #用來瀏覽全景的頁面，須要本地服務環境
| -- tour_editor.html   #添加熱點（hotspot）與初始化視角設置的編輯器
| -- tour_testingserver.exe #windows系統中打開測試服務器並打開html文件進行本地瀏覽。
| -- tour_testingserver_macos #mac系統中打開測試服務器並打開html文件進行本地瀏覽。
複製代碼

vtour 運做機制

Krpano 是經過viewer引擎來實現瀏覽靜態圖片時產生「三維」效果，而這一切則是經過tour.html這個入口文件。

過濾掉一些沒用的代碼，能夠看到入口文件主代碼以下：

<div id="pano"></div>
<script src="tour.js"></script>
<script>
    embedpano({
        swf: "tour.swf", //有則表示加載flash引擎，若是設置html5:only則不須要該值
        xml: "tour.xml", //啓動時的配置文件
        target: "pano", //要渲染到的目標容器ID
        html5: "only", //若是有須要用到flash，可設置爲auto
        //id: "krpanoSWFObject", //默認的krpano對象，每個viewer對應惟一id，與JS交互時要用到
        mobilescale: 1.0, //移動設備縮放，1表示不縮放，默認0.5
        passQueryParameters: false //是否接受URL傳參，例如：tour.html?html5=only&startscene=scene2
    });
</script>
複製代碼

---

載入全景

引入腳本（html5渲染器）

<script src="./tour.js"></script>
複製代碼

建立嵌入容器

<div id="pano" style="width:100%;height:100%;"></div>
複製代碼

建立對象及配置參數

embedpano({
    swf:"krpano.swf", // flash渲染器 
    xml:"krpano.xml", // 主配置文件 缺省的時候會調用krpano.xml和krpano.swf 不加載設置0便可
    target:"pano", // 嵌入容器id 
    id:"krpanoSWFObject", // 當前全景id，javascript接口調用會使用此id
    bgcolor:"#000000",// 背景顏色 
    html5:"auto", // html5模式（auto：自動；prefer：優先使用html5；fallback：優先flash；only：只使用html5；always：始終使用html5-僅用於測試；never：始終使用flash；可加上webgl或css3d渲染技術，如auto+css3d） 
    flash："auto",// flash模式（auto,prefer,fallback,only,never和html設置相似） 
    wmode:"window",// flash模式設置（window：窗口；opaque：不透明；opaque-flash：不透明，僅限flash；transparent：透明的；transparent-flash：透明的，僅限flash；direct：最佳性能，但可能不兼容舊系統和瀏覽器） 
    localfallback:"http://localhost:8090",
    vars:{},// 在xml加載解析後設置啓動變量 
    initvars：{},// 在xml加載解析前設置啓動變量，能夠在地址進行查詢（our.html?initvars.variable=value）
    basepath:...// 基本路徑 （相對於krpano.swf）
    consolelog:false,// 是否在瀏覽器控制檯打印日誌信息
    mwheel:true,// 是否啓用鼠標滾輪
    focus:true,// 得到焦點 
    webglsettings:{preserveDrawingBuffer:false, depth:false, stencil:false},//webgl設置
    mobilescale:0.5, // 移動設備縮放 
    fakedevice:"",// "mobile", "tablet", "desktop"；模擬設備 （僅限測試）
    onready:function(){},// 準備就緒回調函數，通常當javascript調用krpano接口的時候，須要在此方法內
    onerror:function(){},// 錯誤回調函數 
    passQueryParameters:true, // 啓用url查詢參數（ html5, flash, wmode, mobilescale, fakedevice, initvars）做爲變量傳遞，如tour.html?html5=only&startscene=scene2&initvars.design=flat
    });
複製代碼

移除全景

removepano(id);
複製代碼

官網文檔：krpano.com/docu/html/#…

---

Krpano XML語法

krpano xml

xml自己是一種傳輸格式，這意味着只能用於在krpano viewer內傳輸數據。當xml被解析時，xml元素纔會被傳輸/映射到krpano的內部數據結構。這就是說當解析結束後，本質上就再也沒有xml。

krpano xml 自己是xml 語言，但有着本身特定的元素和語法。krpano xml 包括靜態代碼和動態代碼部分。

靜態代碼就是由 26 個krpano 元素（包含廢棄的兩個）組成的代碼，它們有着本身的屬性，一般屬性的值都是字符串或者數字或者是布爾值，由於這些屬性的默認值規定了只能用這些類型。

相關的數值類型包括 string （字符串）、number （浮點數）、int（整數）、boolean （布爾 值， true 或者false ）。

• 有些屬性只在 Flash 下有意義，例如layer[name].smoothing;
• 有些屬性只在 HTML 下有意義，例如layer[name].jsborder
• 有些屬性是隻讀屬性， 你不能就這樣寫在上面的靜態代碼中， 只能經過get() 來獲取其數值， 如layer[name].pressed 、layer[name].imagewidth 、layer[name].imageheight
• 還有一些屬性是比較特別的，他們的數值類型是 Action Event 、也就是屬性的數值其實是填入動態代碼，例如咱們一開始遇到的onclick ="openurl('http://...');"，相似的還有幾個 on 字輩的屬性，像

onover =""
onhover =""
onout =""
onclick =""
ondown =""
onup =""
onloaded =""
複製代碼

xml標籤/節點

<element /> //無子元素
<element></element> //有子元素
複製代碼

屬性

一個xml元素能夠有一個或多個屬性,由屬性名和屬性值構成，屬性值必須放在單引號或者雙引號中，且屬性不容許重複

<element attribute="value">
   <childrenelement test1="value1" test2="value2" />
</element>
複製代碼

根元素krpano

全部元素須要位於krpano元素內部

<krpano onstart="...">
   ...
   <preview url="..." />
   <image>
     <cube url="..." />
   </image>
   ...
</krpano>
複製代碼

註釋

不能包含兩個連字符-- <!-- --> 大小寫 xml元素的名稱和xml屬性都會被轉換成小寫，因此是不區分大小寫的 編碼 爲了不字符編碼問題，全部xml文件應保存爲utf-8或utf-16文件 自定義元素 krpano容許添加自定義的元素、容許在系統定義的元素中添加自定義屬性，方便咱們進行其它操做。krpano在載入xml文件解析靜態代碼時會忽略掉自定義元素。自定義的元素和屬性除了語法上不能違反krpano的規定，在屬性值設置上更爲自由。 其餘 xml元素間的空格字符空格、製表符和換行符將被忽略

保留字，不能直接使用，須要使用轉義

出現相同name的元素後面會覆蓋前面的

注意：html5模式會比flash模式嚴格，兩種模式均需調試

---

官方文檔：krpano.com/docu/xml/sy…

Krpano XML內置元素

krpano的XML結構

<krpano>
    <include>
    <preview>
    <image>
    <view>
    <autorotate>
    <plugin>
    <layer>
    <hotspot>
    <events>
    <action>
    <scene>
</krpano>
複製代碼

krpano xml中的全部xml元素和屬性是可選的,能夠定義屢次。 當相同的元素將再次定義兩個或兩個以上的時候,那麼之後/聲明 將會覆蓋以前的。

< krpano > 根元素內 也能夠包含< krpano > 元素

xml自己只是一個 傳送格式 ——這意味着它將只用於傳送krpano view的數據。 當xml解析,那麼xml元素將轉換/映射到krpano內部數據結構。 這意味着xml解析後就沒有了。

官方文檔：krpano.com/docu/xml/#t…

特殊屬性

name

<xmlelement name="..." ... />
複製代碼

name屬性 ⇒定義Array元素:

當一個xml元素有name屬性,那麼這個元素將被解釋爲元素的Array 。 neme名字的 Array 便是該元素自己。

當沒有 Array 這個名字已經存在,它將被自動建立。

當元素已經存在,而後被定義 xml元素將仍然建立，但會覆蓋已經存在的元素。

名稱屬性名字規範：

1. 必須以英文字母開始，不能使用數字，漢字開始 !
2. 當一個名稱仍以數字字符開始，而後將解釋爲Array索引名稱。
3. 全部名稱會自動轉換成小寫,容許直接不分大小寫訪問!

url

<xmlelement url="..." ... />
複製代碼

資源路徑，用於引入插件、圖片、音頻等。

更以根據須要使用下面的佔位符：

%FIRSTXML% – 第一個載入的xml文件的路徑。
%CURRENTXML% – 當前載入的主xml文件路徑（非嵌入的文件）。
%SWFPATH% – viewer文件的路徑。
%HTMLPATH% -html文件的路徑。
%BASEDIR% – 使用basedir的路徑。
%$VARIABLE% – 使用指定的「VARIABLE」 – 這能夠是任意的krpano變量，但必須當前xml或場景徹底載入以前定義，例如已經存在於HTML文件中或在loadpano()、loadscene()調用以前。
複製代碼

devices

<xmlelement ... devices="...">
    <childrenelement ... />
    ...
</xmlelement>
複製代碼

若是xml元素在某個設備渲染或者忽略，能夠給該元素設置devices屬性，能夠設置多個。它能夠在每一個xml元素上設置，當xml文件將被解析並轉換爲krpano內部數據結構時,將會檢查每一個xml元素的devices屬性。噹噹前設備不匹配devices屬性,那麼這個xml元素及其全部子元素將被忽略。

+  .and.  且
|  .or.   或
！  no-   否
複製代碼

屬性值（能夠經過邏輯運算符組合使用）

例子

devices="all"（默認）
devices="html5"
devices="flash|webgl" 
devices="flash.or.webgl"
複製代碼

attribute.devicecheck

<xmlelement attribute.devicecheck="..."
            attribute.devicecheck="..."
            ...
            />
複製代碼

在不一樣中設置不一樣的屬性值，屬性值同device

+  .and.  且
|  .or.   或
！  no-   否
複製代碼

例子

scale.normal="1.0" 
width.desktop="200"
visible.fullscreensupport="true"
visible.html5.and.webgl.or.flash="true"
visible.html5.and.no-webgl="false"
複製代碼

if

<xmlelement ... if="condition">
    <childrenelement ... />
    ...
</xmlelement>
複製代碼

根據條件渲染元素

例子

embedpano({..., initvars:{design:"flat"}, ...});
<include url="design_default.xml" if="design == default" />
<include url="design_flat.xml"    if="design == flat"    />
複製代碼

style

<style name="stylename" attributes ... />
<xmlelement ... style="stylename" ... />
複製代碼

調用styleneme屬性集，並應用到該元素，優先級低於行間，可用行間屬性覆蓋

例子

<style name="spotstyle" url="spotimage.png" />
<hotspot name="spot1" style="spotstyle" ... />
<hotspot name="spot2" style="spotstyle" ... />
複製代碼

get、calc

<xmlelement attribute="get:variable" ... />
<xmlelement attribute="calc:expression" ... />
複製代碼

獲取、計算屬性值

例子：

<settings width="100" height="50" />
...
<layer ... 
       width="get:settings.width"
       height="calc:settings.height * 2"
       />
複製代碼

keep

場景之間的轉換時（包括場景內外的切換），layer元素、hotspot元素以及events元素是否保留，默認爲false。

注：

• 咱們日常實際上每一個項目開始時都是先從scene以外到scene內，因此一開始就有場景的切換。所以說，你寫在scene外面的layer元素、hotspot元素以及event元素，你應該設置一個keep=」true」，纔可以讓場景切換時這些元素或事件不會移除。
• 靜態元素會繼承父元素的keep屬性；動態建立的爲false，不會繼承。

krpano

krpano 根元素,當xml進入解析數據結構階段，會將該標籤移除，你能夠在當前krpano內定義另外的krpano

<krpano version="1.19"     //版本號
        onstart=""         //進入漫遊時，xml加載和解析後執行的動做
        basedir="%FIRSTXML%" //設置程序根目錄
        bgcolor=""      //全景播放器的背景色，不設置則爲透明
        idletime="0.5"  //無用戶交互操做的多長時間後執行onidle動做
        colorcorrection="default" //改變Flashplayer 10的色彩修正設置(Flash only)&emsp;可選的值：default、on、off
        logkey="true"     //當爲Ture時，按O可查看log日誌
        strict="false"			//嚴格代碼模式
        showerrors="true"  //是否輸出錯誤信息
        debugmode="false"  //當爲True時，顯示來自插件中的trace(0,text)中的text信息
    >
    ...
</krpano>
複製代碼

krpano做爲XML文件惟一根元素，必須設置！

進階提示 – 當xml進入解析數據結構階段，則主標籤「krpano」將被移除。因此你能夠在當前krpano標籤內定義另外一個krpano元素，定義新的設置或從新定義先前的設置。

樣例：

<krpano>
<!-- 僅僅使用網格預覽全景(節約下載空間-->
<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);"
details ="16" />
</krpano>
複製代碼

grid(type，xsteps，ysteps，res，lincol，bkcol，pntcol) 可選參數： xsteps =行像素之間的水平距離，默認= 10 ysteps =行像素之間的垂直距離，默認= 10 res =解決 gridimage，默認= 400 lincol = hex-format 線條的顏色(默認= 0 x666666) bkcol =背景顏色(默認= 0 x222222) pntcol =點的顏色(默認= linecolor)

<krpano version="1.17" onstart="loadscene(scene1);">
  <scene name="scene1">
  ...
  </scene>
</krpano>
複製代碼

preview

preview 預覽圖設置，指定一張全景預覽圖，以便在讀取過程當中，過渡顯示，即全景徹底載入以前的模糊圖像，通常自動生成

<preview type=""                   //全景圖的類型（SPHERE，CYLINDER，CUBESTRIP，grid(type,xsteps,ysteps,res,linecol,bgcol,pntcol) ）
         url="previewpano.jpg"  //全景圖路徑
         striporder="LFRBUD"       //定義圖像順序
         details="16"              //圖像細節質量調整，越大越清晰
         />
複製代碼

樣例：

<preview url="pano_preview.jpg" />
<preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" />
<preview type="SPHERE" url="spherepreview.jpg" details="16" />
<preview type="CUBESTRIP" url="cspreview.jpg" />
複製代碼

image

*image全景圖設置，包括全景圖類型、漸進分辨率切片顯示等

<image type="CUBE"                全景圖類型（六面體）CUBE、CUBESTRIP、SPHERE、CYLINDER
       tiled="false"              是否使用平鋪圖像
       tiledimagewidth="..."      平鋪圖像寬度
       tiledimageheight="..."     平鋪圖像高度
       tilesize="..."             平鋪圖像大小
       baseindex="1"              圖像讀取默認索引數字(第一個)
       frames="1"                 當前圖像幀數
       frame="1"
       prealign=""                prealign,採用X|Y|Z軸對齊方式
       hfov=""                    水平視野
       vfov=""						垂直視野
       multires=""                   多級精度
    	multiresthreshold=「0.025」 
       stereo=""                    立體
        stereolabels=""
        stereoformat=""             
        fisheye.fov=""				魚眼
	fisheye.align=""
	fisheye.crop=""
	fisheye.lenscp=""
    voffset=「0.0」 垂直偏移度
    progressive=「false」 多分辨率加載（僅限flash）
    cubelabels=「u‘b r f l | | | | | d‘」
    sphere.mapping  定義/投影球面輸入圖像的映射（僅限html5）
    mjpegstream    mjpeg流(只支持HTML5和WebGL)
 >
    <cube url="pano_%s.jpg" />
</image>
複製代碼

以上是數字索引方式讀取切片圖片，如下是經過定義六個方向的圖片路徑讀取切片，文件後綴要加上_l，_f....方式來識別。 相關方法

image.layer   僅限as3 usage
image.level.count   只讀
level[..].tiledimagewidth 
level[..].tiledimageheight
level[..].tilesize
level[..].aspreview
複製代碼

<image type="CUBE"
       tiled="false"
       tiledimagewidth="..."
       tiledimageheight="..."
       tilesize="..."
       baseindex="1"
       frames="1"
       frame="1"
       prealign=""
 >
    <left  url="pano_l.jpg" rotate="0" flip="" />
    <front url="pano_f.jpg" rotate="0" flip="" />
    <right url="pano_r.jpg" rotate="0" flip="" />
    <back  url="pano_b.jpg" rotate="0" flip="" />
    <up    url="pano_u.jpg" rotate="0" flip="" />
    <down  url="pano_d.jpg" rotate="0" flip="" />
</image>
複製代碼

例子

<image>
    <cube url="pano_%s.jpg" />
</image>
複製代碼

<image>
    <cubestrip url="cubestrip.jpg" />
</image>
複製代碼

<image type="SPHERE" multires="true" tilesize="...">
  <level tiledimagewidth="..." tiledimageheight="...">
    <sphere url="pano_%v_%h.jpg" />
  </level>
</image>
複製代碼

<image type="CYLINDER" multires="true" tilesize="...">
  <level tiledimagewidth="..." tiledimageheight="...">
    <cylinder url="pano_%v_%h.jpg" />
  </level>
</image>
複製代碼

<image>
    <fisheye url="fisheye.jpg" fov="180.0" />
</image>
複製代碼

<image type="CYLINDER" hfov="1.0" multires="true" tilesize="...">
  <level tiledimagewidth="..." tiledimageheight="...">
    <cylinder url="image_%v_%h.jpg" />
  </level>
</image>
複製代碼

<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        />
<image>
    <sphere url="plugin:video" />
</image>
複製代碼

view

view 元素控制全景的視野，例如起始位置、視域範圍、可縮放範圍、是否限制，限制觀看的區域等等。當要設置限制視角或設定特定的初始視角時，須要自行設定或使用插件獲取代碼。

觀看方向由hlookat/vlookat屬性定義，當前視場由fov屬性定義。要限定部分全景的視場，可使用limitview屬性。

<view hlookat="0.0"    水平視角  -180 至  180 之間
      vlookat="0.0"    垂直視角  -90  至  90  之間
      camroll="0.0"    鏡頭旋轉視角
      fovtype="VFOV"   定義視場角類型

•vfov -垂直視場，基於屏幕的高度
•HFOV -水平視野，基於屏幕寬度
•DFOV -看對角線場，基於屏幕的對角線
•MFOV -最大的視場（動態混合vfov和HFOV）

注意：在手機和平板設備的默認值將MFOV！


      fov="90.0"        默認視角的縮放
      hfov="" 當前水平視野（只讀）
	vfov="" 當前垂直視野（只讀）
      fovmin="1.0"      默認視角縮放最大值
      fovmax="179.0"    默認視角縮放最小值
      maxpixelzoom=""   默認視角最大縮放倍數      
      mfovratio="1.333333" 最大的屏幕尺寸的寬高比例
      distortion="0.0"				魚眼視角失真設置 0.0 至  1.0 之間（扭曲程度）
      fisheye="0.0"     #魚眼視角設置 0.0 至 1.0 之間（扭曲程度）（舊）
      distortionfovlink="0.5"	fov值與魚眼視角的關聯值，默認0.5(0.0-3.0之間)
      fisheyefovlink="0.5"  #fov值與魚眼視角的關聯值，默認0.5(0.0-3.0之間)（舊）
      stereographic="true" 是否啓動立體魚眼投影效果（小行星）
      pannini="0.0"       設置「Pannini / vedutismo」投影效果
      architectural="0.0"   建築視角設置 0.0 至  1.0 之間
      architecturalonlymiddle="true"  是否只對中間區域的圖像實行建築投影
      limitview="auto"    視角限制類型

•off--不限制在全部
•auto--自動限制（默認）
•lookat--限制查看變量直接「hlookatmin」，「hlookatmax」，「vlookatmin」，「vlookatmax」
•range--限制的地區設置由「hlookatmin」，「hlookatmax」，「vlookatmin」，「vlookatmax」，只有在這個範圍內，容許觀察
•fullrage--的地區設置由「hlookatmin」，「hlookatmax」，「vlookatmin」，「vlookatmax」，但容許放大看到整個圖像
•offrange---限制的地區設置由「hlookatmin」，「hlookatmax」，「vlookatmin」，「vlookatmax」，但不以任何方式限制縮放。


      hlookatmin=""   最小水平視角範圍  (-180 .. +180).
      hlookatmax=""   最大水平視角範圍  (-180 .. +180).
      vlookatmin=""   最小垂直視角範圍  (-90 .. +90).
      vlookatmax=""   最大垂直視角範圍  (-90 .. +90).
      hlookatrange=""(只讀)  當前最大水平範圍（等同於 hlookatmax - hlookatmin）
	vlookatrange=""（只讀）當前最大垂直範圍(等同於vlookatmax - vlookatmin)
      />
複製代碼

默認視角的參數設置和視角限制設置

樣例：

normal: <view hlookat="0" vlookat="0" fov="80" />

little planet view:

<view hlookat="0"
      vlookat="90"
      fisheye="1.0"
      stereographic="true"
      fov="150"
      fovmax="150"
      />
複製代碼

flat pano:

<view hlookat="0"
      vlookat="0"
      maxpixelzoom="1.0"
      limitview="fullrange"
      />
複製代碼

area

area 全景圖在瀏覽器中的顯示區域大小， 定義全景圖像展現的區域/窗口。有兩種定義區域位置和尺寸的模式：

• 經過定義尺寸和位置 (mode=align)
• 定義邊界邊距 (mode=border)

可在onresize事件中動態改變/調整這些設定。若是在onresize事件以外改動了area設置，那麼在下一次屏幕刷新時候將會調用一個onresize事件，對於新的區域/窗口尺寸做出迴應。

注意 – 全部的<layer> / <plugin>元素都要放在這個區域內。若是要把<layer> / <plugin>元素放在區域外面，需設置layer/plugin的STAGE屬性。

對齊方式:

<area mode="align"           定義區域的模式，排列align和邊界border兩種&emsp;可選的值：align、border
      align="lefttop"    排列對齊時[X,Y]的座標參考系&emsp;可選的值：lefttop、left、leftbottom、top、center、bottom、righttop、right、rightbottom
      x="0"                  基於排列方式偏移的X座標
      y="0"                  基於排列方式偏移的y座標
      width="100%"           區域寬度，能夠是像素值也能夠是百分比
      height="100%"          區域高度，能夠是像素值也能夠是百分比
      />
複製代碼

邊界填充模式:

<area mode="border"          定義區域的模式：邊界
      left="0"           距左邊的像素數
      top="0"                距頂部的像素數
      right="0"              距右邊的像素數
      bottom="0"             距底部的像素數
      />
複製代碼

樣例：

<area align="center" width="640" height="480" /> <area mode="border" top="10" bottom="100" /> <area x="25%" width="75%" /> <events onresize="fixaspectresize(16,9);" />

display

*display 全景圖顯示品質，定義渲染的質量和性能

html5狀態下顯示質量設置

<display  stereo="false"  立體
         stereooverlap="0.0"
			hardwarelimit=""      限制只對目標硬件輸出
              • Desktop(桌面) with WebGL - 4096
              • Desktop with CSS3D - 2560
              • Android / BlackBerry / Kindle / Windows Phone - 1024
              • iPad - 1024
              • iPhone (Retina) with iOS 5.1 (or higher) - 1024
              • iPhone 5/5S and higher - 1024
              • iPhone (Retina) with iOS below 5.1 - 800
              • iPod (Retina) - 640
              • iPhone / iPod Touch (Non-Retina) - 600
         usedesktopimages=""    設置是否在PC桌面使用html5輸出
         mipmapping="auto"      定義切片輸出模式，可選的值：auto、force、off
         loadwhilemoving="auto" 控制在移動時平滑顯示模式（auto\true\false）
         framebufferscale="1.0"   調整/規模WebGL幀緩衝區的大小。
/>
複製代碼

flash狀態下顯示質量設置

<display fps="60"               flash播放時的幀速率，默認爲60（30-100）
         details="24"           細碎程度,數值越高,Flash渲染越細膩(Flash only)
         tessmode="-1"          設置Flash材質排列方式,-1表示自動(球體時爲0;立方體時爲3)(Flash only)&emsp;可選的值：-一、一、二、三、四、5
         movequality="LOW"      移動時呈現質量(Flash only)&emsp;可選的值：LOW、HIGH、BEST、HIGHSHARP
         stillquality="HIGH"   靜止時呈現質量(Flash only)&emsp;可選的值：LOW、HIGH、BEST、HIGHSHARP
         flash10="on"           啓動flash10渲染，該項啓動後上兩項（movequality、stillquality）設置無效
         movequality10="HIGH"  移動時呈現質量(Flash10使能時有效)(Flash only)&emsp;可選的值：LOW、HIGH、BEST、HIGHSHARP
         stillquality10="HIGH"  靜止時呈現質量(Flash10使能時有效)(Flash only)&emsp;可選的值：LOW、HIGH、BEST、HIGHSHARP
         sharpen="12"           圖像銳化程度,僅當影像品質爲HIGHSHARP時有效,值域0-14(Flash only)
         stilltime="0.25"       從 「移動改變到靜止」以前的等待時間(Flash only)
         showpolys="false"      顯示3D幾何形狀線條(Flash only)
         />
複製代碼

樣例：

<display flash10="off" details="28" />
<display flash10="off" stillquality="HIGHSHARP" />
<display html5rendermode="1" devices="iPad+Retina" />
<display hardwarelimit="512" devices="Android" />
<display usedesktopimages="true" hardwarelimit="1800" devices="iPad+Retina+iOS6" />

複製代碼

control

control 設置鼠標、鍵盤及觸摸設備對全景瀏覽的控制方式

<control usercontrol="all"   用戶控制方式（all,mouse,keyb,off）
         mouse="drag"				控制方式（drag，moveto，drag3d（僅限flash））
         touch="drag"				控制方式（drag，moveto，drag3d（僅限flash））
         dragrelative="true"	參數設置
         draginertia="0.1"			慣性
         dragfriction="0.9"			摩擦力
         drag_oldmode="false"		舊模式（html5）
         movetorelative="true"    參數設置
         movetoaccelerate="1.0"		加速度
         movetospeed="10.0"			最大速度
         movetofriction="0.8"			摩擦力
         movetoyfriction="1.0"		垂直摩擦力
         keybaccelerate="0.5"		加速度
         keybspeed="10.0"				速度
         keybfriction="0.9"					摩擦力
         keybinvert="false"					反轉
         keybfovchange="0.75"		按鈕改變視角
         mousefovchange="1.0"		鼠標滾輪改變視角
         fovspeed="3.0"		改變視角速度
         fovfriction="0.9"	改變摩擦力
         zoomtocursor="false" 放大
         zoomoutcursor="true"	縮小
         touchzoom="true"	手勢縮放
         keycodesleft="37"	 左鍵
         keycodesright="39" 右鍵
         keycodesup="38" 上鍵
         keycodesdown="40"  下鍵
         keycodesin="" 放大鍵
         keycodesout="" 縮小鍵
         keydownrepeat="true"  連續按鍵
         bouncinglimits="false" 反彈（僅限html5）
         />
複製代碼

<control mouse="drag"
         touch="drag"
         dragrelative="true"
         draginertia="0.1"
         dragfriction="0.9"
         movetorelative="true"
         movetoaccelerate="1.0"
         movetospeed="10.0"
         movetofriction="0.8"
         keybaccelerate="0.5"
         keybspeed="10.0"
         keybfriction="0.9"
         keybfovchange="0.75"
         mousefovchange="1.0"
         fovspeed="3.0"
         fovfriction="0.9"
         zoomtocursor="false"
         zoomoutcursor="true"
         touchzoom="true"
         bouncinglimits="false"
         />
複製代碼

• mouse、touch
• drag - drag the pano image.
• moveto - move the pano image.
• drag3d - free-axis 3d dragging (Flash only)

鼠標鍵盤的控制設置

樣例：

<control mousetype="drag2D" />
<cursors url="drag-cursors.png"
         type="drag"
         move="2|0|30|32"
         drag="37|0|30|32"
         />
<control mousetype="moveto" />
<cursors url="arrow-cursors.png"
         type="4way"
         move="112|0|28|28"
         drag="112|0|28|28"
         arrow_r="0|0|28|28"
         arrow_d="28|0|28|28"
         arrow_l="56|0|28|28"
         arrow_u="84|0|28|28"
         />
複製代碼

cursors

cursors 鼠標光標樣式 html5可使用 standard, dragging and moving 調用系統樣式，flash模式能夠自定義圖片

<cursors  standard="default"  標準
         dragging="move"  拖動
         moving="move"  移動
		url=""            光標圖片地址
         type="8way"       光標方向模式，是4個方向移動更換圖片，仍是8個方向移動都更換圖片（drag，4way，8way）
         move=""           設定光標移動時顯示圖片
         drag=""           設定鼠標按下時顯示圖片
         arrow_l=""        如下是8個方向移動時對應顯示的鼠標圖片
         arrow_r=""
         arrow_u=""
         arrow_d=""
         arrow_lu=""
         arrow_ru=""
         arrow_ld=""
         arrow_rd=""
         />
複製代碼

自定義光標的樣式 樣例：

<control mousetype="drag2D" />
<cursors url="drag-cursors.png"
         type="drag"
         move="2|0|30|32"
         drag="37|0|30|32"
         />
<control mousetype="moveto" />
<cursors url="arrow-cursors.png"
         type="4way"
         move="112|0|28|28"
         drag="112|0|28|28"
         arrow_r="0|0|28|28"
         arrow_d="28|0|28|28"
         arrow_l="56|0|28|28"
         arrow_u="84|0|28|28"
         />
複製代碼

autorotate

autorotate 自動旋轉

<autorotate enabled="false"     是否開啓自動旋轉
            waittime="1.5"      用戶不對屏幕操做後，開始自動旋轉的等待時間
            accel="1.0"         旋轉加速度：角度/秒
            speed="10.0"        自動旋轉速度：角度/秒
            horizon="0.0"      例如-45表示向上45度仰視;45表示向下45度俯視
            tofov="off"         縮放到特定的視區
            zoomslowdown="true"   相對於當前的縮放/視場速度，減慢自動旋轉速度，以得到相同的視覺速度在全部的縮放距離。
            interruptionevents="userviewchange|layers|keyboard"  定義哪些事件將中斷自動旋轉(以及onidle事件)，能夠組合
            />
複製代碼

相關屬性

autorotate.isrotating  是否旋轉狀態（只讀）
autorotate.ispaused	是否中止狀態（只讀）
複製代碼

相關設置方法，事件

autorotate.start()  直接開始自動旋轉(無需等待 autorotate.waittime)
autorotate.stop()	中止當前自動旋轉而且禁用它
autorotate.interrupt() 中斷自動旋轉，但自動旋轉功能自身仍然可用，會再過 autoratate.waittime 後自再次開始
autorotate.pause()	暫停自動旋轉。例如當鼠標劃過某個熱點時就有必要讓旋轉暫停下來
autorotate.resume() 重啓剛纔暫停的旋轉
複製代碼

onautorotatestart, 
onautorotatestop, 
onautorotateoneround
onautorotatechange
複製代碼

當無用戶交互時．自動旋轉、扭曲／移動，縮放

開始旋轉：set(autorotate.enabled,true);
中止旋轉：set(autorotate.enabled,false);
交替旋轉：switch(autorotate.enabled);
複製代碼

樣例：

<autorotate enabled="true" />
<autorotate enabled="true"
            waittime="5.0"
            speed="-3.0"
            horizon="0.0"
            tofov="120.0"
            />
複製代碼

plugin/layer

plugin/layer功能相同， 能夠調用插件，也可插入圖片或容器，相似div ，習慣系統插件用plugin，插入圖片視頻或容器用layer

注：parent及keep屬性會自動繼承父元素的對應屬性

<plugin name="..."        定義引入的元素名稱
       type="image"       引入元素的類型，能夠爲image、container、text（textfield），container爲容器，可在容器內繼續引入多個媒體元素
       url="..."          引入元素的路徑（支持格式：SWF, JPG, PNG, GIF.）
       html=""				顯示文字時的內容
       keep="false"       是否在跳入新場景時仍然保留顯示該元素
       parent=""          設置父容器名稱，能夠直接是 plugin的name,也能夠是全稱：parent="layer[name]"或parent="hotspot[name]"
       alturl=""          #引入元素的路徑（支持格式：SWF, JPG, PNG, GIF.），只在html5瀏覽器使用
       devices="all"      設置顯示的設備類型（詳見設備列表）
       visible="true"     設置插入元素是否可見
       enabled="true"     設置插入元素是否接受鼠標事件
       handcursor="true"  鼠標移動該元素上時，是否變爲小手
       maskchildren="false"  設置是否將子控件變爲蒙板，設置爲TRUE後，除子控件範圍顯示外，子控件邊框與父控件邊框之間區域將不顯示
       scalechildren="false" 設置是否子空間跟隨父控件一同縮放
       zorder=""              插入元素的次序索引，能夠是字符也能夠是數字，html5輸出必須是0-100整數
       capture="true"		只是該元素接受事件，false時子元素也可接受事件
       children="true"    啓用當前元素的子元素來接收鼠標事件。
       preload="false"	預加載，在加載pano以前先加載圖層/插件的url，而後執行任何操做。
       blendmode="normal" 混合/混合模式（ normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert）僅flash
       style=""               調用已在文件中定義好的style的名稱
       align=""               元素在屏幕對齊方式，lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom （見示意圖）
       edge=""                元素的邊緣或描點層對齊方式，lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom （見示意圖）
       x=""                   對齊邊界到對齊點的X橫向距離
       y=""                   對齊邊界到對齊點的y橫向距離
       ox=""				偏移
       oy=""				偏移
       rotate="0.0"           插入元素顯示時旋轉度數
       width=""               插入元素的顯示寬度(prop:自適應)
       height=""              插入元素的顯示高度
       minwidth="0"
		maxwidth="0"
		minheight="0"
		maxheight="0"
        autowidth="false"  根據內容自適應寬度
        autoheight="false" 根據內容自適應高度
       scale="1.0"            插入元素的縮放比例
       pixelhittest="false"   僅flash
       smoothing="true"   平滑  僅flash
       accuracy="0"         精度
       alpha="1.0"            插入元素的不透明度
       autoalpha="false"   自動透明度
       usecontentsize="false"  滿畫布  僅flash
       scale9grid=""    定義9格網格（scale9grid="x-position|y-position|width|height|prescale*"）
       crop=""                定義元素座標及寬高  crop="x-position|y-position|width|height"
       onovercrop=""          設置元素鼠標移到上方後的座標及寬高
       ondowncrop=""          設置元素鼠標按下狀態後的座標及寬高
       mask=""    遮罩  僅flash
       effect=""    位圖效果適用於層/插件的形象     僅flash
       background=""  能夠設置false 去掉背景
       bgcolor="0x000000"      type="container"狀態下的背景顏色，非container狀態下無效
       bgalpha="0.0"           背景不透明度
       bgborder="0"       （bgborder="widths color alpha"）邊框
       bgroundedge="0"   圓角
       bgshadow=""     （基本：bgshadow="xoffset yoffset blur color alpha"；高級：gshadow="xoffset yoffset blur spread color alpha inset, ..."）陰影
       bgcapture="false"       是否捕抓在背景容器上事件（type="container"狀態下生效）
       onover=""               鼠標在通過上方時執行動做
       onhover=""              鼠標停在上方時執行動做
       onout=""                鼠標停移出範圍時時執行動做
       onclick=""              鼠標停點擊時執行動做
       ondown=""               鼠標按下時執行動做
       onup=""                 鼠標按鍵鬆開時執行動做
       onloaded=""             加載元素完成後執行動做
	background="false" 
	backgroundcolor="0xFFFFFF" 
	backgroundalpha="1.0"
    border="false" 
    bordercolor="0x000000" 
    borderalpha="1.0" 
    borderwidth="1.0" 
           roundedge="0"
           shadow="0.0" 
           shadowrange="4.0" 
           shadowangle="45" 
           shadowcolor="0x000000" 
           shadowalpha="1.0"
           textshadow="get:skin_settings.design_text_shadow" 
           textshadowrange="6.0" 
           textshadowangle="90" 
           textshadowcolor="0x000000" 
           textshadowalpha="1.0"/>
複製代碼

相關方法

layer.layer
layer.count   layer數量（只讀）
layer[name].index 索引（只讀）
layer[name].imagewidth  圖片寬（只讀）
layer[name].imageheight（只讀）
layer[name].pixelwidth  寬（只讀）
layer[name].pixelheight 高（只讀）
layer[name].pixelx x座標（只讀）
layer[name].pixely y座標（只讀）
layer[name].loading=「false」（只讀）  是否正在加載
layer[name].loaded=「false（只讀） 是否加載完成
layer[name].loadedurl（只讀） 加載的url
layer[name].hovering=「false（只讀） 是否hover
layer[name].pressed=「false（只讀）  是否按下
layer[name].loader  加載器
layer[name].sprite 
layer[name].loadstyle(stylename)  加載屬性集
layer[name].registercontentsize(width、height)  設置寬高
layer[name].resetsize()  尺寸改變回調
layer[name].updatepos() 更新回調
layer[name].changeorigin(align,edge) 更新對齊、邊緣
layer[name].getfullpath() 返回完整路徑 (僅plugininterface) 
複製代碼

載入其餘flash程序，圖片或者按鈕，圖標 樣例：

<layer name="logo"
       url="logoimage.png"
       align="rightbottom" x="20" y="20"
       onclick="openurl('http://...');"
       />
       <layer name="imagebar" type="container" width="100%" height="200" align="leftbottom" bgcolor="0x000000" bgalpha="0.5">
  <layer name="item1" url="image1.jpg" align="left" x="10" />
  <layer name="item2" url="image2.jpg" align="left" x="110" />
  <layer name="item3" url="image3.jpg" align="left" x="210" />
</layer>
複製代碼

插入html標籤 <layer name="fullscreen_btn_text" style="btn_text" html="[h1 class='demo'] 全屏 [/h1]" onclick="togglefullscreen()"/>

hotspot

熱點，可在 3D 空間中插入圖片，使之隨着 3D 空間一同運動，可製做不少特效。

• 通常熱點：

<hotspot name="..."              定義熱點名稱
         type="image"            定義熱點類型，image，text（textfield.）
         url="..."               熱點圖像路徑，支持SWF, JPG, PNG, GIF
         alturl="..."            #html5狀態下顯示的圖像路徑
         keep="false"            是否在下一場景跳轉後保持顯示
         renderer="webgl"   渲染方式  webgl、css3d
         devices="all"           支持設備類型
         visible="true"          是否可見
         enabled="true"          設置熱點是否接收鼠標事件
         handcursor="true"       設置是否鼠標移到上面顯示小手
         maskchildren="false"    設置是否將子控件變成蒙板
         zorder=""               插入元素的次序索引，能夠是字符也能夠是數字，html5輸出必須是0-100整數
         zorder2="0.0"           （僅html5）設置爲0.0和1.0，分別對應當前熱點在扭曲控件之下和之上
         capture="true"          與enabled配合使用，都爲true只對熱點傳遞動做，capture="false"可對子控件傳遞動做
         children="true"         設置子控件是否接收熱點鼠標事件
         blendmode="normal"      設置混合模式，可選：normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert.
         mipmapping="false"   熱點圖像應該mip-mapped期間呈現縮小時(例如避免混淆) 僅html5
         premultiplyalpha="false"   透明通道   僅html5
         style=""                讀入已設置好的style名稱
         ath="0.0" atv="0.0"     球座標
         edge="center"           熱點的邊界對齊點
         ox="0"                  邊界到對齊點的偏移量
         oy="0"
         zoom="false"            設置是否場景縮放時，熱點跟隨縮放
         distorted="false"    設置熱點是否跟隨場景進行3D扭曲    
         rx="0.0" ry="0.0" rz="0.0"  三維旋轉度，distorted="true"可用 
         depth="1000"         深度  僅html5
         tx="0.0" ty="0.0" tz="0.0"  三維偏移量
         details="8"              熱點顯示的細節數量，默認爲8 僅flash
         inverserotation="false"  設置是否逆向旋轉3D扭曲
         flying="0.0"             自動設置ath/atv/scale的值，0.0-1.0，1.0熱點將被鎖定在屏幕中間，高度1000
         scaleflying="true"   當熱點從pano-space-size到screen-space-size是否縮放
         width="" height=""       設置熱點寬高
         scale="1.0"              設置熱點縮放
         rotate="0.0"             設置熱點旋轉角度
         pixelhittest="false"     是否啓動精確像素測試   僅flash
         smoothing="true"         #設置縮放時，是否平滑化處理
         accuracy="1"             設置像素渲染值（flash下）
         accuracy2="1"            設置精度控制（html5下）
         alpha="1.0"              設置透明度
         autoalpha="false"        設置是否自動變動透明度
         usecontentsize="false"   是否使用用戶指定flash大小，默認false原始大小
         scale9grid=""            定義是否支持矢量縮放，scale9grid="x-position|y-position|width|height|prescale*"         
         stereo=""       				SBS，TB  僅html5和WebGL
         crop=""                  定義元素座標及寬高  crop="x-position|y-position|width|height"
         onovercrop=""          設置元素鼠標移到上方後的座標及寬高
         ondowncrop=""          設置元素鼠標按下狀態後的座標及寬高
         scalechildren="false"   子元素是否跟隨縮放
         mask=""                 #mask="name" mask="layer[name]" mask="hotspot[name]"
         effect=""                #熱點位圖效果3種：glow(color,alpha,range,strength);
                                  dropshadow(depth,angle,color,range,strength);
                                  blur(radius);

         onover=""               鼠標在通過上方時執行動做
         onhover=""              鼠標停在上方時執行動做
         onout=""                鼠標停移出範圍時時執行動做
         onclick=""              鼠標停點擊時執行動做
         ondown=""               鼠標按下時執行動做
         onup=""                 鼠標按鍵鬆開時執行動做
         onloaded=""             加載元素完成後執行動做
         />
複製代碼

• 多邊形熱點

<hotspot name="..."
         keep="false"
         visible="true"
         enabled="true"
         handcursor="true"
         zorder=""
         capture="true"
         blendmode="normal"
         style=""
         alpha="1.0"
         autoalpha="false"
         fillcolor="0xFFFFFF" fillcolorhover="0xFFFFFF"   填充顏色及鼠標移上後顏色
         fillalpha="0.0" fillalphahover="0.1"             填充顏色透明度及鼠標移上後顏色透明度
         borderwidth="0.0" borderwidthhover="4.0"         邊界寬度及鼠標移上後邊界寬度
         bordercolor="0xFFFFFF" bordercolorhover="0xFFFFFF"  邊界顏色及邊界鼠標移上後顏色
         borderalpha="0.0" borderalphahover="0.8"           邊界透明度及鼠標移上後邊界透明度
         fadeintime="0.15" fadeincurve="1.1"               懸停狀態變化時間及形式
         fadeouttime="0.3" fadeoutcurve="0.7"
         polyline="false"
         onover=""
         onhover=""
         onloaded=""
         onout=""
         onclick=""
         ondown=""
         onup="">
    <point ath="..." atv="..." />            <!-- 多邊形熱點座標 -->
    <point ath="..." atv="..." />
    <point ath="..." atv="..." />
    ...
</hotspot>
複製代碼

• 可用方法

hotspot.count    熱點個數（只讀）
hotspot.layer     (as3 usage only)
hotspot[name].index  索引（只讀）
hotspot[name].point.count   多邊形點數   （只讀）
hotspot[name].point[..].ath
hotspot[name].point[..].atv
hotspot[name].loading（只讀）  是否正在加載
hotspot[name].loaded（只讀） 是否加載完成
hotspot[name].loadedurl（只讀） 加載的url
hotspot[name].hovering（只讀） 是否hover
hotspot[name].imagewidth   （只讀） 圖片寬
hotspot[name]..imageheight   （只讀）圖片高
hotspot[name].pressed（只讀）  是否按下
hotspot[name].loader  加載器
hotspot[name].sprite  雪碧圖
hotspot[name].loadstyle(stylename)  加載屬性集
hotspot[name].resetsize()  尺寸改變回調
hotspot[name].getfullpath() 返回完整路徑 (僅plugininterface) 
hotspot[name].getcenter(ath,atv) 獲取中心位置 
複製代碼

events

events 可調用各種型的事件，如載入過程當中不一樣階段觸發的不一樣行爲,設置事件的響應。

全局krpano事件:

一個不具備name屬性的<events>元素定義的事件都是全局事件。一般只有一個全局事件。當有另外一個<events>標籤訂義相同的事件時，以前定義的同一事件就會被覆寫。

注意–當載入另外一個xml文件或其餘場景時，全部全局事件將保留，它們不會發生改變，除非在新的xml文件或場景中被再次定義。

<events 	name=""
			keep="false"
		onenterfullscreen=""          進入全屏時執行
        onexitfullscreen=""           退出全屏時執行
        onxmlcomplete=""              XML文件加載完成時執行
        onpreviewcomplete=""          預覽圖加載完成時執行
        onloadcomplete=""             全景切片加載完畢時執行
        onnewpano=""                  啓動新的全景場景時執行
        onremovepano=""               場景被移除時執行（加載新場景前）
        onnewscene=""                 新場景加載完成時執行
        onloaderror=""                加載錯誤時執行，執行被設置後，屏幕將不顯示默認的錯誤信息
        onkeydown=""                  鍵盤按下時執行
        onkeyup=""                    鍵盤擡起時執行
        onclick=""                    鼠標點擊時執行
        onsingleclick=""			單擊
        ondoubleclick=""             雙擊
        onmousedown=""                當鼠標按下時執行
        onmouseup=""                  當鼠標鬆開時執行
        onmousewheel=""               當鼠標滾輪滾動時執行
        oncontextmenu=""  				右鍵菜單
        onidle=""                     無交互空閒時執行
        onviewchange=""               場景視圖改變時執行（渲染開始時）
        onviewchanged=""              場景視圖改變後執行（渲染完成時）
        onresize=""                   全景尺寸改變時執行
        onautorotatestart=""	自動旋轉開始時執行
        onautorotatestop=""	自動旋轉中止時執行
        onautorotateoneround="" 自動旋轉一圈時執行
        onautorotatechange=""  自動旋轉狀態改變時執行
        />
複製代碼

獨立局部krpano事件:

一個具備name屬性的<events>元素定義的事件都是獨立事件。它能夠包含全部類型的事件，但它們不會覆寫全局事件，它們是另外進行調用的。這些被「命名」的<events>元素一樣具備keep屬性（默認值爲false）。這意味着沒有keep=」true」的<events>元素在新全景載入時將會被自動移除。

提示–命名的事件可以在不影響其餘插件或xml代碼的基礎下在獨立的插件和代碼中發生做用。

<events name="..." keep="false"
        ... any events ...
        />
複製代碼

action

action自定義動態代碼，相似js中的function 須要時才載入

<action name="..."   
autorun=""    在開始自動運行
scope="global" ( global,local,parent ) 做用域類型 
args=""		參數列表
secure="false"   安全將被設置爲true時,行動將由Javascript調用接口, 即便是禁用Javascript接口。 
protect="false"   保護   爲true變量將沒法訪問
type="">   secure爲是否支持JS接口調用
    action1();         動做函數名稱();
    action2();
    ...
</action>
複製代碼

參數傳遞的兩種方式：

1. %佔位符（全部版本可用） 參數可使用「%數字」 佔位符來表示，範圍爲 %0-%99， %0表示action自己的名字，%1爲第一個參數，%2爲第二個，以此類推，在代碼被解析和執行的時候佔位符會被傳入的值替代，若是沒有傳入參數，將會使用「0」替代（%0除外，它始終是表示action自己的名字），使用%符號用%%替代。
2. args變量映射（1.19-pr13+可用）。
3. 能夠用caller佔位符來代替調用者，如caller.linkedscene等價linkedscene

<action name="test" scope="local" args="var1, var2, var3">
  showlog();
  trace('var1=',get(var1));
  trace('var2=',get(var2));
  trace('var3=',get(var3));
</action>
複製代碼

使用未傳遞的參數，將使用‘0’代替，每一個參數將映射到action內部的一個新變量，在使用包含引號或逗號字符的值時，使用變量映射方式很是有用。在這種狀況下，%佔位符方式可能有問題。

使用javascript

經過JavaScript操做，能夠直接爲動做代碼使用JavaScript代碼。對於更復雜的事物，這可能更快，但僅可在html5中使用

<!-- 使用js，僅限html5 -->
<action name="..." type="Javascript"><![CDATA[
    ...
    Javascript code
    ...
]]></action>
複製代碼

定義行爲．須要用腳本語言解釋器解釋

可用方法

ction[name].content   獲取內容
action.count    獲取數量 只讀
複製代碼

樣例：

<krpano onstart="intro();">
  ...
  <action name="intro">
    lookat(0,0,90);
    wait(LOAD);
    lookto(120,10,110);
    lookto(-50,40,110);
    lookto(0,0,90);
  </action>
  ...
</krpano>
複製代碼

<action name="overaction">
  tween(scale, 2.0);
  tween(alpha, 1.0);
</action>
<plugin name="pic1" ...
        onover="overaction();"
        onout="outaction();"
        />
複製代碼

contextmenu

contextmenu 自定義右鍵菜單

<contextmenu fullscreen="false"           是否顯示[全屏]菜單項
             native="false"               是否使用本地菜單方式，爲False時將啓用HTML5兼容菜單模式。(Flash only)
             versioninfo="true"           是否顯示krPano Viewer及Flash Player版本信息
             touch="true"            在觸摸設備上是否可用
             customstyle=""         自定義菜單風格（僅html5）customstyle="font|fontsize|lineheight|backgroundcolor|textcolor|disabled-textcolor|borderwidth|bordercolor|borderradius|shadow-x-offset|shadow-y-offset|shadow-blur-range|shadow-color|innerborder|innerbordercolor|padding-top|padding-bottom|seperator-margin|seperator-color|seperator-second-line-color|item-padding|item-borderwidth|item-bordercolor|item-borderradius|item-margin|item-hover-backgroundcolor|item-hover-bordercolor|item-hover-textcolor|item-text-left-margin|item-text-right-margin"
             enterfs="Fullscreen"         進入全屏菜單文字
             exitfs="Exit Fullscreen"     退出全屏菜單文字
             >
    <item name="..."                自定義項目名稱
          caption="..."             顯示的標題
          enabled="true"        是否點擊生效
          visible="true"            是否可見
          separator="false"         是否顯示分隔條
          showif=""         showif="view.vlookatrange GE 180" 本item只在該條件爲真顯示
          onclick="..."             點擊後執行
          />
    <item name="..."
          caption="..."
          onclick="..."
          />
    ...
</contextmenu>
複製代碼

相關方法： contextmenu.item.count

network

network 圖像下載、緩存與解碼

<network  retrycount="2"               當服務器或網絡故障時，在提示出錯信息前的重試次數
         />
複製代碼

memory

memory 內存分配，單位兆

<memory maxmem="..."    最大內存分配
		devices="..." 		設備
/>
複製代碼

maxmem默認設置：

Flash: 350 MB
HTML5
Desktop: 150-400 MB (depending on the full screen size)
Tablet / Mobile: 50 MB (Android, Windows, Silk, Blackberry, ...)
iOS (before 7.1): 40 MB
iOS (7.1 and above): 50 MB
iPhone 4/4S: 40 MB
複製代碼

設置內存使用狀況

樣例：

<memory maxmem="350" devices="Desktop+Flash" />
<memory maxmem="150" devices="Desktop+HTML5" />
<memory maxmem="50"  devices="Mobile|Tablet" />
<memory maxmem="40"  devices="iOS" />
<memory maxmem="50"  devices="iOS7.1" />
複製代碼

security

security flashplayer和html5相關的安全/跨域設置

<security cors="">                                             設置是否開啓跨網絡認證，off\anonymous\use-credentials
    <crossdomainxml url="" />       設置加載文件的url    （僅flash）
    <allowdomain domain="" />              容許被訪問的域名設置    只讀
</security>
複製代碼

lensflareset

定義一個鏡頭光暈樣式，用於lensflare 元素調用（僅限flash）

<lensflareset name="." url="%SWFPATH%/krpano_default_flares.jpg">    定義樣式名稱，指定燈光照片
    <flare pixsize="128"          耀斑大小設置
           pixupos="0"            耀斑水平像素位置
           pixvpos="0"            耀斑垂直像素位置
           color="0xFFFFFF"       耀斑顏色
           pos="0.0"              耀斑起始位置
           scale="0.1"            耀斑相對於屏幕的大小比值（0.01-0.10）
           />
    <flare ... />
    <flare ... />
    ...
</lensflareset>
複製代碼

相關方法：

lensflareset[name].index
lensflareset[name].flare.count
lensflareset[name].flare[…].index
複製代碼

lensflare

定義一個鏡頭光暈（僅限flash）

<lensflare name="..."               定義名稱
           set="DEFAULT"            設置默認樣式，仍是已定義的lensflareset樣式
           visible="true"           是否可見
           keep="false"             是否在場景切換時持續顯示
           ath="0.0"                全景中球體座標的水平位置
           atv="0.0"                全景中球體座標的垂直位置
           size="0.8"               耀斑大小設置
           blind="0.6"              耀斑盲點大小
           blindcurve="4.0"         耀斑曲線強度設置
           />
複製代碼

相關方法：

lensflare.count
lensflare[name].index
複製代碼

data

data 能夠放置任何數據，krpano不會解析其內容，整個data元素的內容將被存儲在data[neme]對象中。須要時才載入

<data name="...">
    ...
</data>
複製代碼

避免xml解析CDATA:

<data name="..."><![CDATA[
    ...
]]></data>
複製代碼

• 全部data元素的個數 data.count
• 索引 data[name].index
• 內容data[name].content

CDATA避免xml解析,包裹的內容不會被解析:

<![CDATA[
    ...
]]>
複製代碼

scene

scene 場景，能夠放置任何元素，在任何狀況都不會被解析或使用，除非在被loadscene調用時纔會載入瀏覽器解析，在瀏覽器載入xml文件時，不會加載其內容和屬性，至關於一個封閉的集裝箱，對瀏覽器而言，它只知道其屬性。

使用loadpano()載入外部xml文件時，當前定義過的scene元素將被移除。

能夠在scene元素中存儲任何自定義屬性——viewer自己會忽略這些屬性，但能夠用自定義action使用這些元素。

<scene name="..." onstart="">    onstart 場景開始渲染時加載action
    ...
</scene>
複製代碼

內容

scene[name].content
scene.count
scene[name].index
scene.onstart
複製代碼

樣例：

<scene name="scene_1" onstart="" heading="0.0" lng="103.76300000" title="t1" thumbx="75" lat="31.51229500" thumburl="panos/1.tiles/thumb.jpg" thumby="10">
    <view fovtype="DFOV" maxpixelzoom="2.0" fov="90" vlookat="-80" fisheye="0.35" hlookat="0" fovmin="70" fovmax="140" limitview="range" hlookatmin="-90" hlookatmax="90"/>
    <preview url="panos/1.tiles/preview.jpg" />
    <image multires="true" tilesize="512" type="CUBE" progressive="false">
        <level tiledimageheight="1592" tiledimagewidth="1592">
            <cube url="panos/1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
        </level>
        <level tiledimageheight="796" tiledimagewidth="796">
            <cube url="panos/1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
        </level>
        <mobile>
            <cube url="panos/1.tiles/mobile_%s.jpg" />
        </mobile>
    </image>
    <hotspot atv="-7.482" name="spot1" style="skin_hotspotstyle" ath="32.158" linkedscene="scene_22" />
</scene>
複製代碼

style

style 屬性集合，相似css中的class樣式

<style name="..."
   ... any plugin or hotspot or self defined attributes ...
    插入 plugin 或 hotspot 或 自定義屬性
/>
<style name="skin_glow"
   ondown="copy(skin_lockglow,name); skin_buttonglow(get(name)); if(ondown2, ondown2() );"
   onover="if(skin_lockglow === null, copy(skin_lockglow,name); skin_buttonglow(get(name),0.3) ); "
   onout="if(skin_lockglow === name, ifnot(pressed, skin_buttonglow(null);delete(skin_lockglow); ));"
   onup="if(hovering, skin_buttonglow(get(name),0.3), skin_buttonglow(null);delete(skin_lockglow); ); if(onup2, onup2() );"
/>
複製代碼

獲取style中的某個屬性加global：

trace(global.style[mystyle].bgborder);
複製代碼

include

include元素能夠用來加載和導入其餘xml文件，krpano在解析xml文件前，它會搜索全部include的xml元素，而後加載對應的xml內容，將其插入到當前xml文件並替換include元素。當全部<include>加載解析完成,那麼主要的xml纔開始解析。

<include url="path/name-of-the-other-xml-file.xml" />
<include url="skin/vtourskin.xml" />
<include url="%SWFPATH%/global.xml" />
複製代碼

<action> / <data> / <scene> 都是特殊的元素，在xml解析時將被忽略。這些元素的內容將做爲字符串存儲在變量中。

progress（廢棄）

progress 載入進度（廢棄）,官方再也不將其做爲內置元素寫進文檔

<progress showload="auto"

設置進度條樣式  none or auto or bar(...)，

bar(origin,width,height,offsetx,offsety,style,backcolor,loadcolor,decodecolor,bordercolor,borderwidth,glowcolor,glowwidth)

          showwait="loopings()"       顯示等待中程序模式 none or auto or loopings(...)
          showreloads="false"         是否在新場景從新顯示滾動條
          parent=""                   設置父元素名稱和路徑
          />
複製代碼

textstyle（廢棄）

textstyle 針對showtext的第三個參數的文本樣式（廢棄），新版showtext.xml

<textstyle name="..."                       定義樣式名稱
           font="Times"                     定義文字字體
           fontsize="12.0"                  定義文字大小
           bold="true"                      是否粗體
           italic="false"                   是否斜體
           background="true"                是否加載文字背景
           backgroundcolor="0xFFFFFF"       背景顏色
           border="true"                    是否加載邊框
           bordercolor="0x000000"           邊框顏色
           textcolor="0x000000"             文字顏色
           alpha="1.0"                      文字不透明度
           blendmode="normal"               選擇混合模式： "normal", "add", "difference", "multiply", "screen"
           effect=""                        選擇加載特效
                                            •glow(color,alpha,range,strength);
                                            •dropshadow(depth,angle,color,range,strength);
                                            •blur(radius);

           origin="cursor"                 文本原點位置 cursor(鼠標光標)，lefttop, left, leftbottom,top, center, bottom, righttop, right, rightbottom
           edge="bottom"                   底部陰影效果
           textalign="none"                文本對齊方式 none, left, center, right
           xoffset="0"                     文本原點位置X軸偏移量
           yoffset="-3"                    文本原點位置Y軸偏移量
           showtime="0.1"                  顯示文本的時間
           fadetime="0.0"                  文本淡出顯示時間
           fadeintime="0.0"                文本淡入顯示時間
           noclip="true"                   是否避免文字超出屏幕邊緣
           />
複製代碼

定義文本樣式，只在flash播放狀況下有效

樣例：

<textstyle name="DEFAULT"
           font="Arial" fontsize="12"
           bold="true" italic="true"
           textcolor="0x000000"
           background="false" border="false"
           blendmode="layer"
           effect="glow(0xFFFFFF,0.85,4,4);dropshadow(2,45,0x000000,4,1);"
           origin="cursor" edge="bottom"
           xoffset="15" yoffset="-5"
           showtime="0.1" fadeintime="0.1" fadetime="0.1"
           />
複製代碼

action腳本語法

語法及使用

actionname(parameters); ...

• 語法格式：動做名(參數);
• 動做名能夠爲如下幾種:

1. 內置的krpano動做名…
2. 在xml任何地方定義的action元素名…
3. 包含動做代碼的變量/屬性名。

• 不在引號內（單或雙引號字符）的空白字符（如空格，製表，新行）將被忽略。
• 能夠同時編寫若干條動做，只需在每條動做尾部加上';'字符。
• 動做將被逐條執行。
• 在動做調用之間及參數之間的空白(如空格、tabs以及換行)將被忽略。
• 參數數量取決於被調用的動做實體。
• 參數之間須要使用逗號','來分開。
• 要想在參數中使用空白或逗號，那麼參數就須要用單引號或雙引號進行封閉。
• 全部給定參數都視爲字符。當使用變量名做爲參數時，不會被自動解析爲對應值。一些動做能夠自動處理變量名參數，可是那要依賴與動做體自己。要想使用變量做爲參量來傳遞，必須使用get動做。注 - 一些動做能夠自動解析變量參數的值，但這僅限少數動做的自身特性。

表達式

表達式將被使用在：if語句；條件循環(for,loop)語句；和 calc 動做中。用於判斷邏輯條件是否成立，計算數學表達式或拼接字符串。

• 基本語法：a 操做符 b
• 其中a或b項能夠是變量，值或字符串。
• 操做符能夠是下表羅列之一。
• 運算順序取決於具體的操做符，但在等價操做符內運算順序是從左向右。
• 可使用括號實現一個自定義運算順序 - 例如：（a 操做符 b）操做符（c 操做符 d）

.GT. 大於
.GE. 大於或等於
.LT. 小於
.LE. 小於或等於
.EQ. 等於
.NE. 不等於 .AND. 邏輯與
.OR. 邏輯或
.NOT. 邏輯非
.EQV. 邏輯等
.NEQV. 邏輯不等
運算符優先級由高到低順序爲:()→**→*或/→+或-→.GT.或.GE.或.LT.或.LE.或.EQ.或.NE.→.NOT.→.AND.→.OR.→.EQV.或.NEQV
複製代碼

數組

• 每一個xml帶name的元素是一個數組的 element / item。
• xml元素的名稱是數組的名稱和名稱屬性定義數組元素的名稱/項目。
• 一個數組在krpano老是一個對象數組。
• 這樣的數組項對象能夠包含任何類型的自定義屬性/屬性。
• 數組能夠預先定義或定義在運行時動態地設置一個數組項值,當第一次設置項值,而後自動將建立一個數組。

靜態XML語法: (在定義在xml結構) <array_name name="item_name" value="..." />

動態行爲的語法: (當訪問或設置在運行時) array_name[item_name].value 數組可用方法：

count    統計
sortby(attribute, parameters*)    排序
removearrayitem(name or index)   移除
複製代碼

事件

onclick:鼠標點擊

onover:鼠標通過 

onhover:鼠標停留 

onout:鼠標移開

ondown:鼠標按下

onup:鼠標擡起
複製代碼

count

lensflareset[name].flare.count

index

lensflareset[name].flare[...].index

---

官方文檔：krpano.com/docu/action…

全局變量

版本

version：（只讀）版本信息

xmlversion：（只讀）xml版本

build：（只讀）構建時間

鼠標、鍵盤

mouse.x （只讀）相對於區域，座標原點爲area的左上角

mouse.y （只讀）

mouse.stagex （只讀）相對於屏幕，座標原點爲screen的左上角

mouse.stagey （只讀）

mouse.downx （只讀）相對於區域，存貯最後一次鼠標按下時的位置(右鍵或右鍵)，該值以area的左上角爲原點。

mouse.downy （只讀）

mouse.clickx （只讀）相對於區域

mouse.clicky（只讀）

keycode： 0 （只讀） 鍵碼

wheeldelta： 0（只讀）滾輪的標準滾動值，在大多數系統上一般爲 +3(前滾) 或 -3(後滾)

wheeldelta_raw： Number.NaN （只讀）未縮放未取整前的原始滾動值，注意：在flash模式下，僅當在窗口模式(非全屏)且使用默認embedding腳本時纔有效；而在html5下，始終有效。

wheeldelta_touchscale： 0.0 （只讀）雖然觸摸設備沒有鼠標滾輪，可是當雙指縮放時，仍然可能觸發onmousewheel事件，該變量將提供相對的比例縮放詳細信息。

注意： 僅適用於觸摸設備！在其餘裝置上的值將永遠是0。

屏幕信息/設置

fullscreen: false 該變量能夠用來檢查或更改全屏模式的當前狀態。若變量被改變，說明全屏模式被改變。

例子

切換全屏狀態
onclick="set(fullscreen,true);"
onclick="toggle(fullscreen);"
複製代碼

注意：

• 在使用該設置前，應該檢查當前設備/瀏覽器是否支持全屏模式，這能夠在靜態xml中使用devices="fullscreensupport"或動態語句中使用device.fullscreensupport變量來完成。
• 因爲Flash Player和HTML5安全限制，切換到全屏模式須要用戶操做動做(如點擊鼠標或按下鍵盤)，這意味着切換全屏模式須要在onclick或onKeyDown事件中進行。
• 當HTML5瀏覽器不支持全屏模式時(如iOS)，全屏設置將僅改變viewer的大小以匹配整個瀏覽器窗口的大小。因爲技術限制，沒法在IFRAME中及嵌套HTML中工做。
• 若嘗試從IFRAME內部使用全屏模式，那麼有必要在IFRAME的聲明中加入allowFullScreen，以告訴瀏覽器該IFRAME是充許切換到全屏的。

例子 <iframe ... allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

stagewidth/stageheight：（只讀）當前視圖窗口的寬/高 單位像素

stagescale： 1.0 總體縮放比例設置 （html5） 該設置將縮放全部krpano的元素大小。

經過縮放全部元素，舞臺尺寸(屏幕尺寸/分辨率)自己將反比例增長，好比stagescale=0.5時，舞臺尺寸將爲200%。 該默認值取決於具體的設備、瀏覽器、js的window.devicePixelRatio值，在桌面和平板上該默認值一般爲1.0；在移動設備上一般爲0.5。

這意味着，在移動設備上的元素大小一般爲桌面和平板的一半。 要禁用該行爲(例如要實現一些自定義的響應式佈局)能夠將下面代碼放到第一個xml中。

<action name="mobilescale" autorun="preinit" devices="mobile">
mul(stagescale,2);
</action>
複製代碼

例子

<action name="mobilescale" autorun="preinit" devices="mobile">
   mul(stagescale,2);
</action>
複製代碼

bgcolor： 視圖的背景顏色。在全景圖像裝載前的顯示顏色；以及局部全景未覆蓋區域的顯示顏色。 當設置爲有效的十六進制色值時（例如："0xFFFFFF"表達白色），那麼一個使用該顏色的形狀將做爲背景在全景圖後面呈現。 未設置或設置無效時，則表現爲透明，而且將顯示FlashPlayer的默認背景色(在html文件中修改)，當embedding設置中wmode="transparent"時將顯示Html頁面

僅限Flash：當設置時，它容許在全景圖像「外部」使用鼠標進行導航（例如使用局部全景圖時），而且它容許不一樣尺寸局部全景之間的正確混合。

設備信息

browser.useragent 用戶代理字符串，user-agent 字符串。等同於js的 navigator.userAgent（只讀）

browser.platform 瀏覽平臺，在HTML5中爲platform字符串，等同於js的navigator.platform；在Flash中一直爲「Flash」（只讀）

browser.location 當前頁面的完整url（只讀）

browser.domain 域名（只讀）

browser.protocol 協議（只讀）

• 注：僅當使用默認的 embedding.js 時，以上變量纔有效。

例子

if(device.html5, ...);
if(device.flash, ...);
if(device.android, if(device.flash, ...); );
if(device.iOSversion GT 5.1, ...);
複製代碼

時間、隨機值

timertick （只讀）查看器啓動到當前時刻經歷的毫秒數

random 0.0-1.0 （只讀）返回一個0到1範圍內的隨機值

idletime 0.5 設置當無人操做時，通過多少秒會觸發 Onidle 事件

//示例-生成一個1到10之間的隨機數
mul(val, random, 9);
add(val, 1);
roundval(val);
trace('random value=',val);
複製代碼

math常量

Math.PI 數學常數π（圓周率）的值(3.141592)

鍵盤/按鈕移動

這些變量能夠用來設置移動視圖。

它們的主要用途是鍵盤或按鈕動做控制。

hlookat_moveforce 0.0 小於0時向左旋轉；大於0時向右旋轉

vlookat_moveforce 0.0 小於0時向上旋轉；大於0時向下旋轉

fov_moveforce 0.0 小於0時放大；大於0時縮小

當用鍵盤控制全景時，這些變量會返回不一樣的數值(0、1或-1)。能夠在自已的程序代碼中讀取或設置它們，用來判斷鍵盤操做狀態或實現自動旋轉的效果。

旋轉加速度、速度及剎車速度分別取決於control.keybaccelerate、control.keybspeed、control.keybfriction

//示例-自動向左旋轉3秒後中止
set(hlookat_moveforce,-1);
delayedcall(3,set(hlookat_moveforce,0));
複製代碼

多重分辨率信息

multireslevel 當前的層級數(範圍:0到image.level.count-1) （只讀）

lockmultireslevel： 1 限定在某個層級，當爲-1時取消限定。

downloadlockedlevel： false 爲true時表示當前限定的層將被所有下載

加載信息

progress.progress： 0.0 當前加載進度值(0.0~1.0)，它能夠用來製做自定義加載動畫，使用 onxmlcomplete 事件來啓動加載動畫，在 onloadcomplete 事件中中止它，加載過程當中經過該變量的值來影響進度顯示內容。

XML / 場景（只讀）

xml.url (只讀)當前加載的xml文件路徑

xml.content (只讀)當前xml文件的所有文本內容。當使用loadscene()方法加載一個場景後，該變量中的內容將僅爲元素

xml.scene (只讀)當使用loadscene()方法加載一個場景後，該變量存貯着當前場景的名稱

xml.view (只讀)保存當前xml或scene中 元素的一個備份。例如能夠經過 xml.view.hlookat 來獲取原始的 view.hlookat

• 注意-這裏僅存貯明肯定義的值，不含默認值，這意味着，在使用它取值以前要選檢查一下該是否存在。

network.viewerpath krpano渲染器路徑

network.htmlpath html路徑

network.firstxmlpath 首次加載xml路徑

network.currentxmlpath 當前xml路徑

//例如
if(xml.view.fov !== null, ...);
複製代碼

調試/錯誤處理

debugmode false 爲true時顯示調試跟蹤 trace() 信息

showerrors true 當有錯誤發生時自動顯示錯誤信息窗口

lasterror （只讀） 用於在 onloaderror 事件中獲取最近一次的出錯信息。

haveexternalinterface true（只讀）用來檢測擴展接口功能是否有效。尤爲是在使用 openurl()這個功能時，有必要使用該變量判斷一下環境是否支持擴展接口。 瀏覽在網絡服務器上的全景時該變量始終爲true(擴展接口始終有效)，可是在本地的Flash模式下，只有在瀏覽器打開本地受信任文件夾中的Flash SWF文件，擴展接口才會有效。關於受信任文件夾管理，能夠在Flasyplayer安全選項中進行。

havenetworkaccess true （只讀）該變量用來檢查網絡訪問是否有效。這能夠用來避免錯誤的發生，如在使用谷歌地圖或必應地圖時，如若沒有網絡，就會發生未知錯誤。 瀏覽在網絡服務器上的全景時該變量始終爲true(網絡訪問始終有效)，可是在本地的Flash模式下，只有在瀏覽器打開本地受信任文件夾中的Flash SWF文件，網絡訪問纔會有效。 關於受信任文件夾管理，能夠在Flasyplayer安全選項中進行。

Layers (僅flash)

image.layer 僅as3用法)pano image layer 的 Actionscript 3 Sprite 對象

layer.enabled / plugin.enabled true 啓用全部圖層或插件

layer.visible / plugin.visible true 讓全部圖層或插件可見或不可見(也支持HTML5)

layer.alpha / plugin.alpha 1.0 設置全部圖層或插件的透明度

layer.layer / plugin.layer (僅as3用法)layer / plugin 的 Actionscript 3 Sprite 對象

hotspot.enabled true 啓用全部熱點

hotspot.visible true 讓全部熱點可見或不可見

hotspot.alpha 1.0 設置全部熱點的透明度

hotspot.layer (僅as3用法)hotspot 的 Actionscript 3 Sprite 對象

變量、語句

定義一個變量或對象： def(variable, type, value*)

• type 指定變量的類型 變量類型包括： boolean - true 或者 false number - 數字類型(含整數和小數) integer - 整數類型 string - 字符類型 object -包含屬性的對象類型
• value(可選參數) 該變量的初始值 當未附初始值而且變量已存在時，那麼該變量的當前值將被轉換成給定的類型 當未附初始值而且變量不存在時，那麼默認的初始值自動爲如下內容： boolean=false number=NaN(表示 Not a Number) integer=0 string=null 對象類型不能指定初始值

def(b, boolean, true);
def(n, number, 123.456);
def(s, string, 'text');
def(obj, object);
def(obj.x, number, 0.0);
def(obj.y, number, 0.0);
複製代碼

賦值語句： set({variable},{value}) 注意- 當這裏爲某個變量名稱時，不會從該名稱所表示變量自動取值，應該使用get(variable)來取變量值

set(plugin[{name}].{attribute},{value});
set (layer[skin_map].visible, true);
複製代碼

獲取變量： get({variable}) 、 array[ get(variable) ] 、 <xmlelement attribute="get:variable" ... /> 獲取給定變量的實際值 注意- 個別內置動做會自動獲取參數中變量名對應的實際值，這時就無需使用 get() 語句。好比 add() sub() mul()等

set(dstvar, get(srcvar));
looktohotspot(get(name));
lookto(get(h), get(v), get(f));
showtext(get(msg));
tween(var,get(dstval));
set(pic, spot1);
set(hotspot[get(pic)].visible, false);
trace('xyz=', xyz, ' get(xyz)=', get(xyz));
txtadd(msg, 'fov=', get(view.fov));
複製代碼

計算語句：

calc(variable, expression)
action( calc(expression), ... )
array[ calc(expression) ]  
<xmlelement attribute="calc:expression" ... />
複製代碼

expression：數學或邏輯表達式

set(y_new, calc(y_old - offset1 + offset2));
set(animationtime, calc('%1' == 'instant' ? 0.0 : 0.5));
<layer url="calc:'%CURRENTXML%/skin/' + settings.image1" />
複製代碼

變量複製: copy(destination, source)==set(destination, get(source) ) 將原變量(source)中的值複製到目標變量(destination)中 當兩個變量類類型不一樣時，原變量的值將被轉換成目標變量的類型 copy()動做的同效語句爲 set(destination, get(source));

copy(dstvar, srcvar);
copy(cur_hlookat, view.hlookat);
copy(layer[text].x, mouse.x);
copy(layer[text].y, mouse.y);
複製代碼

變量移除: delete(variable,...) 充許同時移除多個變量，變量之間使用逗號(,)分開便可

set(tmp1, ...);
set(tmp2, ...);
... do something ...
delete(tmp1, tmp2);
複製代碼

判斷語句： if(condition, then-actions, else-actions*) 條件成立時執行相應 then語句，不然執行 else語句

if(fullscreen, fullscreensetup(), windowsetup() );
if(fullscreen, set(layer[controls].visible, false) );
if(i LT 10, loop(next) );
if(var === null, set(var,0));
if(hotspot[spot1] === null, trace(there is no spot1 hotspot));
if((varA GT 5) AND (varA LT 10),
    trace('varA is between 5 and 10')
  );
if(varA AND varB AND varC, trace('all vars are true') );
if(var1 GT var2,
    trace('condition is true');
    lookto(100,20,50);
  ,
    trace('condition is false');
    lookto(0,0,100);
  );
if(a*2+b GT (c+3)*1.5 OR teststring == '123', ...);
複製代碼

反向判斷：ifnot(condition, then-actions, else-actions*) 邏輯上與 if 相反，用法相同。

延時調用： delayedcall(delay , actions) / delayedcall(id, delay, actions) 給定的時間後調用或執行指定的動做，爲該動做指定一個惟一的標識 ID ，這樣一來，就能夠經過 stopdelayedcall(id) 來取消該延時動做的執行

delayedcall(5.0, hidelogo() );
delayedcall(id1,5.0, hidelogo() ); //id用於其餘動做控制該delayedcall
delayedcall(10, looktohotspot(spot1);loadpano(pano2.xml); );
複製代碼

移除延時回調：stopdelayedcall(id) 取消並中止指定id的延時動做

<events name="introimage_events"
        onnewpano="delayedcall(introimage, 5.0, hide_introimage() );"
        onremovepano="stopdelayedcall(introimage);"
        />
複製代碼

在某個actions後執行：nexttick(actions) 在當前動做體(一個action元素結點內的動做集)執行完成後當即執行指定的動做

//執行如下動做會先顯示"測試nexttick"
<action name="nexttick_test">
showlog();
nexttick(trace("這是nexttic中k的動做!");
trace("測試nexttick");
</action>
複製代碼

在condition爲真時執行指定actions：callwhen(condition, actions) 當表達式(condition)值爲 true 會執行指定的動做(actions) 若表達式的值此時不爲 true ，那麼該語句動做會一直等待，直到值爲 true 並執行指定的動做 注意- 與 if() 語句主要不一樣是，callwhen() 具備充許滯後特性，這裏強調的是當表達式的值變爲true時才執行且僅執行一次

callwhen(plugin[video].loaded, plugin[video].playvideo(...); );
callwhen(plugin[maps].loaded, plugin[maps].setcenter(...); );
複製代碼

循環語句：for(startactions, condition, nextactions, loopactions) //startactions循環前執行 首先執行起始動做(startactions)，而後檢查表達式(condition)，若值爲 true 則執行要循環的動做(loopactions)，每執行一次循環動做就執行一次步進動做(nextactions)，而後再檢查表達式的值，若爲 true 則繼續執行循環動做…直到表達式爲 false 時終止循環

for(set(i,0), i LT 10, inc(i), trace('i=',i) );.
for(set(i,0), i LT layer.count, inc(i), 
  trace('layer[',i,'].name=',layer[get(i)].name);
); 
複製代碼

持續循環：loop(condition, loopactions) asyncloop(condition, loopactions, doneactions*) 只要表達式(condition)值爲 true 則一直執行循環動做(loopactions) 對於 loop() 語句，只有當循環體執行結束後纔會執行後續的其它動做；而 asyncloop() 則是在循環期間繼續其它事件和動做，只是在當表達式爲 true 時就每幀執行一次循環動做(loopactions)，asyncloop() 循環結束後還能夠執行可選的完成動做(doneactions)

ondown="asyncloop(pressed, layer[scrollarea].scrollby(+2,0) );"
onover="asyncloop(hovering, updatemousepos(), hideinfo() );"
asyncloop(true, framehandler() );
複製代碼

定時器：setinterval(id, delay, actions) 、 clearinterval(id) 按給定的時間定時重複執行指定的動做

setinterval(time, 1.0, 
    jsget(time, (new Date()).toLocaleTimeString(); );
    trace('time=',time);
  );
<events onkeydown="setinterval(get(keycode), 0.1, trace(keycode); );"
        onkeyup="clearinterval(get(keycode));"
        />
複製代碼

切換：toggle(variable) 針對指定邏輯變量的值，在 true 和 false 之間切換

toggle(fullscreen);
toggle(layer[button1].visible);
複製代碼

交替真假：switch({variable})、switch({variable},{valueA},{valueB}) 轉變變量的值

• 若是僅給一個變量，沒有 value 參數，此時等效於 toggle() ，變量將在 true 與 false 之間變換 ；
• 若是給定兩個或更多的 value 參數，那麼將依次從左到右轉變 variable 的值。

switch(fullscreen);
switch(layer[button1].visible);
switch(layer[button1].alpha, 1.0, 0.5);
switch(layer[child].parent, button1, button2, button3);
switch(destpos, -100, 0, +100); tween(y,get(destpos));
複製代碼

跳出、停止：break() 中斷或中止當前的動做 ，當在 for()循環或 loop()循環中使用時，將僅中止循環自身 調用綁定：callwith(caller, actions) 可使用指定的 plugin/layer 或 hotspot 做爲調用者，用於直接訪問這些元素的屬性或事件

• caller 該元素將做爲調用者，只能使用 plugin/layer 或 hotspot 元素
• action 任意動做語句，這些語句將在調用者的語境中執行，這意味着能夠直接訪問元素的屬性和事件

//這裏的onclick實際是指 layer[test].onclick();
callwith(layer[test], onclick);
callwith(layer[test], trace('test pos=',x,'/',y); );
//其中的alpha是指layer[test].alpha
callwith(layer[test], tween(alpha, 0.0); );
複製代碼

style屬性複製：assignstyle(elementname, styles)

assignstyle(layer[test], 'teststyle');
assignstyle(layer[test], 'style1|style2');
複製代碼

將屬性從一個或多個style元素的屬性複製到目標元素。

屬性克隆：copyattributes(destobject, srcobject)

將一個對象的全部屬性從複製到另外一個。 copyattributes(get(layer[test]), get(style[style1]));

從全部<events>元素中執行指定的事件：events.dispatch(eventname, instantly*) instantly一個布爾值設置(true或false，默認爲false)。當設置爲true時，事件將被調用並當即執行，當沒有設置或設置爲false時，事件將在當前的操做調用後被調用。

<events name="events1" myevent="trace(events1...);" />
<events name="events2" myevent="trace(events2...);" />
...
events.dispatch(myevent);
複製代碼

計算相關方法

數學運算符 充許使用兩到三個參數。

add(variable, valueA, valueB*)
 sub(variable, valueA, valueB*)
 mul(variable, valueA, valueB*)
 div(variable, valueA, valueB*)
 mod(variable, valueA, valueB*)
 pow(variable, valueA, valueB*)
複製代碼

• 兩個參數的狀況

add(dst,val1) 等效於 dst = dst + val1
sub(dst,val1) 等效於 dst = dst - val1
mul(dst,val1) 等效於 dst = dst * val1
div(dst,val1) 等效於 dst = dst / val1
mod(dst,val1) 等效於 dst = dst % val1
pow(dst,val1) 等效於 dst = dst ^ val1
複製代碼

• 三個參數的狀況

add(dst,val1,val2) 等效於 dst = val1 + val2
sub(dst,val1,val2) 等效於 dst = val1 - val2
mul(dst,val1,val2) 等效於 dst = val1 * val2
div(dst,val1,val2) 等效於 dst = val1 / val2
mod(dst,val1,val2) 等效於 dst = val1 % val2
pow(dst,val1,val2) 等效於 dst = val1 ^ val2
複製代碼

提示-var1與var2能夠是具體的值也但是變量，當爲變量時，會自動使用它們的真實值

set(val, 1);
add(val, 1);
trace('val should be 2: val=',val);
mul(doublewidth, width, 2.0);
mul(scale, 0.5);
div(result, vala, valb);
add(dst,rotate,360); tween(rotate,get(dst),5);
add(xpos, mouse.x, mouse_x_offset);
sub(destx, stagewidth,  destwidth);
div(aspect,16,9);
mod(cur_hlookat,cur_hlookat,360);
pow(sqrt,val,0.5);
複製代碼

自增長： inc(variable, byvalue*, max*, min*)

自減小： dec(variable, byvalue*, min*, max*)

• variable 指定的變量
• byvalue 每次增長或減小的量，若是無該參數，指定的量將被增長或減少 1
• max / min 限定指定變量的最大值和最小值 當指定的變量達到其中一個限制時，該變量將被設置爲另外一個限制的值。這能夠用來讓指定的變量落在必定的範圍或夾限在特定區域(使用 min=max)

inc(i);
inc(frame,1,get(lastframe),0);
inc(ypos,30);
inc(view.hlookat, 2, 90, -90);
複製代碼

限定：clamp(variable, min, max) 限制變量的值在給定的最小和最大之間的值。

• variable 欲被裁剪的變量
• min 最小值 - 當指定的變量小於該值時，將被設置與該值相同
• max 最大值 - 當指定的變量大於該值時，將被設置與該值相同

clamp(percent, 0, 100);
screentolayer(bar, mouse.stagex,mouse.stagey, lx,ly);
div(fill, lx, layer[bar].pixelwidth);
mul(fill, 100);
clamp(fill, 0, 100);
txtadd(layer[barfill].width, get(fill), '%');
複製代碼

數學函數：Math.* Math對象提供一些用於數學運算的常量和動做； 大部份 Math 動做都有兩種使用方式：一是隻提供一個變量做爲參數，此時該參數便是運算對象，同時又是運算後結果的存貯變量；二是提供兩個參數，前一個用於存貯結果，後一個爲運算對象。

數字取值（四捨五入）： roundval(variable, decimalplaces*) //decimalplaces保留小位點位數，無此參數時表示不保留小數位(取整)

roundval(val);
roundval(val,2);
copy(cur_hlookat,view.hlookat);
mod(cur_hlookat,360);
roundval(cur_hlookat,2);
copy(cur_vlookat,view.vlookat);
roundval(cur_vlookat,2);
txtadd(msg,'looking at ',get(cur_hlookat),'/',get(cur_vlookat));
複製代碼

字符處理相關

轉16進制：tohex(variable, prefix*, length*)
將給定的變量轉換爲十六進制字符串 ，能夠用來生成 html/css 的色值字串

• variable 給定的變量
• prefix(可選) 前導字符(如 '0x' 或 '#')
• length(可選) 返回值的長度

tohex(color,'#',6);
set(color, ...an_external_integer_input...);
tohex(color,'#',6);
txtadd(layer[text1].css,'color:',get(color),';');
複製代碼

大小寫轉換：tolower(variable)、toupper(variable)

字符拼接：txtadd(destination, txt1, txt2*, txt3*, ...) 若只有兩個參數，則將第二個參數中的字符鏈接到目標變量(destination)的後面。多於兩個參數時，則是將從每二個參數開始的全部參數依次鏈接在一塊兒，並存貯到目標變量中

• destination 用於存貯鏈接結果的目標變量 該變量不存在時將被自動建立
• txt1,txt2,txt3,…(可選) 將被鏈接到一塊兒的字符串 當只有一個txt參數時，該txt將被直接鏈接到當前目標變量(destination)的尾部 若是使用變量做爲txt參數，必定要用get()來獲取該變量的實際值

txtadd(picfilename,'%CURRENTXML%/pic_',get(pic),'.jpg');
txtadd(crop,'0|',get(ypos),'|333|285');
txtadd(pname, 'thumbbar_image_', get(i));
txtadd(layer[text].html,'[p]',get(data[txt1].content),'[/p]');
txtadd(msg,get(view.fovtype),'=',get(fov),'°');
複製代碼

字符截取：subtxt(dstvar, srcvar, startpos, len)

• dstvar 用於存貯所提取子串的目標變量，若是該變量不存在則會被自動建立
• srcvar 來源字符串的變量
• startpos 子串在源字符串中的起始位置
• len 欲提取子串的長度

subtxt(newvar, abcdefg, 2, 3)  ---->  newvar==bcd,  第二個開始截取，截取3字符
複製代碼

字符串搜索：indexoftxt(index, txt, searchtxt, startindex*) 返回搜索字符(searchtxt)在字符串(txt)中的起始位置(index)

• index 用於存貯返回值的變量，若返回 -1 則表示搜索字符串(searchtxt)不存在字符串(txt)中；若是該變量不存在則自動建立
• txt 源字符串
• searchtxt 欲搜索的子字符串
• startindex(可選) 指定從源字符串的搜索子串時的起始位置(默認爲0)

字符串替換：txtreplace(var, searchtext, replacetext)、 txtreplace(dstvar, srcvar, searchtext, replacetext) 用字符串replacetext替換源字符串var/srcvar中的searchtext字符串

• var / srcvar / dstvar 用於搜索的源字符串變量(var, srcvar)以及用於存貯返回結果的變量(var, dstvar)。若是該變量不存在則自動建立
• searchtxt 將要被替換掉的舊字符串
• replacetxt 欲替換舊字符串的新字符串

字符串分割：txtsplit(string, separator, resultingarray)、txtsplit(string, separator, var1, var2, ...)

• string 欲分割的字符串，能夠爲實際的字符或字符串變量
• separator 分割標記字符
• resultingarray當用三個參數使用txtsplit()時 用於存貯分割結果的數組變量名，分割的字符逐個放個該數組成員的'value'屬性中
• var1,var2,…當用四個或更多參數使用txtsplit()時，分割出來的字符串將依次存入這些給定的變量中

Split into separate variables:
txtsplit('1|2|3', '|', a, b, c);
trace('a=',get(a), ' b=',get(b), ' c=',get(c));
Result:
a=1 b=2 c=3
Split into an array:
txtsplit('x|y|z', '|', arr);
for(set(i,0), i LT arr.count, inc(i),
  trace('arr[',get(i),'].value=',arr[get(i)].value);
);
Result:
arr[0].value=x
arr[1].value=y
arr[2].value=z
複製代碼

轉碼：fromcharcode(var, charcode) 將一個Unicode字符編碼值轉換爲字符並存入變量(var)中

• var 用於存貯轉換結果的變量
• carcode Unicode字符編碼值 轉義和反轉義：escape(var)、escape(var, text)、unescape(var)、unescape(var, text) 對字符串進行編碼、解碼
• var 無 text 參數時 - 該變量自身將被編碼或解碼； 有 text 參數時 - 該變量將用來存貯 text 編碼或解碼後的字符
• text(可選) 將被編碼或解碼的字符串

動畫

動畫語句：tween(variable, value, time*, tweentype*, donecall*, updatecall*)

補間動做，經過動態改變指定變量值實現動畫效果 顏色支持 當指定的變量名中含有'color'這個關鍵字時，那麼它的值將自動解析爲32位的ARGB色值而且單獨處理每一個顏色通道 多變量支持 能夠同時處理多個變量，這時要使用'|'來分隔這些變量(variable)、值(value)和被間動做類型(tweentype)，當變量有多個，而只有一個值或補間類型時，那麼全部變量將使用相同補間動做類型或被轉變到相同的值，而且對於全部變量來講，time、donecall以及updatecall也都是相同的

• variable 將被改變的變量 使用|字符來分隔多個變量 當變量名中含有關鍵字'color'時，變量值將被處理爲32位的ARGB色值
• value 變量的目標值 若值前面有'%'字符，將按百分比方式處理 使用|字符來分隔多個變量對應的不一樣值 當使用變量來做爲value參數時，需使用 get() 動做來獲取變量的實際值
• time(可選) 從當前值改變到目標值所需秒數(默認 0.5 秒) 還能夠經過 distance() 語句來動態指定時間(不支持多變量補間)，distance()的原理是經過設置指定值域變化的最大時間來動態設置本次補間所需的實際時間，這樣一來，對於變化量小的補量則用時短；相反對於變化量大的補間則用時就長，主要是改善用戶體驗。 下面是 distance() 語句用法 #distance(dvalue,dtime) #dvalue - 值變化的區間 #dtime - 值在區間內變化完成須要時間
• tweentype(可選) 補間動做的插值計算類型(默認 easeOutQuad ) 更多補間動做類型：tweentypes
• donecall(可選) 當補間動做完成且指定變量已達到目標值時，執行本參數中的動做 除了常規動做，還能夠在這裏使用特殊關鍵字 WAIT ，在這種狀況下，用戶界面以及後續的動做將被阻止，直到指定變量達到目標的值
• updatecall(可選) 指定變量在每一次(每一幀)更新時，都會執行該參數中動做 警告- 謹慎使用！會增長系統負擔拖慢幀速率

tween(view.vlookat, 90.0, 2.0); //視覺轉爲向上垂直90度，轉換視覺過程爲2秒
tween(layer[skin_scroll_layer].y, get(mh), 0.5, easeOutQuint, set(layer[skin_map].visible,false) );
//皮膚滾動條組件Y軸座標改變到指定位置，轉換座標過程爲0.5秒，轉換模式爲easeOutQuint，轉換完成後執行set(layer[skin_map].visible,false)
複製代碼

中止動畫：stoptween(variable, ...) 中止當前運行中的補間動做

• variable 當前正在對該變量進行補間操做的動做將被中止
• … variable, variable, …(可選) 將被中止補間的其它的變量

ondown="tween(layer[text].y, 10, distance(400,0.7), linear);"
onup="stoptween(layer[text].y);"
複製代碼

動畫類型tweentype：

動態加載

加載新的全景 注意- 只有具有 keep=「true」 屬性的圖層、插件、熱點、事件和光暈元素在新場景中才被保留

loadpano(xmlpath, vars*, flags*, blend*)
loadscene(scenename, vars*, flags*, blend*)
loadpanoscene(xmlpath, scenename, vars*, flags*, blend*)
loadxml(xmlstring, vars*, flags*, blend*)
複製代碼

注意- 當選定的混合模式不被環境支持時(例如在Flashplayer下使用僅支持WebGL的模式)，那麼將自動回退到默認的混合方式(NOBLEND)

loadpano(pano2.xml);
loadpano(pano2.xml, null, MERGE, BLEND(1));
loadscene(scene1);
loadscene(scene1, null, MERGE, BLEND(1));
loadxml('<krpano><image><sphere url="pano.jpg"/></image></krpano>');
loadxml(get(data[xml].content), null, KEEPALL);
loadpano('%SWFPATH%/pano.xml', null, MERGE, BLEND(2));
loadpano(sphere.xml, image.hfov=1.0&view.limitview=fullrange);
複製代碼

打開地址：openurl(url, target*)

• url 待打開的url
• target(可選) _blank - 在新窗口中打開(默認) _self - 在當前窗口的當前幀中打開 _parent - 在當前幀的父窗口中打開 _top - 在當前窗口的頂層幀中打開 Flash模式時要注意 - 該動做須要Flashplayer的擴展接口支持，它只在瀏覽器內部有效，當工做在離線或使用「file:「本地url瀏覽時就須要對Flashplayer進行安全設置

openurl('http://krpano.com',_self);
openurl('help.html');
複製代碼

調用js網頁跳轉： js(eval(this.location="{url}"))

視圖、相機控制

視圖設置：lookat(h, v, fov*, distortion*, architectural*, pannini*) 觀看全景的指定位置

• h - 球面座標中的水平方向角度(-180 到 +180)-view.hlookat
• v - 球面座標中的垂直方向角度(-90 到 +90)-view.vlookat
• fov(可選) - 視域度數(0 到 179)-view.fov
• distortion (可選) - 魚眼扭曲設置 -view.distortion
• architectural (可選) - 建築投影設置 -view.architectural pannini1)(可選) - pannini投影設置 -view.pannini

lookat(0,0);
lookat(0,0,90);
loadpano(pano.xml);
lookat(45.1, -20.2, 110.0);
複製代碼

視圖變化：

lookto(toH,toV,fov*,motiontype*,shortestway*,nonblocking*,donecall*)
 looktohotspot(hotspotname*, fov*, motiontype*, shortestway*)
 moveto(toH, toV, motiontype*)
 zoomto(fov, motiontype*)
複製代碼

將視圖從當前位置移動給定的位置

注意- 在移動期間全部用戶界面及其它動做都將被阻塞，這意味着其它動做只能在當前動做完成後才能執行。可使用 oninterrupt() 來充許用戶中斷該動做

例子

moveto(100.0,5,linear(10));
zoomto(130,smooth());
lookto(33,-22,30,smooth(100,50,20));
looktohotspot(hotspot1);
looktohotspot(hotspot2, 40);
looktohotspot(hotspot3, 25, smooth(100,50,20));
looktohotspot(get(name));
複製代碼

調整視圖：adjusthlookat(desthlookat) 調整view.hlookat值

解決360度環繞中到達目標水平位置(desthlookat)的最短路徑

• desthlookat 爲 0 時，能夠從 view.hlookat 中獲取正確的當前水平位置值：-180 到 +180 爲任意 0到360 的值時，則會修正從當前位置到達該水平位置的最短運動方式 能夠直接使用變量，會自動獲取實際值 此時當前的view.hlookat會被調整到與該參數的鄰近值(不改變當前視圖)

//用途一:讓讀取的view.hlookat值正確落在 -180到+180 的範圍內
adjusthlookat(0);
trace(view.hlookat);
//用途二:修正view.hlookat，以期經過最短路徑方式移動到目標水平位置
adjusthlookat(140);
tween(view.hlookat, 140);
複製代碼

得到球面距離：getlooktodistance(result, toH, toV, fromH*, fromV*) 獲取球面座標中兩個位置之間的夾角度數(0到180度)

中止 lookto / looktohotspot / moveto / zoomto事件： stoplookto() 中止一個未阻塞的 lookto()/looktohotspot()/moeto()/zoomto()動做

中止用戶操做：stopmovements() 當即中止用戶觸發的(經過鼠標、鍵盤或觸控板)全部panning投影和縮放行爲

等待：wait(parameter) 等待若干秒的時間或等待特定的事件(LOAD 或 BLEND) 注意- 用戶界面及全部後續動做將被阻塞，這意味着後面的動做只能在當前動做完成以後才能獲得執行。可使用 oninterrupt 以便讓用戶有中斷能力

• parameter 有如下三種可能 任意數字 - 等待的時間秒數 LOAD - 一直等待直到加載完成 BLEND - 一直等待直到混合效果處理完成

oninterrupt(break);
lookto(150,30,70);
wait(3);
lookto(242,0,150);
lookto(280,-10,50);
wait(3);
loadpano(pano2.xml,null,MERGE,BLEND(2));
lookat(100,50,5);
wait(BLEND);
lookto(100,50,150);
複製代碼

oninterrupt：oninterrupt(actions) 在處理一些會阻塞用戶界面的動做以前(如 lookto()、looktohotspot()、moveto()、zoomto()、wait()以及使用WAIT做爲donecall參數的tween())，使用該語句，用戶就能夠隨時經過操控界面(如點擊動做)來停止這些動做的執行，同時執行參數內容中的動做。

• action 用戶中斷後要執行的命令 另外這裏還有一個特殊的命令： break - 僅中斷當前動做(無其它附加命令)

座標相關

屏幕座標和球座標之間的轉換：screentosphere(x,y, h,v)、 spheretoscreen(h,v, x,y, stereoside*) 屏幕座標與球面座標之間的相互轉換

• screentosphere - 將屏幕上的x/y轉換爲球面中的h/v
• spheretoscreen - 將球面中的h/v轉換爲屏幕上的x/y

• x/y - 以左上角爲原點的屏幕像素座標
• h/v - 球面上的方位角度(380×180)
• stereoside (可選) 針對分屏VR模式 - 定義哪一邊的屏幕座標，可能的設置有兩種：l- 左屏；r- 右屏；或者不設置表示無分屏的普通座標
• 注意： x,y,h,v必須爲變量名，不充許使用確切的數值 若是變量未定義，它將被自動建立 screentosphere(mouse.x, mouse.y, toh, tov);

屏幕座標和球座標之間的轉換，層的座標：screentolayer(layer, screenx,screeny, layerx,layery)、layertoscreen(layer, layerx,layery, screenx,screeny) 在真實屏幕與相對圖層座標之間轉換

• layer - 圖層元素名稱
• screenx/screeny - 屏幕上相對左上角的座標像素值變量
• layerx/layery - 相對於左上角的圖層座標變量

注意： 屏幕座標系是從左上角 (x=0; y=0) 到右下角 (x=stagewidth; y=stateheight) 若是使能scalechildren，那麼層座標也會被縮放 不支持旋轉的層 全部參數必須爲變量，不充許使用常量 當變量不存在時，它將被建立

screentolayer(bar, mouse.stagex,mouse.stagey, lx,ly);
div(fill, lx, layer[bar].pixelwidth);
mul(fill, 100);
clamp(fill, 0, 100);
txtadd(layer[barfill].width, get(fill), '%');
複製代碼

remapfovtype：remapfovtype(fov, srcfovtype, dstfovtype)、 remapfovtype(fov, srcfovtype, dstfovtype, width, height) 就當前視域範圍，從新計算出另外一種fovtype對應的新fov值 在改變fovtype及從新計算對應fov的過程當中，當前視域(鏡頭變焦)不會變化

• fov 將被改變的fov變量 返回的新值也將存貯在該變量中
• srcfovtype 當前的fovtype 能夠是：HFOV,VFOV,DFOV或者MFOV
• dstfovtype 新的fovtype 能夠是：HFOV,VFOV,DFOV或者MFOV
• bwidth (可選) 指定視圖區域的寬度像素數 默認爲當前視圖尺寸
• height (可選) 指定視圖區域的高度像素數 默認爲當前視圖尺寸

set(view.fovtype, HFOV);
set(view.fov, 90);
...
set(view.fovtype, VFOV);
remapfovtype(view.fov, HFOV, VFOV);
複製代碼

更新重繪

更新/重建pano對象的內部3D模型：updateobject(updateall*, updatefov*) 重建全景對象的3D模型

在瀏覽時動態改變display.details以及display.tessmode後必須使用這個語句以更新全景。當在交互方式更改image.hfov,image.vfov或者image.voffset這些設置時，應使用updatefov=true試調用該語句，以便獲得更新後的全景對象

注意-該語句很消耗系統資源，請謹慎使用!

• updateall (可選) 針對多重分辨率 - 是否更新全部層 可能的設置：true 或 false (默認爲 false)
• updatefov (可選) 全景更新同時從新解析出新的image.hfov,image.vfov以及image.voffset 可能的設置：true 或 false (默認爲 false)

set(image.hfov,1);
updateobject(true,true);
複製代碼

屏幕重繪：updatescreen() 直接強制重繪當前屏幕內容

重繪屏幕，並重置idletime計數器：invalidatescreen() 直接強制重繪當前屏幕內容，並全重置idletime計數(無用戶交互時間計數)

熱點添加及移除

動態地建立和添加:

addlayer(name)
 addplugin(name)
 addhotspot(name)
 addlensflare(name, ath*, atv*)
複製代碼

動態建立一個新的圖層、插件、熱點或光暈

• name - 待建立的新元素名稱(最好使用小寫英文,不要使用數字或其它字符開頭)
• ath/atv (僅針對光暈) - 光暈的空間位置

addlayer(button);
addhotspot(newspot);
addhotspot(polyspot);
addlensflare(sun, 20, -60);
複製代碼

移除：

removelayer(name, removechildren*)
 removeplugin(name, removechildren*)
 removehotspot(name)
 removelensflare(name)
複製代碼

動態刪除一個圖層、插件、熱點或光暈

• name - 待刪除的元素名稱
• removechildren (可選) - 設置爲true時，該元素的全部子元素也將被刪除

layer/plugin/hotspot專屬：

layer / plugin / hotspot[name].loadstyle(name)
layer / plugin / hotspot[name].registercontentsize(imagewidth,imageheight)
layer / plugin / hotspot[name].resetsize()
layer / plugin / hotspot[name].updatepos()
layer / plugin / hotspot[name].changeorigin(align,edge)
layer / plugin / hotspot[name].getfullpath()
hotspot[name].getcenter(ath,atv)
複製代碼

JS擴展

調用js函數：js( "Javascript函數(參數)" )

調用一個Javascript函數，在實際調用js代碼以前，其中的參數將預先被krpano解析，記得要使用get(var)語句去獲取變量的確切值 Flash模式時注意 - 該語句須要使用Flashplayer的擴展接口，它僅在瀏覽器內部且在線時有效，當離線瀏覽或本地url瀏覽，那麼就須要設置Flashplayer的安全設置項

//如下是存在於js或 html文件中的Javascript代碼
function test(p1, p2, p3)
{
  alert(p1 + ": " + p2 + " / " + p3);
}
//全景項目中的調用代碼
js( test('Lookat', get(view.hlookat), get(view.vlookat)) );
複製代碼

調用js代碼：jscall( "...任意Javascript代碼... ")

直接在全景中執行任何Javascript代碼，能夠在Javascript代碼中直接讀寫krpano的js接口對象 Flash模式時注意 - 該語句須要使用Flashplayer的擴展接口，它僅在瀏覽器內部且在線時有效，當離線瀏覽或本地url瀏覽，那麼就須要設置Flashplayer的安全設置項

//改變html元素的風格
jscall('document.getElementById("test").style.display="none";');
//使用calc()語句構建js語句並使用krpano變量
jscall(calc('console.log("krpano version: ' + version + '")'));
//返回前一頁面
jscall('history.back()');
複製代碼

獲取一個Javascript變量的值或一個Javascript函數的返回值：jsget(variable, ...Javascript代碼... )

獲取Javascript變量或Javascript函數的值，能夠在js代碼讀寫krpano接口對象

• variable 用於存貯返回值的變量名 若是變量不存在則自動建立 Flash模式時注意 - 該語句須要使用Flashplayer的擴展接口，它僅在瀏覽器內部且在線時有效，當離線瀏覽或本地url瀏覽，那麼就須要設置Flashplayer的安全設置項

//獲得當前頁面的地址
jsget(ret, 'location.href');
trace('地址爲：', get(ret));
//讓用戶輸入內容
jsget(passwort, 'prompt("請輸入口令")');
if(password == 'hidden', ...);
//獲得當前日期(YYYY-MM-DD):
jsget(date, 'new Date().toISOString().slice(0,10);');
trace('日期爲：', get(date));
js網頁跳轉： js(eval(this.location="{url}"))
調用軟窗口： js(openWindow({url},{width},{height},{name},{yes/no}));
調用搜索查詢窗口： js(openWindow(search.html,290,330,搜索查詢,no));
提示窗口： js(alert({彈出窗口}));
複製代碼

調試

是否顯示輸出日誌：showlog(state*) 顯示或隱藏日誌信息

• state (可選) true - 顯示日誌信息(默認) false - 隱藏日誌信息

變量跟蹤： debugvar(varname) 在輸出日誌中顯示/跟蹤關於變量的詳細信息（值和類型），當變量是一個對象時，也將顯示全部對象屬性。

打印調試信息

debug(...)
 trace(...)
 warning(...)
 error(...)
複製代碼

將文本或變量輸出到日誌信息中

• trace - 信息以」INFO:「開頭(白色字體)
• error - 信息以」ERROR:「開頭(黃色字體)
• warning - 信息以」WARNING:「開頭(藍色字體)
• debug - 信息以」DEBUG:「開頭(綠色字體)，而且僅在 debugmode=true 時才顯示 注意- 過多地輸入跟蹤信息會影響全景渲染效率，尤爲不要在每一幀都有跟蹤信息

trace('view.maxpixelzoom=', view.maxpixelzoom);
<events onkeydown="trace('keycode=',keycode);" />
onresize="trace('size=',stagewidth,'x',stageheight);"
onclick="trace('mouse clicked at ', mouse.x, ' / ', mouse.y);"
trace('xyz=',xyz,' get(xyz)=',get(xyz));
複製代碼

顯示一個錯誤消息,並阻止用戶交互:fatalerror(errormessage)

• errormessage 待顯示的錯誤信息

文字

顯示文字（廢棄）：showtext(text, textstyle*) 在屏幕上顯示字符串內容

• 注意：

1. 之前是內置語句，如今已由showtext.xml這個默認內含插件實現
2. 同一時刻只能顯示一個字符串，再次顯示新字符串時，當前字符將被清除

onhover="showtext(you are hovering me);"
onhover="showtext(style text,TEXTSTYLE);" //樣式調用
onhover="showtext(line 1[br]line 2[br]line 3);" //分行
onhover="showtext([b]bold[/b] [i]italic[/i]);" //字體
複製代碼

彙總

官方地址：krpano.com/docu/quickr…

經常使用操做

層級問題

方法1.在html中可使用最大z-index：2147483647避免全屏下彈窗被覆蓋問題（慎用） 方法2：將彈窗生成在全景容器內

音樂

預加載MP3文件：preloadsound({mp3});

playsound: playsound({voice},{mp3},*{Cycle},*{execution});

playsound2D:   playsound2D({voice},{mp3},*{Volume},*{Track },*{Cycle},*{execution}); 

playsound3D:   playsound3D({voice}, {mp3},{ath},{atv},*{range},*{Volume},*{Cycle},*{execution});

playsound3DHS:   
playsound3DHS({voice},{mp3},*{range},*{Volume },*{Cycle },*{execution}); 
複製代碼

暫停聲音：pausesound({voice});

恢復聲音：resumesound({voice});

暫停/恢復聲音：pausesoundtoggle({voice});

中止聲音：stopsound({voice});

中止全部聲音：stopallsounds();

視頻熱點

內部控制

播放視頻： playvideo({video}); 

關閉視頻： closevideo();

中止：stop();

暫停： pause(); 

播放：play();

播放/中止：togglepause();
複製代碼

外部控制

播放視頻：hotspot[{name}].playvideo({video});

關閉視頻：hotspot[{name}].closevideo();

中止： hotspot[{name}].stop(); 

暫停： hotspot[{name}].pause(); 

播放： hotspot[{name}].play();

播放/中止：hotspot[{name}].togglepause();
複製代碼

全屏

切換全屏：switch(fullscreen,true);

進入全屏：set(fullscreen,true);

退出全屏：set(fullscreen,false);

鍵盤鼠標

鼠標類型：

移動到：set(control.mousetype,moveto);

2D拖拽：set(control.mousetype,drag2d);

3D拖拽： set(control.mousetype,drag3d); 
複製代碼

旋轉縮放：

放大：set(fov_moveforce,-1);

縮小：set(fov_moveforce,1);

中止縮放：(fov_moveforce,0);

向左：set(hlookat_moveforce,-1);

向右：set(hlookat_moveforce,1);

中止左右：set(hlookat_moveforce,0);

向上： set(vlookat_moveforce,-1); 

向下：set(vlookat_moveforce,1);

中止上下：set(vlookat_moveforce,0);
複製代碼

鼠標控制類型：control.mousetype

場景

前一場景： _loadpano(%FIRSTXML%GigaMap/{scene_id}/scene.xml,MERGE,{blend})

後一場景： _loadscene(get(SSet.Next_Scene_ID)); 場景調用：

loadpano(%FIRSTXML%scene/{scene_id}/scene.xml,MERGE,{blend})
loadpano(pano2.xml);
loadpano(pano2.xml, null, MERGE, BLEND(1));
loadscene(scene1);
loadscene(scene1, null, MERGE, BLEND(1));
loadxml('<krpano><image><sphere url="pano.jpg"/></image></krpano>');
loadxml(get(data[xml].content), null, KEEPALL);
loadpano('%SWFPATH%/pano.xml', null, MERGE, BLEND(2));
loadpano(sphere.xml, image.hfov=1.0&view.limitview=fullrange);
複製代碼

矩陣地圖調用： loadpano(%FIRSTXML%GigaMap/{scene_id}/scene.xml,MERGE,{blend})

JS通訊

JavaScript 調用 Krpano 對象

embedpano({
    //省略其它不相關設置...
    id: "krpanoSWFObject",
    onready: krpanoReady
});
function krpanoReady() {
    var krpano = document.getElementById('krpanoSWFObject');
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        krpano.call("webvr.enterVR()"); //進入VR
    };
}
複製代碼

krpano 對象默認 ID 爲krpanoSWFObject，不過爲了肯定每次都能正常獲取到，請在embedpano的onready函數中處理。

Krpano JavaScript 接口對象

set(variable, value) - 將指定數值賦值給指定 krpano 對象
get(variable) - 返回指定 krpano 變量的數值
call(action) - 調用和執行任意 krpano 動做代碼
spheretoscreen(h, v) - 直接調用 spheretoscreen 動做
screentosphere(x ,y) - 直接調用 screentosphere 動做
複製代碼

Krpano 調用 JavaScript

jscall("任何JS代碼")
jscall("alert('11')")
jscall("window.funName()")
jsget(variable, "javascript code") //返回值所存儲的krpano變量的名字，變量不存在則建立
複製代碼

js獲取任何標籤的屬性

function Getinfo() {
 
var krpano = document.getElementById("krpanoSWFObject");
 
var ath = krpano.get('hotspot[hotspot1].ath');
var atv = krpano.get('hotspot[hotspot1].atv');
alert("ath:" + ath+" atv:" + atv);
 
}

<hotspot name="hotspot1" url="http://www.new720.com/images/logo.png"  onclick="js(Getinfo())"  ath="0" atv="0" ondown="draghotspot();" />
複製代碼

Flash 注意事項 該動做須要 Flashplayer 的外部接口，這樣在瀏覽器運行時纔可用。本地或離線使用有file://的路徑時，使用 Flashplayer 的本地/離線調用設置。

JS調用全景action(帶參數)

在xml中編寫一個action,如：

<action name="layerinfo">
trace(%1);
</action>
複製代碼

在頁面中編寫js腳本，如：

注意事項，embedpano中的ID名稱和JS獲取的ID名稱要一致

<script type="text/javascript">
 var krpano = document.getElementById("krpanoSWFObject");
 krpano.call("layerinfo('New720.cn');");
</script>
複製代碼

獲取中心座標

方法一：

var krpano = document.getElementById(‘krpanoSWFObject’);

krpano.set(「curscreen_x」, window.innerWidth / 2);
krpano.set(「curscreen_y」, window.innerHeight/ 2);
krpano.call(「screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);」);
ath = krpano.get(「curscreen_ath」);
atv = krpano.get(「curscreen_atv」);
複製代碼

方法二：

var ath = krpano.view.hlookat;
var atv = krpano.view.vlookat;
複製代碼

全景視頻

<krpano>
    <!-- include the videoplayer plugin -->
    <plugin name="video"
            url.flash="videoplayer.swf"
            url.html5="videoplayer.js"
            videourl="video.mp4|video.webm"
            />
    <!-- define the pano image and refer to the videoplayer plugin -->
    <image>
        <sphere url="plugin:video" />
    </image>
</krpano>
複製代碼

方法： plugin[video].playvideo('video2.mp4|video2.webm');

krpano tools使用

具體使用方法參考官網：krpano.com/tools/

經常使用插件

krpano提供了一個小而簡單的接口開發本身的插件，插件能夠是Flash(. swf),Javascript(js),xml(xml)插件。

官網地址：krpano.com/docu/plugin…

能夠本身開發插件，這裏只介紹官方的免費插件

建議

在平常開發中，須要定製高級功能的時候建議按照插件來開發，每一個插件可單獨配置、低耦合，在須要的時候引入文件便可，不對其餘功能形成影響，如下是我的開發結構，爲了減小請求數，經過構建工具自動監聽文件變化，最終合併成一個主文件，上線也只須要此文件便可。 若是您有更好的方案或者其餘想法也能夠一塊兒探討。

Combobox

首先須要導入插件<include url="plugins/combobox.xml" /> 建立靜態列表框：

<combobox name="box1" design="default" ...any layer settings...>
    <item name="item1" caption="Item 1" onclick="..." />
    <item name="item2" caption="Item 2" onclick="..." />
    <item name="item3" caption="Item 3" onclick="..." />
</combobox>
複製代碼

動態建立列表框：

<action name="test">       
    addComboboxLayer(box1, default);
    set(layer[box1].align, 'lefttop');
    set(layer[box1].x, 20);
    set(layer[box1].y, 20);
    layer[box1].addItem('Item 1', trace(Item 1 clicked) );
    layer[box1].addItem('Item 2', trace(Item 2 clicked) );
    layer[box1].addItem('Item 3', trace(Item 3 clicked) );
</action>
複製代碼

大小位置：

• 位置相似layer同樣經過align，edeg，x，y，parent來設置
• 如不設置寬度，將取item中的最大寬度
• 無需設置高度，高度老是自適應的

屬性/事件

design="default"  設計方案
selecteditemindex  選中項的索引（只讀）
onchange=""  選定項目改變時調用
item=""  包含的項目，數組格式，layer[cbname].item[itemname].*/layer[cbname].item.count
item[itemname].caption   項目的標題文本
item[itemname].onclick   項目的點擊事件
複製代碼

插件操做

addComboboxLayer(name, design*)   添加列表框（名字，設計方案）
removeComboboxLayer(name)    移除
layer[name].addItem(caption, onclick)    添加項及對應事件
layer[name].addNamedItem(name, caption, onclick)    添加項，標題及對應事件
layer[name].selectItem(caption)    根據標題選擇項
layer[name].selectItemByName(name)    根據name選擇項
layer[name].removeAll()    移除全部項
layer[name].openList()    打開列表
layer[name].closeList()    關閉列表
複製代碼

自定義設計方案 經過 < combobox_design >元素定義，具備如下屬性

margin="2"   邊距
open_close_speed="0.25"   打開/關閉速度(秒)
複製代碼

內部包含三個style元素分別設置容器，遮罩及項目的樣式

<combobox_design name="default" margin="2" open_close_speed="0.25">
    <style name="combobox_container_style"
           bgalpha="1.0"
           bgcolor="0xFFFFFF"
           bgborder="1 0xFFFFFF 0.5"
           bgroundedge="1"
           bgshadow="0 1 3 0x000000 1.0"
           />
    <style name="combobox_marker_style"
           css="color:#FFFFFF;"
           bg="false"
           txtshadow="0 0 2 0x000000 1"
           />
    <style name="combobox_item_style"
           css="color:#222222;"
           padding="4 4"
           bg="false"
           bgcolor="0xC7E4FC"
           bgalpha="1.0"
           bgroundedge="1"
           txtshadow="0 0 1 0xFFFFFF 1.0"
           />
</combobox_design>
複製代碼

此處有坑：combobox和action（calc_pos_from_hfov_yaw_pitch_roll）中cb變量衝突

• combobox不能放在其餘layer內，能夠經過parent來指定父級
• 若是同時使用了最新版（1.19 pr13）的combobox 插件 及calc_pos_from_hfov_yaw_pitch_roll這個action 會出錯，由於他們都使用了同一個變量 cb 。 只須要將calc_pos_from_hfov_yaw_pitch_roll中的變量改下名字就好。

---

官方文檔：krpano.com/plugins/com…

Videoplayer

layer：

<layer name="video"
       url.flash="videoplayer.swf"
       url.html5="videoplayer.js"
       videourl="video.m4v|video.webm"
       posterurl="videoposter.jpg"
       align="center" x="0" y="0"
       pausedonstart="false"
       loop="false"
       volume="1.0"
       onvideoready=""
       onvideoplay=""
       onvideopaused=""
       onvideocomplete=""
       onerror=""
       />
複製代碼

3 d-distorted熱點：

<hotspot name="video"
         url.flash="videoplayer.swf"
         url.html5="videoplayer.js"
         videourl="video.m4v|video.webm"
         posterurl="videoposter.jpg"
         ath="0.0" atv="0.0"
         distorted="true"
         scale="1.0" 
         rx="0.0" 
         ry="0.0" 
         rz="0.0" 
         pausedonstart="false"
         loop="false"
         volume="1.0"
         directionalsound="true"
         range="90.0"
         rangefalloff="1.0"
         outofrangevolume="0.0"
         onvideoready=""
         onvideoplay=""
         onvideopaused=""
         onvideocomplete=""
         onerror=""
         />
複製代碼

全景圖像:

<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        posterurl="videoposter.jpg"
        panovideo="true"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        onvideoready=""
        onvideoplay=""
        onvideopaused=""
        onvideocomplete=""
        onerror=""
        />

<image hfov="360" vfov="180">
   <sphere url="plugin:video" />
</image>
複製代碼

屬性：

`videourl：`視頻地址，通常就是MP4+webm，優先從左到右，可用preferredformat調整（MPEG4 / H264 (。 mp4,。 m4v。mov)- flash播放器/ Firefox(Windows 7 +)/ Safari和Chrome / IE Android / iOS /
WebM (.webm)——Firefox和Chrome
Ogg Theora (。 ogg,.ogv)- Firefox和Chrome
Flash視頻 (。 flv,.f4v)——flash播放器
RTMP視頻流 ( rtmp:/ / url)- flash播放器
HTTP流媒體直播 (。 m3u,.m3u8)——iOS,Mac Safari只——並且只有<層>用法,不是由於帕諾人——由於這個視頻 iOS錯誤 !）

posterurl（html5）：封面，默認第一幀
panovideo （use_as_videopano 老版）：false是否用做全景視頻
pausedonstart：false在一開始是否暫停
loop:false循環
volume：音量 0.0-1.0
muted（html5）：靜音
playbackrate（html5）：1.0回放速度
directionalsound（flash）：3d聲音音效
range（flash）：90.0
rangefalloff （flash）：1.0
outofrangevolume（flash）：0.0
preferredformat（html5）：格式優先
autopause（html5） ：true自動暫停視頻當瀏覽器選項卡/窗口被隱藏
autoresume（html5）：false自動恢復視頻的時候停頓了一下,而後經過隱藏瀏覽器選項卡/窗口
html5controls（html5）：false當啓用(設置爲true),顯示瀏覽器內置的視頻控件。
html5preload（html5）：auto預加載
buffertime（falsh）：0.1視頻應該在開始以前加載/緩衝的時間
ignoremetadata（flash）：false
playsinline（html5）：true在移動設備上播放視頻內聯krpano(iPhone、iPad、Android)。當禁用,那麼瀏覽器就能夠最終在本身內部的放像機播放視頻
iphoneworkarounds（html5）：true使工做區爲iPhone視頻支持(iOS版本iOS前10)。
touchworkarounds（html5）：true使播放經過觸摸手機和平板設備的解決方案
複製代碼

事件：

onvideoready：準備就緒
onvideoplay：播放
onvideopaused：暫停
onvideocomplete：播放完成
onerror：錯誤
onneedtouch：須要觸摸
ongottouch：觸摸時
複製代碼

狀態（只讀）：

isvideoready 
ispaused 
isseeking
iscomplete
isautopaused 
needtouch
videoerror
time
totaltime
videowidth 
videoheight
loadedbytes 
totalbytes
複製代碼

操做：

playvideo(url, posterurl, pausedonstart, starttime)
play()
pause()
togglepause()
stop()
seek(time)
複製代碼

---

官網:krpano.com/plugins/vid…

Scrollarea

<layer name="scrollarea"
       url="scrollarea.swf" alturl="scrollarea.js"
       parent="..."
       align="..." width="..." height="..."
       direction="all"      //方向h/v/all
       draggable="true"   //容許拖動
       mwheel="true"        //鼠標滾動
       onhover_autoscrolling="false"  //hover自動滾動
       overscroll="1.0"   //滾動超出
       friction="0.95"   //摩擦
       acceleration="0.08"  //運動加速度
       returnacceleration="0.15"  //回彈
       momentum="0.06" //動力加速度
       onscroll=""  //滾動回調
       />
複製代碼

只讀屬性：

loverflow (只讀) loverflow =左溢 
roverflow (只讀) roverflow =對溢出 
toverflow (只讀) toverflow =頂部溢出 
boverflow (只讀) boverflow =底部溢出 
woverflow (只讀) woverflow =總寬度溢出 
hoverflow (只讀) hoverflow =總高度溢出 
複製代碼

事件 onscroll //滾動 setcenter(x,y) //設置中心 scrolltocenter(x,y) //滾動到中心 scrollby(dx,dy) //設置滾動速度向量 stopscrolling() //中止滾動

---

官方文檔：krpano.com/plugins/scr…

Gyro2（新）

使用手機/平板電腦設備的陀螺儀和加速度傳感器來控制全景查看方向，相比舊版（gyro插件），此版本更快，相應更及時、準確、流暢，建議使用新版。

支持： ios,android，windows phone只要設備自己有硬件支持均可以使用 用法：

<plugin name="gyro" 
		devices="html5" 
        keep="true"
        url="gyro2.js"  //引入插件
        enabled="false"   //是否啓用陀螺儀
        camroll="true"  //根據設備旋轉調整觀看位置
        friction="0.0"   0.0-0.99或者auto  摩擦力，auto和zoom/fov/frame-rate有關
        touch_mode="full"  off(關閉)/horizontaloffset（橫向）/full（所有）/disablegyro（）,觸摸方式
        sensor_mode="1"  傳感器類型
        softstart="0.5"  啓用陀螺時，方向改變的時間，爲0將當即使用gyro-tracked值
        autocalibration="false"  自動校準陀螺儀
        onavailable=""
        onunavailable=""
        onenable=""
        ondisable=""
        />
複製代碼

屬性： sensor_mode：傳感器類型

• 0 =直接使用最新的可用的傳感器數據。 沒有內插或外推法。 根據sensor-time-intervals的瀏覽器 運動能夠是不平穩的或平滑。
• 1 =最新之間順利插入 可用的傳感器數據。 這將給一個很是光滑但延遲運動。
• 2 =預測設備傳感器數據之間的旋轉,而後插入。
• 3 =推斷最新可用的傳感器數據 當前幀的時間。 這將給一個快速響應和平滑運動,但能夠有抽搐 當外推/預測數據和實際運動不匹配。
• 4 =預測當前幀的旋轉裝置。 這將給一個快速響應和平滑運動,但能夠有抽搐 當外推/預測數據和實際運動不匹配。
• 5 =預測設備旋轉和推斷 傳感器數據從最新的事件當前幀時間。 狀態 isavailable="false"設備是否支持陀螺儀 事件

onavailable:   在支持陀螺儀的設備上調用
onunavailable：在不支持陀螺儀的設備上調用
onenable： 在陀螺儀啓用的時候調用
ondisable： 在陀螺儀禁用的時候調用
複製代碼

操做 resetSensor(hlookat, vlookat*)：重置陀螺儀方向

MoreTweenTypes Plugin

本插件做爲tween方法的參數使用。 Ease Out and In:

• easeOutInQuart
• easeOutInQuint
• easeOutInSine
• easeOutInBounce
• easeOutInCirc
• easeOutInCubic
• easeOutInExpo Ease In and Out:
• easeInOutQuad
• easeInOutQuart
• easeInOutQuint
• easeInOutSine
• easeInOutBounce
• easeInOutCirc
• easeInOutCubic
• easeInOutExpo

引入插件

<plugin url.html5="moretweentypes.js"
        url.flash="moretweentypes.swf"
    	preload="true"
        />
複製代碼

Gridmenu

插件屬性配置

• button  (可選)
  • 是否展現顯示和隱藏網格菜單的默認按鈕
  • 默認值=true
• padding_top  (可選)
  • 縮略圖滾動區域的頂部邊距
  • 對手機端該邊距將被設置爲0
  • 默認值=75
• padding_bottom  (可選)
  • 縮略圖滾動區域的底部邊距
  • 對手機端該邊距將被設置爲0
  • 默認值=75
• width_margin  (可選)
  • 縮略圖滾動區域的左右邊距
  • 對手機端該邊距將被設置爲0
  • 默認值=0
• grid_bgcolor  (可選)
  • 背景顏色
  • 默認值=0x000000
• grid_bgalpha  (可選)
  • 背景透明度
  • 默認值=0.7
• display_title  (可選)
  • 展現網格菜單標題
  • 默認值=true
• grid_title  (可選)
  • 網格菜單標題
  • 默認值=GRID MENU
• grid_title_css  (可選)
  • 網格菜單標題的CSS樣式
  • 默認值=color:#ffffff;font-family:Raleway;font-size:35px;
• group  (可選)
  • 是否按照分組安排縮略圖
  • 注意不在分組中的場景不會被展現
  • 默認值=false
• current  (可選)
  • 只展現當前分組的縮略圖
  • 默認值=false
• cat_container_height  (可選)
  • 分組標題容器的高度
  • 默認值=35
• cat_container_border  (可選)
  • 分組標題容器的邊框設置
  • 默認值=0,0,1,0 0xffffff 1.00
• cat_container_title_css  (可選)
  • 分組標題的CSS樣式
  • 默認值=color:#ffffff;font-family:Raleway;font-size:25px;
• cat_container_title_align  (可選)
  • 分組標題的對齊位置
  • 默認值=left
• cat_container_border_height  (可選)
  • 分組標題的底部邊距
  • 默認值=1
• display_cat_desc  (可選)
  • 是否顯示分組的描述
  • 默認值=true
• cat_desc_css  (可選)
  • 分組描述的CSS樣式
  • 默認值=color:#ffffff;font-family:Raleway;font-size:14px;text-align:left
• thumbs_crop  (可選)
  • 縮略圖的CROP屬性
  • 默認值=0|75|240|150
• thumbs_width  (可選)
  • 縮略圖的寬度
  • 默認值=240
• thumbs_height  (可選)
  • 縮略圖的高度
  • 默認值=150
• thumbs_padding   (可選)
  • 縮略圖的邊距
  • 默認值=25
• thumbs_scale   (可選)
  • 按照百分比爲單位的最大縮略圖尺寸
  • 默認值=100
• active_thumb_border   (可選)
  • 激活的縮略圖的邊框設置
  • 默認值=3 0xffffff 1.00
• display_thumb_title   (可選)
  • 是否展現縮略圖標題
  • 默認值=true
• thumb_title_align   (可選)
  • 縮略圖標題的對齊方式
  • 默認值=bottom
• thumb_title_x   (可選)
  • 縮略圖標題的X位置
  • 默認值=0
• thumb_title_y   (可選)
  • 縮略圖標題的Y位置
  • 默認值=5
• thumb_title_css   (可選)
  • 縮略圖標題的CSS樣式
  • 默認值=color:#ffffff;font-family:Raleway;font-size:16px;text-align:left;
• thumb_title_roundedge   (可選)
  • 縮略圖標題的背景圓角設置
  • 默認值=5
• thumb_title_background   (可選)
  • 縮略圖標題背景是否顯示
  • 默認值=true
• thumb_title_backgroundcolor  (可選)
  • 縮略圖標題背景顏色
  • 默認值=0x000000
• thumb_title_backgroundalpha  (可選)
  • 縮略圖標題背景透明度
  • 默認值=0.8
• thumb_title_border   (可選)
  • 縮略圖標題背景邊框是否顯示
  • 默認值=false
• thumb_title_borderwidth  (可選)
  • 縮略圖標題邊框寬度
  • 默認值=1
• thumb_title_bordercolor  (可選)
  • 縮略圖標題邊框顏色
  • 默認值=0xffffff
• thumb_title_borderalpha  (可選)
  • 縮略圖標題邊框透明度
  • 默認值=1
• thumb_title_padding  (可選)
  • 縮略圖標題邊距
  • 默認值=3 10
• display_thumb_desc  (可選)
  • 是否在縮略圖上顯示場景描述
  • 默認值=true
• thumb_desc_css  (可選)
  • 場景描述的CSS樣式
  • 默認值=color:#ffffff;font-family:Raleway;font-size:15px;text-align:center
• thumb_desc_bg_color  (可選)
  • 場景描述的背景顏色
  • 默認值=0x000000
• thumb_desc_bg_alpha  (可選)
  • 場景描述的背景透明度
  • 默認值=0.6
• thumb_desc_padding  (可選)
  • 場景描述的邊距
  • 默認值=8 15
• loadscene_flags  (可選)
  • Loadscene動做的flag參數
  • 默認值=MERGE
• loadscene_blend  (可選)
  • Loadscene動做的blend參數
  • 默認值=BLEND(1)
• vcenter  (可選)
  • 網格菜單是否垂直居中
  • 默認值=false

插件動做

• rg_show_thumbs_grid(true/false)
• 顯示或隱藏網格菜單
• 能夠選擇不使用默認按鈕，或者用下面代碼來覆蓋
  

  <layer name="thumbs_button" url="gridbut.png" keep="true" align="bottom" onclick="rg_show_thumbs_grid(true);" crop="0|0|45|45" y="15" zorder="101"/>

  skin_setting

  <!-- skin_setting 自定義元素，默認皮膚的參數設置-->
  maps="false"  <!-- 是否使用必應地圖或谷歌地圖 -->
  maps_type="bing"  <!-- 選擇使用谷歌地圖或必應地圖 -->
  maps_bing_api_key=""   <!-- 必應地圖所需的API密鑰，需申請 -->
  maps_google_api_key=""   <!-- 谷歌地圖所需的API密鑰，需申請 -->
  maps_zoombuttons="false"   <!-- 是否在地圖上顯示縮放按鈕 -->
  gyro="true"   <!-- 是否使用陀螺儀 -->
  webvr="true"    <!-- 是否啓用VR -->
  webvr_gyro_keeplookingdirection="false" <!-- 進入陀螺儀或VR時是否保持觀看方向 -->
  webvr_prev_next_hotspots="true"  <!-- 在VR下是否啓用導航到先後場景的連接熱點-->
  littleplanetintro="false"    <!-- 是否使用小行星開場 -->
  title="true"  <!-- 是否左下角顯示title -->
  thumbs="true"  <!-- 是否使用縮略圖，如不使用，則沒有縮略圖一欄 -->
  thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"  <!-- 縮略圖寬度、高度、間距以及縮略圖裁切範圍 -->
  thumbs_opened="false"   <!-- 是否在啓動時彈出縮略圖一欄 -->
  thumbs_text="false"  <!-- 是否在縮略圖上顯示名字 -->
  thumbs_dragging="true"   <!-- 是否容許鼠標拖拽縮略圖區域 -->
  thumbs_onhoverscrolling="false"  <!-- 是否容許鼠標懸停縮略圖自動滾動 -->
  thumbs_scrollbuttons="false"   <!-- 是否顯示縮略圖滾動按鈕 -->
  thumbs_scrollindicator="false"   <!-- 是否顯示縮略圖滾動條 -->
  thumbs_loop="false"  <!-- 滾動按鈕是否使用縮略圖循環 -->
  tooltips_buttons="false" <!-- 鼠標在按鈕懸停時是否彈出文字提示 -->
  tooltips_thumbs="false"  <!-- 鼠標在縮略圖懸停時是否彈出文字提示 -->
  tooltips_hotspots="false"   <!-- 鼠標在熱點上懸停時是否彈出文字提示 -->
  tooltips_mapspots="false"   <!-- 鼠標在地圖熱點懸停時是否彈出文字提示 -->
  deeplinking="false"       <!-- 是否使用深度連接獲取功能，可以使得當前頁面路徑獲取場景及視角信息 -->
  loadscene_flags="MERGE"  <!-- 縮略圖切換場景時的變量 -->
  loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"  <!-- 縮略圖切換場景時的融合 -->
  loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"  <!-- 縮略圖切換到上一個場景時的融合 -->
  loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"  <!-- 縮略圖切換到下一個場景時的融合 -->
  loadingtext="載入中..." <!-- 在全景圖載入中時顯示的文字 -->
  layout_width="100%"  <!--導航條容器相對屏幕寬度的百分比 -->
  layout_maxwidth="814"  <!--導航條容器的最大寬度像素 -->
  controlbar_width="-24" <!--導航條背景的寬度像素 -->
  controlbar_height="40"  <!--導航條背景的高度像素 -->
  controlbar_offset.normal="20"  <!--導航條背景與屏幕底部的距離-->
  controlbar_offset_closed="-40"  <!--導航條隱藏狀態時與屏幕底部的距離-->
  controlbar_overlap.no-fractionalscaling="10"  <!--在不支持分級縮放頁面和設置像素比的設備的導航條重疊的像素-->
  controlbar_overlap.fractionalscaling="0" <!--支持分級縮放頁面和設置像素比的設備的導航條重疊的像素-->
  design_skin_images="vtourskin.png" <!--皮膚所用的源圖片-->
  design_bgcolor="0x000000" <!--皮膚的背景顏色-->
  design_bgalpha="0.5" <!--皮膚的透明度-->
  design_bgborder="0 0xFFFFFF 1.0" <!--皮膚的邊框-->
  design_bgroundedge="1" <!--皮膚邊框圓角設置-->
  design_bgshadow="0 0 9 0xFFFFFF 0.5" <!--皮膚的背景陰影-->
  design_thumbborder_bgborder="4 0xFFFFFF 1.0" <!--皮膚的縮略圖邊框-->
  design_thumbborder_padding="2" <!--皮膚縮略圖邊框間距-->
  design_thumbborder_bgroundedge="5" <!--皮膚縮略圖邊框的圓角-->
  design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"<!--皮膚文字樣式-->
  design_text_shadow="1" <!--皮膚的文字陰影-->
  <!-- 若是你要更改皮膚樣式，你能夠改變上面的skin_settings數值，或者選擇性地include下面一個預設的設計，能夠經過移除特定include元素的if屬性或者在html文件的embedpano()中增長initvar:{design:’flat_light’}。 -->
  <include url="skin/vtourskin_design_glass.xml"       if="design === 'glass'"       />
  <include url="skin/vtourskin_design_flat.xml"        if="design === 'flat'"        />
  <include url="skin/vtourskin_design_flat_light.xml"  if="design === 'flat_light'"  />
  <include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" />
  <include url="skin/vtourskin_design_117.xml"         if="design === '117'"         />
  複製代碼