Kolor – KRPano – 手動添加熱點,並觸發外部 JavsScript

Kolor 產出 HTML5 以後,整包資料夾基本上會有兩種文件

  • indexdata/
  • index.html

因為 Kolor 的核心採用 KRPano 的環景系統,使用 HTML5 的時候會呼叫 KRPano 的 JavaScript 去讀取 XML 設定檔。我們的所有熱點(hotspot),包含替換場景的熱點,都是設定在 XML。所以我們若要增加、替換熱點,幾乎可以不需要從 Kolor 重新跑介面化的流程做產出的行為。

熱點與動作設定的位置

打開 indexdata/index.xml ,找到你的場景名稱的註解。通常會長這樣

  • @PanoName 會出現你設定的場景名稱
  • screen 場景標籤,將所有屬性與動作包圍起來。一個 screen 代表一個場景。
    • name 場景的唯一名稱

我們可以理解『場景編號 pano59 』的顯示名稱叫做『大清來治』。這個對應的名稱,可以參考 indexdata/index_messages_zh.xml 中的翻譯,可以看到

 

手動添加熱點

在 index.xml 找到你要的場景下方,找到這個註解

  • 代表這個場景有3個熱點,通常是由 Kolor 自動計算所編譯出來的

環景設計師可能透過 Kolor 產出整批檔案,我因為要添加尋寶遊戲的寶藏,每天位置都不一樣,如果每次都要透過 Kolor 替換熱點的位置會很麻煩,所以在這裡需要手動添加。

先來理解我們看到可能已經存在的熱點設定:

  • hotspot
    • name 代表這個熱點的唯一名稱
    • ath 座標
    • atv 座標
    • style 對應顯示圖片的樣式名稱。設定在 indexdata/index_skin.xml
    • onclick 點擊熱點後觸發的動作名稱
    • tooltip 滑鼠在上面的提示文字
  • action
    • name 代表這個動作的唯一名稱
    • 注意,內容不是寫 JS,而是寫 KRPano 的語言喔!如果要呼叫JS,務必透過 KRPano 的轉接

當點擊熱點『spotpoint873』,會讀取標籤『onclickspotpoint873』內的動作。所以如果我們要手動增加一個,那就複製這段,建議貼在所有的預設熱點之後,避免維護上的麻煩。

點擊熱點,會透過 KRPano 的 JavaScript API 『js()』去呼叫外部的 JavaScript 。所以我們的 JavaScript 可以這樣來接收點擊的金球編號:

因為我的提示字元的屬性 tooltip 設定為 ball_tooltip,所以打開 indexdata/index_messages_zh.xml 添加在 <krpano> 內部,命名規則設定如

金球編號『ball_1』的樣式,會讀取 indexdata/index_skin.xml 中名為 『Icon金球』的樣式標籤。所以打開 indexdata/index_skin.xml 添加在 <krpano version=”1.19″> 後方

  • style
    • url 顯示的圖片位置
    • visible 預設是否顯示
    • onhover 滑鼠移入
    • onout 滑鼠移出
  • action
    • name 提供給 style[onhover] 的動作

 

環景進入前後,讓熱點從隱藏到顯示

我的環景使用魚眼效果進入畫面。所以當魚眼效果轉換到正常顯示的這段期間,熱點是隱藏的。等到正常顯示後,該熱點才會顯示。

在標籤 screen 中可以看到例如這樣的標籤,我們增加對金球 ball_1 的動作

 

這樣基本上就完成手動添加熱點的動作囉!

發表迴響