egret mask 显示异常

我想画一个圆形头像, 外围有一圈白边, 像这样:

(橙色背景是用来显示白圈的, 不属于头像部分)

我是这样写的: 建一个Avatar类,写一个common() 方法用来画这种头像:
先画一个大点的圆, 然后放上照片, 然后再画一个小一点的圆作为照片的mask;
然后就可以在别的地方调用了

common方法是这么写的:

        var circle = new egret.Sprite();
        // mask
        var circleMask = new egret.Shape();
        circle.graphics.beginFill(0xffffff);
        circle.graphics.drawCircle(this.centerX, this.centerY, this.diameter/2);
        circle.graphics.endFill();

        circleMask.graphics.beginFill(0x000000);
        var maskDiameter: number = this.diameter -12;
        circleMask.graphics.drawCircle(this.centerX, this.centerY, maskDiameter/2);
        circleMask.graphics.endFill();

        circle.addChild(this.photo);
        circle.addChild(circleMask);
        this.photo.mask = circleMask;
        this.addChild(circle);

然后我想在一个弹出框里画一个头像, 关键代码差不读是这样:

        var avatar = new Avatar("test_avatar_jppg", 260); //图片和直径
        avatar.common();    // 调用上面说的common()方法
        avatar.x = this.dialogX + this.dialogWidth/2 - avatar.width/2;
        avatar.y = this.dialogY + this.dialogHeight/2 + avatar.height/2;
        this.addChild(avatar);

理想效果应该是这个样子:
点击开始(当然以后会改成别的触发条件) 弹出一个对话框, 对话框上有个头像:

不幸的事情发生了, 我点开始的时候他先给我这么个图然后我再点一下开始的时候它才给我显示上面那个对话框的图:

求大神帮我看看应该怎么搞