FullScreenEvent class - 覆盖元素

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>

按钮：

    <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);                  
    }
}

编辑：

为避免 spark Group 大小调整问题，您可以使用 validateDisplayList()

Validates the position and size of children and draws other visuals ...

所以在你的情况下你可以这样做：

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);                  
    }
}

希望能帮到你。

FullScreenEvent class - 覆盖元素

FullScreenEvent class - overlaying elements

actionscript-3

flash

apache-flex

air