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

2016-07-04 / JSN / 0 Comments / 496 次瀏覽

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

  • indexdata/
  • index.html

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

熱點與動作設定的位置

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

<!-- **** @PanoName="大清來治" @PanoFile="....jpg" **** -->
<!-- **** Width="11712px" Height="5856px" **** -->

<scene name="pano59"
       heading="0"
       group="panogroup84"
       thumburl="%FIRSTXML%/pano_59/thumbnail.jpg"
       backgroundsound=""
       backgroundsoundloops="0"
       haspolygons="false"
       titleid="pano59_title"
       descriptionid=""
       multires="true"
       planar="false"
       full360="true"
       video="false"
       seen="false">
  • @PanoName 會出現你設定的場景名稱
  • screen 場景標籤，將所有屬性與動作包圍起來。一個 screen 代表一個場景。
    • name 場景的唯一名稱

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

<data name="zh_pano59_title"><![CDATA[大清來治]]></data>

 

手動添加熱點

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

<!-- **** 3 Point Spots **** -->
  • 代表這個場景有3個熱點，通常是由 Kolor 自動計算所編譯出來的

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

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

  <hotspot name="spotpoint873"
           ath="70.267310" atv="4.499996"
           style="IconDefaultPointSpotStyle"
           tag="point"
           descriptionid=""
           onclick="onclickspotpoint873"
           />
  <hotspot name="spotpoint873" devices="flash" zorder="3"/>
  <hotspot name="spotpoint873" devices="html5" zorder="3" zorder2="1"/>
  <action name="onclickspotpoint873">
        mainloadscene(pano58);lookat(-91.800000, 0.900000, 90.000000);
  </action>
  • hotspot
    • name 代表這個熱點的唯一名稱
    • ath 座標
    • atv 座標
    • style 對應顯示圖片的樣式名稱。設定在 indexdata/index_skin.xml
    • onclick 點擊熱點後觸發的動作名稱
    • tooltip 滑鼠在上面的提示文字
  • action
    • name 代表這個動作的唯一名稱
    • 注意，內容不是寫 JS，而是寫 KRPano 的語言喔！如果要呼叫JS，務必透過 KRPano 的轉接

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

  <!-- 金球 開始 -->
    <hotspot name="ball_1"
             ath="270" atv="57"
             style="Icon金球"
             tag="point"
             descriptionid=""
             onclick="onclick_ball_1"
             tooltip="ball_tooltip"
             />
    <hotspot name="ball_1" devices="flash" zorder="3"/>
    <hotspot name="ball_1" devices="html5" zorder="3" zorder2="1"/>
    <action name="onclick_ball_1">
          js(ball_find('ball_1'))
    </action>
  <!-- 金球 結束 -->

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

function ball_find(ball_id) {
  alert(ball_id);
}

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

  <data name="zh_ball_tooltip"><![CDATA[你找到一顆金球了]]></data>

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

<?xml version="1.0" encoding="UTF-8"?>
<krpano version="1.19">
  
  <!-- Spot Style - 金球 開始 -->
  <style name="Icon金球"
         url="%FIRSTXML%/spots/hotspot_direction_big_sequence_user_defaultpoint12.png"
         visible="false"
         frame="0"
         lastframe="10"
         framewidth="80"
         frameheight="80"
         stopspotsequence="false"
         crop="0|0|80|100"
         onloaded="startspotanimation(0.1);"
         onhover="onhoverIcon金球"
         onout="onoutIcon金球"
         />

  <action name="onhoverIcon金球">
    showtooltip('hotspot');
  </action>
  <action name="onoutIcon金球">
    hideTooltip();
  </action>  
  <!-- Spot Style - 金球 結束 --> 

  <!-- Spot Style - Default Point Spot Style 預設樣式，不要去動到囉 -->
  • style
    • url 顯示的圖片位置
    • visible 預設是否顯示
    • onhover 滑鼠移入
    • onout 滑鼠移出
  • action
    • name 提供給 style[onhover] 的動作

 

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

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

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

  <action name="hidepanopointspots">
    set(hotspot[spotpoint873].visible, false);
    set(hotspot[spotpoint874].visible, false);
    set(hotspot[spotpoint875].visible, false);
    set(hotspot[ball_1].visible, false); <!-- 先隱藏 -->
  </action>
  <action name="showpanopointspots">
    set(hotspot[spotpoint873].visible, true);
    set(hotspot[spotpoint874].visible, true);
    set(hotspot[spotpoint875].visible, true);
    set(hotspot[ball_1].visible, true); <!-- 再顯示 -->
  </action>

 

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

發表迴響