ズームと移動

<wakusei-body>、<wakusei-portrait>、<wakusei-space> は、共通の kazoku-ui の操作部品を自分で持っています。ページにタグを置くだけで、読む人は操作できます。<kazoku-view-controls> も、つなぎの記述も要りません。

<wakusei-body body="jupiter" look="realistic" size="420"></wakusei-body>

読む人ができること

• ドラッグ。 全体が見えている状態 (Fit) では、ドラッグで天体が回ります (ポートレートでは絵が動きます)。拡大しているときは、ドラッグで見ている場所が動きます。ポインターの下の表面は、ポインターについてきます。
• ピンチ。 2本の指で、拡大・移動・ひねりができます。
• ホイール。 Fit のときは、ふつうのホイールはページをスクロールします。絵に閉じ込められることはありません。Ctrl、Command、Alt を押しながらのホイールは、ポインターのところを中心に拡大します。拡大しているときは、ふつうのホイールで見ている場所が動きます。
• キー。 要素にフォーカスすると (tabindex="0" がつきます)、矢印で回り、+ と - で拡大・縮小、0 か Home で Fit に戻ります。ダブルタップで2倍と元の大きさを行き来します。
• スマホ。 Fit のときの touch-action は pan-y なので、指でページをスクロールできます。拡大すると none になります。

ズームの範囲

ズームしても、描くピクセルは増えません。キャンバスの大きさは決まっていて (1辺4096ピクセル、600万ピクセルまで)、ズームは描いたものを拡大するだけです。だから下限は自由に決められて、上限は絵の細かさが足りなくなるところです。

自分の範囲は、タグの zoom-min と zoom-max で決めます (zoom-min は1以下、zoom-max は zoom-min 以上に抑えるので、Fit はいつも範囲の中です)。

<wakusei-body body="mars" look="realistic" zoom-max="4"></wakusei-body>

手を外す、バーを足す

controls="none" で、手を外します。live="off" の天体 (サムネイルや静止画) は、手なしで始まります。値なしの controls で戻ります。

ボタンがほしいページは、バーを足します。バーがあるあいだは、バーが手を引き継ぎます。バーのイベントは、これまでどおり setView に渡します。バーは要素のズームの範囲を読むので、範囲はタグに一度書けば足ります。

<wakusei-body id="planet" body="saturn" look="line" tabindex="0"></wakusei-body>
<kazoku-view-controls for="planet" address controls="advanced" speed="0"></kazoku-view-controls>

for には、まわりの箱ではなく要素そのものを指定します。そうしないと、要素の手とバーの手の両方がドラッグを受けてしまいます。キーを使うには、要素に tabindex が必要です。

ページへの知らせ

手でも setView でも、表示が変わるたびに、要素から wakusei-view が送られます。中身は yaw、tilt、roll、zoom、panX、panY です (ポートレートは zoom、panX、panY、宇宙ビューは yaw、tilt、zoom)。宇宙ビューの controller は共通のコントローラーで、space.controller.set({ zoom: space.zoomFor("moon") }) と書くと、その距離に移れます。

埋め込みページとビルダー

embed.html は、ドラッグ、ピンチ、Ctrl とホイール、キー、+ と - のボタンでズームでき、表示を自分のアドレスに書き込みます (幅が240ピクセルより小さいフレームには、ボタンを置く場所がないので、ボタンとアドレスはなく、手だけが働きます)。?body=saturn&look=realistic&zoom=2 は2倍で開きます。表示の傾きは vtilt です (tilt はポーズの傾きに使っているためです)。コードビルダーは、絵のズームを追いかけ、ズームしたあとに書き出す iframe のコードに zoom= がつきます。要素のコードにはつきません。タグはいつも Fit から始まるためです。