「layer(レイヤー)」は、パノラマの画面に貼り付けるボタン類のことです。かつては「plugin(プラグイン)」と呼ばれていましたので、古いコードを見るとpluginになっています。今は、どちらの表記でも使えます。ただ、現在では基本的にlayerはボタンなど、pluginは付加機能として使い分けられていますので、これに準じる方がわかりやすいと思います。
layerという名の通り、層(レイヤー)構造を持たせることができます。また、レイヤー同士に親子関係を作ることもできますので、同類のボタンを並べたりするのに役立ちます。

どこを調べる?

Documentation(メインメニュー)→XML Reference(左メニュー)→The krpano XML structure(本文ウインドウ)→と進めば、詳しい説明が見られます。今回をここを解読しています。読んでもあんまり面白くないかもしれませんが、苦行のつもりで・・(涙)。



ウインドウ右上の「show/hide advanced sttting」ボタンを押すと、隠れている情報も表示されます。

●本文
要素または要素を使用して、画像、ロゴ、ボタン、または動的プラグイン(例:krpanoプラグイン)を含めることができます。 スタック、複数のサブレイヤまたは要素を組み合わせるには、親設定を使用するか、子 / 要素を子xml要素として宣言できます。 この場合、親と保留は自動的に親要素に割り当てられます。

注 – 要素または要素は、内部的にまったく同じ要素であり、名前が異なるだけです。

layerの記述

それぞれの属性をざっと説明しておきましょう。

 
<layer name="..."                    <!-- layerの名前 -->
       type="image"                  <!-- imageとcontainer があります -->
       url="..."                     <!-- imageタイプの場合は、画像のURLを入れます -->
       keep="false"                  <!-- パノラマやシーンが切り替わっても表示するかどうか? -->
       parent=""                     <!-- 親要素の指定 -->
       visible="true"                <!-- 可視にするかどうか? -->
       enabled="true"                <!-- クリック可能にするかどうか? -->
       handcursor="true"             <!-- ハンドカーソルを有効にするか? -->
       maskchildren="false"          <!-- 子要素をマスクするかどうか? -->
       scalechildren="false"         <!-- 子要素のスケールを親要素に従わせるかどうか? -->
       zorder=""                     <!-- Zオーダー。レイヤーの順番 -->
       style=""                      <!-- スタイル指定 -->
       align=""                      <!-- 位置揃え指定 -->
       edge=""                       <!-- 位置揃えの基準の指定 -->
       x=""                          <!-- X(横)座標指定 -->
       y=""                          <!-- Y(縦)座標指定 -->
       rotate="0.0"                  <!-- 回転角度 -->
       width=""                      <!-- 幅指定 -->
       height=""                     <!-- 高さ指定 -->
       scale="1.0"                   <!-- スケール(倍率)指定 -->
       alpha="1.0"                   <!-- 透明度指定 -->
       crop=""                       <!-- クロップの指定 -->
       onovercrop=""                 <!-- マウスオーバー時のクロップ指定 -->
       ondowncrop=""                 <!-- マウスダウン時のクロップ指定 -->
       bgcolor="0x000000"            <!-- containerタイプ時の背景色指定 -->
       bgalpha="0.0"                 <!-- containerタイプ時の背景透明度指定 -->
       bgborder="0"                  <!-- containerタイプ時の境界線指定 -->
       bgroundedge="0"               <!-- containerタイプ時の境界線の角丸指定 -->          
       bgshadow=""                   <!-- containerタイプ時のドロップシャドウ指定 -->
       bgcapture="false"             <!-- containerタイプ時にパノラマを触れるかどうかの指定 -->
       onover=""                     <!-- マウスオーバー時の動作 -->
       onhover=""                    <!-- マウスオーバー時に繰り返し(15回/秒)呼び出せる動作 -->
       onout=""                      <!-- マウスオーバー時の動作 -->
       onclick=""                    <!-- マウスクリック時の動作 -->             
       ondown=""                     <!-- マウスダウン時の動作 -->
       onup=""                       <!-- マウスアップ時の動作 -->
       onloaded=""                   <!-- レイヤーをロードした時の動作 -->
       />

なんか泣けてくる・・・。

位置とサイズの設定

赤字が、align設定
緑字が、edge設定
青字が、座標の設定 の説明になっています。pluginはlayerと読み替えます。

座標の+と-が、alignやedgeの関係によって向きが変わるので、ちょっと注意が必要です。ま、実際に書いて見ればわかりますが・・。



例(Exsamples)

ロゴを入れるサンプル。
logoimage.pngの画像を使い、画面右下(rightbottom)から、横に20、縦に20ピクセル中に配置し、クリック時に他のURLを開く、という意味。

 
<layer name="logo"
       url="logoimage.png"
       align="rightbottom" x="20" y="20"
       onclick="openurl('http://...');"
       />

親子の指定のサンプル。
imagebarが親で、コンテナータイプ。幅は画面一杯(100%)、高さは200ピクセル。左下揃えで、黒で塗りつぶし、透明度は0.5。
この黒地(親)の上に、item1~3の3つの画像のボタンが、左揃えで左から10、110、210ピクセルに配置する。という意味。

 
<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>

以前も書きましたが、親子関係は、別の書き方があり、このようにも書けます。

 
<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"   parent="imagebar"/>
  <layer name="item2" url="image2.jpg" align="left" x="110"  parent="imagebar"/>
  <layer name="item3" url="image3.jpg" align="left" x="210"  parent="imagebar"/>

はあ・・。こんな文字ばかりだと面白くないですねぇ。

 

futter