使用带有 actionscript 3 Flash cs6 的矩形或线条创建 2D 重复图案

Question

enter image description here

大家好，我想根据砖块的大小创建一个二维图案。在这个例子中是 190 长 X 60 高。我有一个 400 长 X 300 高的预览区域。我有一个预览区域的遮罩，所以这个预览区域之外的任何东西都会被隐藏。到目前为止，我有一个代码可以将第一个矩形/砖块正确显示为预览动画片段的子动画片段，并按大小和位置将其显示到预览区域中。但是我找不到一种简单的方法来复制或克隆这个砖块动画片段来实现附图中显示的模式。此操作发生在按钮的单击事件上。非常感谢任何形式的帮助。对于之前显示的任何预览，我还想首先清理此预览区域。我有一个用于 removechild 的 for 循环，但它一次只删除一个。非常感谢。

//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。该函数在每次调用时清除并绘制图案。下图显示了可能的结果。

绘图函数：

// 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);

如果您实际上不需要此砖墙的显示对象层次结构，我建议您使用这种方法，因为这样您不需要删除或创建任何 "brick objects"，您可以只刷新单个屏蔽显示对象。

注意：您仍然需要计算每个轴的最佳积木数。
注意：请记住，在 flash 中，x 轴指向右侧，y 轴指向下方。

使用带有 actionscript 3 Flash cs6 的矩形或线条创建 2D 重复图案

create 2D repeated pattern using rectangle or lines with actionscript 3 Flash cs6

actionscript-3