LZXでは画面に表示される部品,
座標について
画面の座標
画面の横方向にX座標,
X座標は原点から右方向に正の値,
リスト1 デフォルトでは左上に配置
<canvas proxied="false" bgcolor="0xffffcc">
<view width="200" height="50" bgcolor="#ff0000"/>
<button>ボタン</button>
<text>こんにちは</text>
</canvas>
リスト1のサンプル
座標指定
リスト1ではボタンと文字列が重なってしまっているので,
リスト2は,
リスト2 X,Y指定で配置
<canvas proxied="false" bgcolor="0xffffcc">
<view width="200" height="50" bgcolor="#ff0000"/>
<button>ボタン</button>
<text x="100" y="20">こんにちは</text>
</canvas>
リスト2のサンプル
前後関係
Z座標
リスト3のサンプルでは赤黄青というソースの順番に奥から手前に向かって表示されています。
リスト3 ソース内で下に記述するほど画面では前に表示される
<canvas proxied="false" bgcolor="0xffffcc">
<!--赤--><view width="100" height="50" bgcolor="#ff0000"/>
<!--黄--><view x="20" y="20" width="100" height="50" bgcolor="#ffff00"/>
<!--青--><view x="40" y="40" width="100" height="50" bgcolor="#0000ff"/>
</canvas>
リスト3のサンプル
この前後関係は動的に変更することができます。たとえばビューをクリックしたときに前面に表示させるには,
onclickは該当ビューをクリックした時のイベントハンドラです。bringToFront()についているthisというのは自分自身つまりスクリプトが書かれているビュー自身を指します。
リスト4 クリックした四角が前面に来る
<canvas proxied="false" bgcolor="0xffffcc">
<view width="100" height="50" bgcolor="#ff0000" onclick="this.bringToFront()"/>
<view x="20" y="20" width="100" height="50" bgcolor="#ffff00" onclick="this.bringToFront()"/>
<view x="40" y="40" width="100" height="50" bgcolor="#0000ff" onclick="this.bringToFront()"/>
</canvas>
リスト4のサンプル 四角をクリックしてみてください。
親子関係
タグの親子関係とレイアウトには密接な関係があります。子タグの座標系は親タグが基準となります。
親の違いによる座標系の違い
ビューのデフォルト配置位置は原点(x,y)=(0,0)ですね。厳密に言うと親タグの(0,0)になります。
たとえばリスト5ではボタン1の親は<canvas>なので画面全体の左上が原点になります。一方,
リスト5 親子関係
<canvas proxied="false" bgcolor="0xffffcc">
<button>1</button>
<view x="50" y="20" width="100" height="50" bgcolor="#ffff00">
<button>2</button>
</view>
</canvas>
リスト5のサンプル
兄弟関係
兄弟関係とは同一階層にあるビュー同士のことです。リスト4でいうと赤黄青のビュー,
親子関係の場合は子が前面に,