Question

I need draw rectangle with two circle holes inside. The problem is in circles interception. I want them to join together and cut from background, but they seems to be XORed:

At first I tried drawRect and DrawCircle:

graphics.beginFill(0, 0.5);
graphics.drawRect(0, 0, width, height);
graphics.drawCircle(width/2, height/2, 50);
graphics.drawCircle(width/2-30, height/2-30, 50);
graphics.endFill();

Then I switched to drawPath, but no luck too:

graphics.beginFill(0, 0.5);
var c1:Object = getCirclePath(width/2-30, height/2-30, 50);
var c2:Object = getCirclePath(width/2, height/2, 50);

graphics.drawPath(new <int>[
        GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO,
        GraphicsPathCommand.LINE_TO, GraphicsPathCommand.LINE_TO,
        GraphicsPathCommand.LINE_TO],
    new <Number>[0, 0, myCanvas.width, 0, myCanvas.width, myCanvas.height,
        0, myCanvas.height, 0, 0]);

myCanvas.graphics.drawPath(c1.commands, c1.data);
myCanvas.graphics.drawPath(c2.commands, c2.data);

graphics.endFill();

here getCirclePath returns object with points to draw polygon which looks like circle. Also I tried different combinations of GraphicsPathWinding constants, but no luck.

Any suggestions how to draw two intersecting circle holes in graphics?

Answer 1

If you want to draw more than one circle without the paths that cross each other “XOR”-ing, you should beginFill(...) and endFill() per shapes that you draw.

I haven’t tested, but that would be my guess to properly render overlapping shapes.

— EDIT —

link to demo: http://bit.ly/vBW1ag

How about using blendmodes?

Try to set your scene up like this:

• The container for your rect and the circles has a blendMode of BlendMode.LAYER;
• Your rectangle is a child of the container;
• You create circles that are child of the container ABOVE the rectangle, and make their blendMode BlendMode.ERASE;

Once you start Tweening them, you should get the animated effect.

See the below example (you can toss it into a new project to see it running)

package 
{
    import flash.display.BlendMode;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.utils.getTimer;

    public class Main extends Sprite 
    {
    private var _rect:Shape;
    private var _circles:Array;
    private var _container:Sprite;
    private var _subContainer:Sprite;
    private var _numOfCircles:int = 2;

    public function Main():void 
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        // entry point

        createContainers();
        createRect( 256, 256 );
        createCircles( 40 );

        centerSetup();

        stage.addEventListener(Event.ENTER_FRAME, onUpdate);
    }

    private function createContainers():void 
    {
        _container =    new Sprite();
        _container.blendMode =  BlendMode.LAYER;

        addChild(_container);

        _subContainer = new Sprite();
        _subContainer.blendMode =   BlendMode.ERASE;
        _container.addChild(_subContainer);
    }

    private function createRect(pWidth:Number, pHeight:Number):void 
    {
        _rect = new Shape();

        var g:Graphics =    _rect.graphics;
        g.beginFill(0, 0.5);
        g.drawRect(0, 0, pWidth, pHeight);
        g.endFill();

        /*
         * The canvas that must have the "hole" punched through
         * MUST appear as the first child in the DisplayList.
         */
        _container.addChildAt( _rect, 0 );
    }


    private function createCircles( pRadius:Number ):void 
    {
        var circle:Shape;
        var g:Graphics;

        _circles =  [];

        for (var n:int = _numOfCircles; --n >= 0; ) {
            circle =    new Shape();
            g =         circle.graphics;
            g.beginFill(0xffffff, 1);
            g.drawCircle(0, 0, pRadius);
            g.endFill();


            _subContainer.addChild( circle );
            _circles.push( circle );
        }
    }


    private function centerSetup():void 
    {
        _container.x =  (stage.stageWidth - _rect.width) * .5;
        _container.y =  (stage.stageHeight - _rect.height) * .5;
    }

    private function onUpdate(e:Event):void 
    {
        var circle:Shape;
        var currentTime:Number =    getTimer() * .001;
        var amplitude:Number =      50;
        var direction:int;

        var halfWidth:int =     _rect.width * .5;
        var halfHeight:int =    _rect.height * .5;

        for (var n:int = _numOfCircles; --n >= 0; ) {
            circle =    _circles[n] as Shape;
            direction = (n % 2) == 0 ? 1 : -1;
            circle.x =  halfWidth + Math.cos(currentTime*direction + n) * amplitude;
            circle.y =  halfHeight + Math.sin(currentTime*direction + n) * amplitude;
        }
    }

}

}