シェイプのサンプル

このサンプルでは、 1 つの DefineShape タグを使って、シェイプの集まりを描画します。

ShapeExample.png

赤い円、赤い四角形、緑の角丸四角形は閉じられたパスです。 カーブのついた線は開いたパスです。 赤い四角形は全てまっすぐな線からできています。 赤い円は曲がった線から、緑の角丸四角形はその両方からできています。

単色赤、単色緑の 2 つの塗りスタイルがあり、 1 ピクセル黒、2 ピクセル黒の 2 つの線スタイルがあります。

赤い円、赤い四角形は両方とも同じ線と塗りのスタイルを使用しています。 角丸四角形と曲がった線は同じ線スタイルを持っています。

SWF ファイルフォーマット上ではこれらがどのようになっているか説明します。

塗りスタイルの定義

  1. 最初に 2 つの塗りスタイル、単色赤と単色緑は FILLSTYLEARRAY で定義されます。
  2. 続く LINESTYLEARRAY により 1 ピクセル黒、2 ピクセル黒の線が定義されます。
  3. 次にシェイプレコードの配列が続きます。

全てのシェイプレコードは同じような構造でできていますが、色んな種類があります。 曲がった線、まっすぐな線、スタイルの変更、描画位置の変更等が定義できます。

曲がった線の定義

  1. 最初のシェイプレコードで 2 ピクセル幅の線を選択し、 StateMoveTo フラグにより描画位置を曲がった線の一番上に移動します。
  2. 次のシェイプレコードで曲がった線を定義し、線の一番下の端へ線を引きます。 パスは閉じられません。

赤い四角形

  1. 次のシェイプレコードで 1 ピクセル幅の線、赤い塗りを選択し、 描画位置を赤い四角形の左上に移動します。
  2. 続く 4 つのシェイプレコードでまっすぐな線を定義します。 最後の線は左上に戻ってくる必要があります。 Flash Player は閉じた図形を明示的に連結することを要求します。 そのため、最初と最後の点を同じ座標にする必要があります。

赤い円

  1. 次のシェイプレコードは線と塗りのスタイルを変更しませんが、 描画位置を赤い円の一番上に移動させます。
  2. 続く 8 つのシェイプレコードで曲がった線を定義し、円を描きます。 また、赤い四角形と同じように最初と最後の座標を同じ位置にします。

緑の角丸四角形

  1. 次のシェイプレコードで 2 ピクセル幅の線、緑の塗りを選択し、 描画位置を角丸四角形の左上に移動します。
  2. 続く 12 個のシェイプレコードでまっすぐな線と曲がった線を組み合わせ、 角丸四角形を定義します。ここでも、最初と最後の座標を同じ位置にします。

移動


添付ファイル: fileShapeExample.png 275件 [詳細]

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-10-27 (日) 17:36:49 (2408d)