は、ActionScript 3のFlash CS6

Question

enter image description here

こんにちはみんな、私はレンガの大きさごとに2次元パターンを作成したいと思います で四角形や線を使用して、2D繰り返しパターンを作成します。この例では190長さX 60高さです。私は400の長さ×300の高さであるプレビューエリアを持っています。私はプレビュー領域のマスクを持っているので、このプレビュー領域外のものは隠されます。これまでのコードでは、最初の長方形/レンガを、プレビュームービークリップの子ムービークリップとしてプレビューエリアに正しく、位置的に表示しています。 しかし、このレンガのムービークリップを複製または複製して、添付の画像に示されているパターンを実現する簡単な方法が見つかりません。このアクションは、ボタンのクリックイベントで発生します。どんな種類の助けでも大歓迎です。以前に表示されたプレビューの場合は、このプレビュー領域を最初にクリーンにしたいと思います。私はremovechildのためのforループを持っていますが、それは一度に1つだけ削除します。 ありがとうございます。

//Checks if all required textfields have valid data -- if yes then true else false 
if(Vdata == true){ 
    //Here I should check and clean the preview area and any children previously added. 
    var Pview_mc:MovieClip = new MovieClip; //Main moiveclip which holds all rectangles. 
    Pview_mc.name = "Pview_mc"; //name the instance so that easy to remove later on. 
    var rectangle:MovieClip = new MovieClip; // initializing the variable 
    rectangle.graphics.lineStyle(0, 0x990000, 1); //defines line style (thickness, colour, alpha) 
    rectangle.graphics.drawRect(0, 0, Number(Txt_ST.text),Number(Txt_HT.text)); // (x spacing, y spacing, width, height) 
    Pview_mc.addChild(rectangle); // adds rectangle to Pview_mc movieclip 
    Preview_Area.addChild(Pview_mc); // adds the Pview_mc to the Preview_Area MovieClip 
    rectangle.y = rectangle.y-Number(Txt_HT.text); // positions the rectangle. 
} 

Answer 1

レンガパターン描画機能を素早く汚れた実装にしました。最適化されておらず、必要なパターンだけを描画します。

簡単にするために、私は子オブジェクトを使用せず、MovieClipに直接描画します。この関数は、各呼び出しでパターンをクリアして描画します。次の図は、可能な結果を​​示しています。

Draw関数：

// graphics  - Object to draw to 
// origin_x  - Center of the top left brick 
// origin_y  - Center of the top left brick 
// brick_count_u - Number of bricks along the x-axis 
// brick_count_v - Number of brick along the y-axis 
// brick_w  - Brick width 
// brick_h  - Brick height 
// gap   - Brick gap 
function draw_bricks(
    graphics  :Graphics, 
    origin_x  :Number, 
    origin_y  :Number, 
    brick_count_u :int, 
    brick_count_v :int, 
    brick_w  :Number, 
    brick_h  :Number, 
    gap   :Number) :void 
{ 
    graphics.clear(); 
    graphics.lineStyle(0.0, 0x00FF00, 1.0); 
    // 
    // For every brick along y-axis 
    for (var v :int = 0; v < brick_count_v; v += 1) { 
     // 
     //   [ row ordinate ]---| 
     //        | 
     // [ base offset ]---|   | 
     //     |   | 
     //     v   v 
     var brick_y :Number = origin_y + ((brick_h + gap) * v); 
     // 
     // For every brick along x-axis 
     for (var u :int = 0; u < brick_count_u; u += 1) { 
      // 
      //   [ odd row offset ]---| 
      //        |  [ column abscissa ]---| 
      // [ base offset ]---|   |       | 
      //     |   |       | 
      //     v   v       v 
      var brick_x :Number = origin_x - (brick_w * 0.5 * (v % 2)) + ((brick_w + gap) * u); 
      // 
      // Draw brick centered at {brick_x, brick_y} 
      graphics.drawRect(brick_x - brick_w * 0.5, brick_y - brick_h * 0.5, brick_w, brick_h); 
     } 
    } 
} 

用途：

var bricks :MovieClip = new MovieClip; 
addChild(bricks); 
draw_bricks(bricks.graphics, 0.0, 0.0, 8, 8, 190.0, 60.0, 10.0); 

あなたが実際にこのレンガの壁の表示オブジェクト階層を必要としない場合、私はあなたが使用することをお勧めこのアプローチは、あなたが削除する必要はありませんまたはクレア任意の "レンガのオブジェクト"、あなたはちょうど単一のマスク表示オブジェクトを更新することができます。

注：各軸の最適なブリック数を計算する必要があります。
注：フラッシュのx軸のポイントは右、y軸のポイントは下向きです。