FullScreenEvent类叠加元素

Question

更新：

我使用BitmapImage覆盖两个png文件& GlowFilter在一个名为remoteVideoDisplay的元素上覆盖文本。当我点击我的全屏按钮(函数在下面)，我的BitmapImage覆盖不在全屏模式的右下角：http://imgur.com/a/1QZXa。

来源，没有我的补充：https://github.com/MonaSolutions/MonaClients/blob/master/VideoPhone/src/VideoPhone.mxml

全屏功能：

        protected function fullScreenButton_clickHandler(event:MouseEvent):void
        {
            videoBox.removeElement(remoteVideoDisplay);
            videoBox.removeElement(overlayBox);

            stage.addChild(remoteVideoDisplay);
            stage.addChild(overlayBox);

            stage.displayState = StageDisplayState.FULL_SCREEN;
            stage.scaleMode=StageScaleMode.NO_SCALE;

            overlayBox.width = stage.stageWidth;
            overlayBox.height = stage.stageHeight;
            overlayBox.validateDisplayList();

            remoteVideo.width = stage.stageWidth;
            remoteVideo.height = stage.stageHeight;
            remoteVideoDisplay.width = stage.stageWidth;
            remoteVideoDisplay.height = stage.stageHeight;

            stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                 
        }

        protected function fullScreenHandler(event:FullScreenEvent):void
        {
            if(!event.fullScreen)
            {
                stage.removeChild(remoteVideoDisplay);
                stage.removeChild(overlayBox);

                videoBox.addElement(remoteVideoDisplay);
                videoBox.addElement(overlayBox);

                overlayBox.width = 320;
                overlayBox.height = 40;

                remoteVideo.width = videoBox.width;
                remoteVideo.height = videoBox.height;
                remoteVideoDisplay.percentWidth = remoteVideoDisplay.percentHeight = 100;

                stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                  
            }
        }

覆盖：

<s:HGroup>
    <s:Group id="videoBox" width="320" height="240">
        <s:Group id="overlayBox" width="320" height="40" depth="1">
            <mx:Label alpha=".8" color="0xffffff" 
                filters="{[new GlowFilter(0x0167bb,1,4,4,8,1)]}"
                text=" Version: 123456"/>                
            <s:BitmapImage id="runtimeimg1" right="81" bottom="2" width="23" height="24" alpha=".6" source="01.png"/>
            <s:BitmapImage id="runtimeimg2" right="56" bottom="2" width="24" height="24" alpha=".6" source="02.png"/>
        </s:Group>
        <mx:VideoDisplay id="remoteVideoDisplay" width="100%" height="100%" depth="0"/>
    </s:Group>
</s:HGroup>

Button:

    <s:HGroup includeIn="CallEstablished" verticalAlign="middle">
        <s:Button id="fullscreenButton" includeIn="CallEstablished" label="FULLSCREEN"
                  click="fullScreenButton_clickHandler(event)" enabled="true"/>
    </s:HGroup>

库(导入)：

        import flash.events.SampleDataEvent;

        import mx.charts.chartClasses.StackedSeries;
        import mx.collections.ArrayList;
        import mx.controls.Alert;
        import mx.core.FlexGlobals;
        import mx.formatters.DateFormatter;
        import flash.filters.GlowFilter;
        import flash.filters.BitmapFilterQuality;
        import flash.filters.BitmapFilterType;
        import mx.rpc.http.HTTPService;

        import flash.display.Sprite;
        import flash.net.navigateToURL;
        import flash.net.URLRequest;
        import flash.net.URLRequestMethod;
        import flash.net.URLVariables;


        // Libraries for Brightness Contrast Hue Saturation

        import flash.display.Sprite;
        import fl.motion.AdjustColor;
        import flash.filters.ColorMatrixFilter;
        import fl.events.SliderEvent;   
        import flash.external.ExternalInterface;

Answer 1

好的，我认为最简单的方法是使用一个Group来放置你的覆盖，然后把它作为你的视频对象从舞台上添加和删除：

<s:HGroup>
    <s:Group id="videoBox" width="320" height="240">
        <s:Group id="overlayBox" width="320" height="40" depth="1">
            <mx:Label alpha=".8" color="0xffffff" 
                filters="{[new GlowFilter(0x0167bb,1,4,4,8,1)]}"
                text=" Version: 123456"/>                
            <s:BitmapImage id="runtimeimg1" right="81" bottom="2" width="23" height="24" alpha=".6" source="01.png"/>
            <s:BitmapImage id="runtimeimg2" right="56" bottom="2" width="24" height="24" alpha=".6" source="02.png"/>
        </s:Group>
        <mx:VideoDisplay id="remoteVideoDisplay" width="100%" height="100%" depth="0"/>
    </s:Group>
</s:HGroup>

然后

protected function fullScreenButton_clickHandler(event:MouseEvent):void
{
    videoBox.removeElement(remoteVideoDisplay);
    videoBox.removeElement(overlayBox);

    stage.addChild(remoteVideoDisplay);
    stage.addChild(overlayBox);

    stage.displayState = StageDisplayState.FULL_SCREEN;
    stage.scaleMode=StageScaleMode.NO_SCALE;

    remoteVideo.width = stage.stageWidth;
    remoteVideo.height = stage.stageHeight;
    remoteVideoDisplay.width = stage.stageWidth;
    remoteVideoDisplay.height = stage.stageHeight;

    stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                 
}

protected function fullScreenHandler(event:FullScreenEvent):void
{
    if(!event.fullScreen)
    {
        stage.removeChild(remoteVideoDisplay);
        stage.removeChild(overlayBox);

        videoBox.addElement(remoteVideoDisplay);
        videoBox.addElement(overlayBox);

        remoteVideo.width = videoBox.width;
        remoteVideo.height = videoBox.height;
        remoteVideoDisplay.percentWidth = remoteVideoDisplay.percentHeight = 100;

        stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                  
    }
}

编辑:

要避免火花Group调整大小问题，可以使用validateDisplayList()

验证儿童的位置和大小，并绘制其他视觉效果.

所以在你的情况下你可以：

protected function fullScreenButton_clickHandler(event:MouseEvent):void
{
    videoBox.removeElement(remoteVideoDisplay);
    videoBox.removeElement(overlayBox);

    stage.addChild(remoteVideoDisplay);
    stage.addChild(overlayBox);

    stage.displayState = StageDisplayState.FULL_SCREEN;
    stage.scaleMode=StageScaleMode.NO_SCALE;

    overlayBox.width = stage.stageWidth;
    overlayBox.height = stage.stageHeight;
    overlayBox.validateDisplayList();

    remoteVideo.width = stage.stageWidth;
    remoteVideo.height = stage.stageHeight;
    remoteVideoDisplay.width = stage.stageWidth;
    remoteVideoDisplay.height = stage.stageHeight;

    stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                 
}

protected function fullScreenHandler(event:FullScreenEvent):void
{
    if(!event.fullScreen)
    {
        stage.removeChild(remoteVideoDisplay);
        stage.removeChild(overlayBox);

        videoBox.addElement(remoteVideoDisplay);
        videoBox.addElement(overlayBox);

        overlayBox.width = 320;
        overlayBox.height = 40;

        remoteVideo.width = videoBox.width;
        remoteVideo.height = videoBox.height;
        remoteVideoDisplay.percentWidth = remoteVideoDisplay.percentHeight = 100;

        stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);                  
    }
}

希望能帮上忙。