9スライスオブジェクト | hyperPad Documentation

Loading...

Logo
Documentationはじめに9スライスオブジェクト
はじめに

9スライスオブジェクト

Last updated August 1, 2016

9スライスオブジェクト(時々9パッチと呼ばれる)は、ユーザー定義のマージンを持ち、画像を9つのセクションに分割し、オブジェクトのスケーリング方法を変更するオブジェクトです。

9スライスオブジェクトは、ユーザーインターフェイスを作成する際や、スケーリング時に特定の見た目を保つ必要があるプロジェクトの要素を作成する際に頻繁に使用されます。

通常、9スライスオブジェクトをリサイズすると、3つのことが起こります:

  • 角が移動します。
  • 側面の領域が引き延ばされます。
  • 中央の部分はスケーリングされるだけです。

下のグラフィックを基に、スケーリングを試みると、9スライスオブジェクトと通常のグラフィックの違いを簡単に見ることができます。

通常のグラフィック(9スライスマージンなし)が、水平方向に230%にスケーリングされます。画像の角が引き延ばされ、四角ではないことに注意してください。

元のグラフィックを、20%のマージン(赤い線)のある9スライスオブジェクトに変換します。

9スライスオブジェクトを同じように水平方向に230%スケーリングすると、オブジェクトの角がその形を維持しているのがわかります。

9スライスオブジェクトの作成

任意のグラフィックを9スライスオブジェクトに変換できます。そのためには、アセットライブラリを開き、9スライスオブジェクトにしたいグラフィックに移動します。

グラフィックを見つけたら、指で触れて押し続けると、アセットメニューが表示されます。アセットメニューから「9スライスに変換」を選択します。

9スライスに変換すると、自動的に40%のマージンが作成されます。

デフォルトマージンの変更

デフォルトのマージンを変更する場合は、アセットメニューから「プレビュー」を選択します。

「9スライスプレビュー」は、グラフィック上のマージンラインを視覚的に表示し、マージンの位置(グラフィックのパーセンテージとして)を設定できる入力フィールドを持っています。

マージンを変更するには、各マージンラインにある白い円をタッチして移動するか、手動で数値を入力します。マージンラインをドラッグすると、自動的に位置のパーセンテージが更新されます。

オブジェクト固有のマージンの変更

シーンに追加する各特定の9スライスオブジェクトのマージンを変更しても、元の9スライスオブジェクトには影響を与えません。

これを行うには、キャンバス上の9スライスオブジェクトをタップし、オブジェクトプロパティから一般プロパティタブ(最初のタブ)に切り替えます。

一般プロパティタブでは、4つのマージンを見ることができ、その位置を手動で変更できます。