开发者

ActionScript 3 feather vector

开发者 https://www.devze.com 2023-04-07 02:17 出处:网络
I\'ve been looking at gradient masks to add a feathered/blurred effect to the edges of some shapes I\'m drawing in AS3 (only with code) but I need it to work on squares/rectangles as well 开发者_运维知

I've been looking at gradient masks to add a feathered/blurred effect to the edges of some shapes I'm drawing in AS3 (only with code) but I need it to work on squares/rectangles as well 开发者_运维知识库as circles.

Is there any kind of matrix that allows for this type of transformation? I could really use some guidance.

The target is to keep the file size down which means I don't want to add any PNG's to use as masks.

Thanks in advance.

[EDIT]

I've put the code that I'm using to draw the shape and I'm trying to put a feathered edge to each shape (except for cases 3 and 4 which I'm trying to draw shapes with for a different product type) The variable imageCont is the container for the image I'm trying to mask. But I don't seem to be able to put a feathered edge on either the circles/ovals or on the rectangle.

public function drawMask (drawI:int, clipWidth:int, clipHeight:int) {

        var maskingShape:Shape = new Shape();
        this.addChild(maskingShape);
        maskingShape.x = 0;
        maskingShape.y = 0;

        var matr:Matrix = new Matrix();
        var colors:Array = [0xFFFFFF, 0xFFFFFF];
        var alphas:Array = [1, 0];
        var ratios:Array = [200,255];
        matr.createGradientBox( clipWidth, clipHeight );

        //Calculate the positions automatically so they're centered
        var centerX = 250 - (clipWidth / 2);
        var centerY = 250 - (clipHeight / 2);

        maskingShape.graphics.lineStyle();
        //Only draw what we wanted..
        switch ( drawI ) {
            case 1:
                showBalloonApp();
                maskingShape.graphics.beginGradientFill ( GradientType.RADIAL, colors, alphas, ratios, matr );
                maskingShape.graphics.drawEllipse ( centerX, centerY, clipWidth, clipHeight );
            break;
            case 2:
                showBalloonApp();
                maskingShape.graphics.beginGradientFill ( GradientType.RADIAL, colors, alphas, ratios, matr );
                maskingShape.graphics.drawRoundRect ( centerX, centerY, clipWidth, clipHeight, 100, 100 );
            break;
            case 3:
                hideBalloonApp();
                //verticle shadow
                maskingShape.graphics.beginFill ( 0x3B3B3B, 0.65 );
                maskingShape.graphics.drawRect ( ( centerX + clipWidth - 30 ), centerY, 30, clipHeight );
                maskingShape.graphics.endFill();
                //horizontal shadow
                maskingShape.graphics.beginFill ( 0x3B3B3B, 0.65 );
                maskingShape.graphics.drawRect ( centerX, ( centerY + clipHeight - 30 ), clipWidth, 30 );
                maskingShape.graphics.endFill();
                //rectangle
                maskingShape.graphics.drawRect ( centerX, centerY, clipWidth, clipHeight );
            break;
            case 4:
                hideBalloonApp();
                //verticle shadow
                maskingShape.graphics.beginFill ( 0x3B3B3B, .65 );
                maskingShape.graphics.drawRect ( ( centerX + clipWidth - 20 ), centerY, 20, clipHeight );
                maskingShape.graphics.endFill();
                //horizontal shadow
                maskingShape.graphics.beginFill ( 0x3B3B3B, .65 );
                maskingShape.graphics.drawRect ( centerX, ( centerY + clipHeight - 20 ), clipWidth, 20 );
                maskingShape.graphics.endFill();
                //rectangle
                maskingShape.graphics.drawRect ( centerX, centerY, clipWidth, clipHeight );
            break;
            default:
                showBalloonApp( );
                maskingShape.graphics.beginGradientFill ( GradientType.RADIAL, colors, alphas, ratios, matr );
                maskingShape.graphics.drawEllipse ( centerX, centerY, clipWidth, clipHeight );
            break;
        }
        //End the filling process
        maskingShape.graphics.endFill ( );

        //Cache them as Bitmap items
        imageCont.cacheAsBitmap = true;
        maskingShape.cacheAsBitmap = true;

        //Apply the mask
        imageCont.mask = maskingShape;
    }


Since you don't supply any code or info on what you have tried, it is a bit difficult to know how to answers, so I'll start with some of the basics - that both the mask and the masked DisplayObject has be be bitmaps for gradient masks to work, in the line of this schematic code:

gradientMask.cacheAsBitmap = true;
drawing.cacheAsBitmap = true;
drawing.mask = gradientMask;
0

精彩评论

暂无评论...
验证码 换一张
取 消