今回は「layer(レイヤー)」を画面内で動かせるようにして、レイヤー構造を調べます。

準備

とりあえず、前回と同様な下地レイヤーを配置します。



 
<layer name="box"  type="container" keep="true"  
		align="left" x="100" y="0"
		width="320" height="200"   
		bgcolor="0xffffff" bgalpha="1" 
		bgborder="2 0xff0000 0.5" 
		bgroundedge="5" 
		bgshadow="5"  
		bgcapture="true"   
		scale="0.5" scalechildren="true"
		ondown="draglayer();"
		zorder="2"
       />
</krpano>

レイヤーをマウスで動かせるようにする

元のコードは、krpano19の中、viewer>examples>dragable-layers サンプルにありますが、下記の必要な部分だけ、レイヤーを記述しているxmlにコピーします。

	<action name="draglayer">
		copy(drag_currentx, x);
		copy(drag_currenty, y);
		copy(drag_stagex, mouse.stagex);
		copy(drag_stagey, mouse.stagey);
		indexoftxt(align_contains_right, get(align), 'right');
		indexoftxt(align_contains_bottom, get(align), 'bottom');
		calc(drag_align_x, align_contains_right GE 0 ? -1 : +1);
		calc(drag_align_y, align_contains_bottom GE 0 ? -1 : +1);
		asyncloop(pressed,
			calc(x, drag_currentx + (mouse.stagex - drag_stagex)*drag_align_x);
			calc(y, drag_currenty + (mouse.stagey - drag_stagey)*drag_align_y);
		  );
	</action>

action というのは、その名の通り、動作を指定する記述になります。この場合は、名前が「draglayer」で、大まかには下記のような動作をします。

1)レイヤーの元座標(x,y)を、それぞれ、drag_currentx と drag_currenty にコピーする。
2)ステージ(ブラウザウインドウ)内のマウス座標を、drag_stagex と drag_stagey にコピーする。
3)レイヤーのalignに、right と bottom があるかどうかを調べる。(これらの場合は、レイヤーの移動座標の符号(+/-)が逆転するため)
4)right がある場合は、drag_align_x を-1に、そうでなければ、+1にする。bottomも同様。
5)マウスボタンを押している間、元座標+(マウス座標-移動座標)×移動符号を計算して、レイヤーの座標に代入。

ここでこれらを理解する必要はありませんが、なんとなくスゴイことをやっていますね。
しっかり理解しようと思っても、calkというコードは、現在のサイトのdocumentationに書かれていないので、ちょっとやっかいです。

さて、上がドラッグするアクションの指定になりますが、これをレイヤーに書き込んで、動作を指定しなければなりません。

<layer name="box"  type="container" keep="true"  
		align="left" x="100" y="0"
		width="320" height="200"   
		bgcolor="0xffffff" bgalpha="1" 
		bgborder="2 0xff0000 0.5" 
		bgroundedge="5" 
		bgshadow="5"  
		bgcapture="true"   
		scale="0.5" scalechildren="true"
		ondown="draglayer();"
       />

変更点は下記。



bgcapture=”true” で、レイヤーのマウス動作を受け付けるようにします。

ondown=”draglayer();” で、マウスダウンした時に、draglayer アクションを動作させます。

ここまで設定すると、レイヤーをマウスで動かせるようになります。



レイヤーの重なり具合を見る

ここで色と位置を変えたレイヤーを一つ追加し、これらを重ねてみます。

追加する記述は下記で、シアン地に白枠になります。これを、先のレイヤーの記述の後に加えました。

<layer name="box2"  type="container" keep="true"  
		align="center" x="0" y="0"
		width="320" height="200"   
		bgcolor="0x00ffff" bgalpha="1" 
		bgborder="2 0xffffff 0.5" 
		bgroundedge="5" 
		bgshadow="5"  
		bgcapture="true"   
		scale="0.5" scalechildren="true"
		ondown="draglayer();"
 		/> 



レイヤーをドラッグして移動すると、後に記述したレイヤー(追加した方)が、上になることがわかります。
つまり、レイヤー同士の上下関係をコントロールするには、書き順を変えればよいのですが、xmlが複雑になると、ワケが分からなくなります。

zorder でレイヤー順を設定する

レイヤーの順番は、zorder という属性で設定できます。
値は、0~100までを使い、数が大きい方が上になります。



最初のレイヤー(box/白地)のzorderを2に、追加した方のレイヤー(box2/シアン地)のzorderを1に設定しました。


zorderの指定で、白が上になりました。

 

futter