4

この質問をグーグルで検索するたびに、マスクとブレンドに関する紛らわしい情報が表示されますが、どれも簡単なことだと思うものに直接当てはまるようには見えません...

ここには3つのスプライトが含まれています...最下層のスプライトはほとんど背景です。背景の上に半透明のスプライトを重ねてから、一番上の3番目のスプライトを穴として機能させ、3番目のスプライトの内側の領域が完全に透明になり、背景のスプライトが完全に見えるようにします。

これを動的に行うにはどうすればよいですか(つまり、Actionscriptグラフィックス呼び出しを使用してマスキングスプライトと穴を動的に描画します)?

4

6 に答える 6

7

ずっと前のことですが、同じ問題を探している人のためだけに。実際には非常に簡単です(グラフィッククラスでスプライトを描画する限り)。

1)柔軟性のない穴あけ:

this.graphics.beginFill(0x666666);
this.graphics.drawRect(0,0,256, 256);
this.graphics.drawCircle(128,128,32);
this.graphics.endFill();

これにより、64pxの穴が開いた256x256の長方形が作成されます。

2)柔軟な穴あけ:

グラフィッククラスを使用していない場合は、明らかにこれは機能しません。その場合、私はと行きBlendMode.ERASEます。

var spr:Sprite = new Sprite();
var msk:Sprite = new Sprite();

addChild(spr);
spr.addChild(msk)

spr.graphics.beginFill(0x666666);
spr.graphics.drawRect(0,0,256, 256);
spr.graphics.endFill();

msk.graphics.beginFill(0x000000);
msk.graphics.drawEllipse(0,0,64,64);
msk.graphics.endFill();
msk.x = 128;
msk.y = 128;

spr.blendMode = BlendMode.LAYER;
msk.blendMode = BlendMode.ERASE;

BlendMode.ERASEを使用するときは、常に親コンテナのblendmodeをBlendMode.LAYERに設定する必要があります。そうしないと、機能しません。

これが誰かに役立つことを願っています

于 2012-03-28T15:24:18.840 に答える
0

OK、私が望むことは、半透明のレイヤーでdrawRectを2回呼び出すだけで簡単に実行できます... 1回は半透明の長方形を描画し、もう一度「穴」を描画します

詳細はこちら: http ://www.actionscript.org/forums/showthread.php3?p = 965632

正確にはマスクではありませんが、私の目的には十分です。

于 2010-02-04T00:12:52.870 に答える
0

このメソッドを確認してください。オプションの「穴」パラメータが可能です。これは、flex フレームワークの ProgrammaticSkin クラスにあります。

http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/skins/ProgrammaticSkin.as

/**
     *  Programatically draws a rectangle into this skin's Graphics object.
     *
     *  <p>The rectangle can have rounded corners.
     *  Its edges are stroked with the current line style
     *  of the Graphics object.
     *  It can have a solid color fill, a gradient fill, or no fill.
     *  A solid fill can have an alpha transparency.
     *  A gradient fill can be linear or radial. You can specify
     *  up to 15 colors and alpha values at specified points along
     *  the gradient, and you can specify a rotation angle
     *  or transformation matrix for the gradient.
     *  Finally, the rectangle can have a rounded rectangular hole
     *  carved out of it.</p>
     *
     *  <p>This versatile rectangle-drawing routine is used by many skins.
     *  It calls the <code>drawRect()</code> or
     *  <code>drawRoundRect()</code>
     *  methods (in the flash.display.Graphics class) to draw into this
     *  skin's Graphics object.</p>
     *
     *  @param x Horizontal position of upper-left corner
     *  of rectangle within this skin.
     *
     *  @param y Vertical position of upper-left corner
     *  of rectangle within this skin.
     *
     *  @param width Width of rectangle, in pixels.
     *
     *  @param height Height of rectangle, in pixels.
     *
     *  @param cornerRadius Corner radius/radii of rectangle.
     *  Can be <code>null</code>, a Number, or an Object.
     *  If it is <code>null</code>, it specifies that the corners should be square
     *  rather than rounded.
     *  If it is a Number, it specifies the same radius, in pixels,
     *  for all four corners.
     *  If it is an Object, it should have properties named
     *  <code>tl</code>, <code>tr</code>, <code>bl</code>, and
     *  <code>br</code>, whose values are Numbers specifying
     *  the radius, in pixels, for the top left, top right,
     *  bottom left, and bottom right corners.
     *  For example, you can pass a plain Object such as
     *  <code>{ tl: 5, tr: 5, bl: 0, br: 0 }</code>.
     *  The default value is null (square corners).
     *
     *  @param color The RGB color(s) for the fill.
     *  Can be <code>null</code>, a uint, or an Array.
     *  If it is <code>null</code>, the rectangle not filled.
     *  If it is a uint, it specifies an RGB fill color.
     *  For example, pass <code>0xFF0000</code> to fill with red.
     *  If it is an Array, it should contain uints
     *  specifying the gradient colors.
     *  For example, pass <code>[ 0xFF0000, 0xFFFF00, 0x0000FF ]</code>
     *  to fill with a red-to-yellow-to-blue gradient.
     *  You can specify up to 15 colors in the gradient.
     *  The default value is null (no fill).
     *
     *  @param alpha Alpha value(s) for the fill.
     *  Can be null, a Number, or an Array.
     *  This argument is ignored if <code>color</code> is null.
     *  If <code>color</code> is a uint specifying an RGB fill color,
     *  then <code>alpha</code> should be a Number specifying
     *  the transparency of the fill, where 0.0 is completely transparent
     *  and 1.0 is completely opaque.
     *  You can also pass null instead of 1.0 in this case
     *  to specify complete opaqueness.
     *  If <code>color</code> is an Array specifying gradient colors,
     *  then <code>alpha</code> should be an Array of Numbers, of the
     *  same length, that specifies the corresponding alpha values
     *  for the gradient.
     *  In this case, the default value is <code>null</code> (completely opaque).
     *
     *  @param gradientMatrix Matrix object used for the gradient fill. 
     *  The utility methods <code>horizontalGradientMatrix()</code>, 
     *  <code>verticalGradientMatrix()</code>, and
     *  <code>rotatedGradientMatrix()</code> can be used to create the value for 
     *  this parameter.
     *
     *  @param gradientType Type of gradient fill. The possible values are
     *  <code>GradientType.LINEAR</code> or <code>GradientType.RADIAL</code>.
     *  (The GradientType class is in the package flash.display.)
     *
     *  @param gradientRatios (optional default [0,255])
     *  Specifies the distribution of colors. The number of entries must match
     *  the number of colors defined in the <code>color</code> parameter.
     *  Each value defines the percentage of the width where the color is 
     *  sampled at 100%. The value 0 represents the left-hand position in 
     *  the gradient box, and 255 represents the right-hand position in the 
     *  gradient box. 
     *
     *  @param hole (optional) A rounded rectangular hole
     *  that should be carved out of the middle
     *  of the otherwise solid rounded rectangle
     *  { x: #, y: #, w: #, h: #, r: # or { br: #, bl: #, tl: #, tr: # } }
     *
     *  @see flash.display.Graphics#beginGradientFill()
     *  
     *  @langversion 3.0
     *  @playerversion Flash 9
     *  @playerversion AIR 1.1
     *  @productversion Flex 3
     */
    protected function drawRoundRect(
                            x:Number, y:Number, width:Number, height:Number,
                            cornerRadius:Object = null,
                            color:Object = null,
                            alpha:Object = null,
                            gradientMatrix:Matrix = null,
                            gradientType:String = "linear",
                            gradientRatios:Array /* of Number */ = null,
                            hole:Object = null):void
    {
        var g:Graphics = graphics;

        // Quick exit if weight or height is zero.
        // This happens when scaling a component to a very small value,
        // which then gets rounded to 0.
        if (width == 0 || height == 0)
            return;

        // If color is an object then allow for complex fills.
        if (color !== null)
        {
            if (color is uint)
            {
                g.beginFill(uint(color), Number(alpha));
            }
            else if (color is Array)
            {
                var alphas:Array = alpha is Array ?
                                   alpha as Array :
                                   [ alpha, alpha ];

                if (!gradientRatios)
                    gradientRatios = [ 0, 0xFF ];

                g.beginGradientFill(gradientType,
                                    color as Array, alphas,
                                    gradientRatios, gradientMatrix);
            }
        }

        var ellipseSize:Number;

        // Stroke the rectangle.
        if (!cornerRadius)
        {
            g.drawRect(x, y, width, height);
        }
        else if (cornerRadius is Number)
        {
            ellipseSize = Number(cornerRadius) * 2;
            g.drawRoundRect(x, y, width, height, 
                            ellipseSize, ellipseSize);
        }
        else
        {
            GraphicsUtil.drawRoundRectComplex(g,
                                   x, y, width, height,
                                   cornerRadius.tl, cornerRadius.tr,
                                   cornerRadius.bl, cornerRadius.br);
        }

        // Carve a rectangular hole out of the middle of the rounded rect.
        if (hole)
        {
            var holeR:Object = hole.r;
            if (holeR is Number)
            {
                ellipseSize = Number(holeR) * 2;
                g.drawRoundRect(hole.x, hole.y, hole.w, hole.h, 
                                ellipseSize, ellipseSize);
            }
            else
            {
                GraphicsUtil.drawRoundRectComplex(g,
                                       hole.x, hole.y, hole.w, hole.h,
                                       holeR.tl, holeR.tr, holeR.bl, holeR.br);
            }   
        }

        if (color !== null)
            g.endFill();
    }       
}
于 2010-02-08T03:08:52.953 に答える
0

AS 開発者ではありませんが、これを見てください: http://code.google.com/p/gpcas/

これにより、2 つのポリゴンに対してブール演算の「カットアウト」操作を実行できるようになります。

于 2010-02-03T22:32:43.937 に答える