拡大 / 縮小時の歪みの制御

表示オブジェクトを拡大 / 縮小する場合 (水平方向に伸縮する場合など)、結果として生じる歪みはオブジェクト全体で均等に拡散されるため、すべての部分が同じだけ伸縮するのが通常です。グラフィックエレメントやデザインエレメントの場合、これが問題になることはあまりありません。しかし場合によっては、表示オブジェクトの一部を伸縮し、一部を変更しないように制御したいことがあります。角の丸い矩形のボタンが、この場合の典型的な例です。通常の拡大 / 縮小操作の場合、ボタンのサイズを変更すると、ボタンの隅が伸縮し、角丸の半径が変化します。


2 つの矩形のイメージ。最初の矩形には丸い角があります。2 番目の矩形は、最初の矩形を一方向に拡大したものを表しています。したがって、丸い角は傾斜しています。

しかしこの場合は、拡大 / 縮小を制御できれば (つまり、拡大 / 縮小する領域 (直線の辺と中央部分) としない領域 (角) を指定できれば)、表示したときの歪みが生じないため、その方が望ましいことになります。


2 つの矩形のイメージ。最初の矩形には丸い角があります。2 番目の矩形は、最初の矩形を一方向に拡大したものを表していますが、丸い角は保持されています。

9 スライスの拡大 / 縮小 (スケール 9) を使用すると、表示オブジェクトを作成してそのオブジェクトの拡大 / 縮小方法を制御できます。9 スライスの拡大 / 縮小を使用すると、表示オブジェクトが 9 つの個別の矩形 (三目並べの升目のような 3 x 3 のグリッド) に分割されます。矩形は必ずしも同じサイズであるとは限りません。グリッド線をどこに配置するかは、ユーザーが指定します。表示オブジェクトを拡大 / 縮小しても、4 つの角にあたる矩形 (ボタンの丸い角の部分など) 内のコンテンツのサイズは変更されません。上端中央部と下端中央部の矩形は水平方向に拡大 / 縮小しますが、垂直方向には拡大 / 縮小しません。一方、左端中央部と右端中央部の矩形は垂直方向に拡大 / 縮小しますが、水平方向には拡大 / 縮小しません。中央部の矩形は、垂直方向と水平方向の両方に拡大 / 縮小します。


角丸の矩形のイメージ。破線がこの矩形を横切り、中央にこれよりも小さい矩形を形成しています。

表示オブジェクトを作成し、そのオブジェクトの特定のコンテンツを拡大 / 縮小したくない場合は、そのコンテンツが矩形の 4 つの角のいずれかに配置されるように、9 スライスの拡大 / 縮小のグリッド境界線を設定する必要があります。

ActionScript の場合、表示オブジェクトの scale9Grid プロパティの値を設定すると、そのオブジェクトに対する 9 スライスの拡大 / 縮小がオンになり、オブジェクトのスケール 9 グリッドにおける矩形のサイズが定義されます。scale9Grid プロパティの値として、Rectangle クラスのインスタンスを次のように使用します。

myButton.scale9Grid = new Rectangle(32, 27, 71, 64);

Rectangle コンストラクタの 4 つのパラメータは、x 座標、y 座標、幅、高さです。この例の矩形の左上隅は、myButton という表示オブジェクト上の x: 32、y: 27 に配置されます。この矩形の幅は 71 ピクセル、高さは 65 ピクセルです (従って、その右端は表示オブジェクト上の x 座標 103、下端は表示オブジェクト上の y 座標 92 になります)。


角丸の矩形のイメージ。白い実線の矩形がこの上に重なり、ActionScript scale9Grid プロパティとして使用される矩形領域を示しています。

Rectangle インスタンスによって定義される領域に含まれる実際の領域は、スケール 9 グリッドの中央部の矩形を表します。次に示すように、他の部分の矩形は Rectangle インスタンスの各辺を拡張することにより、Flash Player で算出されます。


角丸の矩形のイメージ。白い実線の矩形がこの上に重なり、scale9Grid プロパティとして使用される矩形領域を表しています。また、破線が矩形から延長されて、Flash Player が他の 9 スライスの拡大 / 縮小領域を算出する方法を示しています。

この例では、ボタンを拡大 / 縮小しても角丸の部分は変化しませんが、他の領域は拡大 / 縮小に合わせて調整されます。


3 つの角丸の矩形のイメージ。9 スライスの拡大 / 縮小を使用して丸い角を維持する方法を示しています。


 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000157.html