Question

我现在已经有这个问题很长一段时间了，我只是无法理解它...

首先，简要说明我的计划：它将被用于在3D中查看复杂的场景，但是为了使其在笔记本电脑上工作，它反而显示了对象的预渲染360度渲染。加载对象时，它首先将360帧缓冲到内存中，以便您可以平滑地围绕此对象旋转。释放鼠标按钮时，它会加载到该帧的高分辨率图像中。

然后，您应该可以放大并移动以更近距离地检查模型。

这里的问题是当我启用滚动条时它无法正常工作。首先，当我滚动水平滚动条时，我遇到了垂直滚动条移出图片的问题。

然后经过一些测试，它们现在可以保留在应有的位置，但是当我放大（将在下面发布代码）时，水平滚动条无法向左移动到足以显示整个图像。发生的事情是，当我放大时，滚动条保持在它的左侧位置，但是我放大了图像的中心（通过缩放容器来缩放。图像填充容器）。

我的问题可能只是因为我忽略了一些基本的理解。对不起，如果代码有点乱，我只做了一点点清理工作。我在下面发布的代码没有任何滚动条可见。

你可以看到我也尝试过使用滚动条组件，它以某种方式工作。但是我无法根据内容缩放滚动条，因此如果我放大或缩小，您在滚动条上拖动的手柄将是相同的......

非常感谢任何想帮助我解决这个问题的人！

如果需要，应用程序运行的图像： enter image description here

代码：

<mx:Panel x="0" y="0" width="100%" height="100%" titleIcon="@Embed('assets/img/cog_01.png')" title="vCog Subsea - Draugen Project">
    <mx:HDividedBox x="0" y="0" width="100%" height="100%" liveDragging="true">
        <mx1:TabNavigator width="30%" height="100%" chromeColor="#4B4B4B" tabHeight="20">
            <mx1:DividedBox width="100%" height="100%" label="Components" borderVisible="true">             
                <mx:VBox width="100%">
                    <mx:Tree id="treeView" x="0" y="0" width="100%" height="100%"
                             itemRenderer="components.CustomTreeItemRenderer"
                             paddingBottom="2" showRoot="true"
                             itemClick="treeItemClick(event)"
                             itemOpen="treeItemOpen(event)" />
                    <mx:Canvas width="100%" height="30" styleName="information">
                        <mx:CheckBox id="infoCheckBox" x="10" y="5" width="100%" label="Information"
                                     click="checkbox1_clickHandler(event)" enabled="true"
                                     selected="{infoview_visible}" styleName="infoCheckBox"/>
                    </mx:Canvas>
                </mx:VBox>
            </mx1:DividedBox>
        </mx1:TabNavigator>
        <mx:HBox width="100%" height="100%">
            <mx1:TabNavigator id="myTabs" width="100%" height="100%" dropShadowVisible="false" tabHeight="20">
                <mx1:DividedBox id="my3DView" width="100%" height="100%" 
                                label="3D View Main" borderVisible="true" >
                    <!-- CONTAINER -->
                    <mx:Canvas id="container" width="100%" height="100%"
                               resize="resizeHandler(event)" 
                               mouseWheel="videoBufferWheel(event)"
                               horizontalScrollPolicy="off" 
                               verticalScrollPolicy="off" >
                        <!-- CONTENT -->
                        <mx:Canvas id="content" 
                                   horizontalScrollPolicy="off" 
                                   verticalScrollPolicy="off">
                            <mx:Canvas id="videoCanvas" width="100%" height="100%"
                                       mouseDown="videoBufferMDown(event)"
                                       mouseMove="videoBufferMMove(event)"
                                       mouseUp="videoBufferMUp(event)" >

                                <s:Image id="imageBuffer" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
                                <s:Image id="imageFull" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch"/>
                                <s:Image id="imageMask" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />

                            </mx:Canvas> <!-- videoCanvas END -->
                        </mx:Canvas> <!-- CONTENT END -->

                        <!-- Scrollbars -->
                        <s:HScrollBar id="hScroll" bottom="0" left="0" right="16" maximum="100" minimum="-100"
                                      pageSize="100" change="scroll(event)" 
                                      visible="false" />
                        <s:VScrollBar id="vScroll" right="0" top="0"  bottom="16" maximum="100" minimum="-100" pageSize="100"
                                      change="scroll(event)"
                                      visible="false" />

                        <!-- Camera controlls -->
                        <mx:Panel id="panelCamera" visible="true" right="20"
                                  bottom="20" width="130" height="50"
                                  backgroundAlpha="0.6" backgroundColor="#383838"
                                  borderAlpha="0.5" chromeColor="#2A2A2A"
                                  contentBackgroundAlpha="1.0"
                                  contentBackgroundColor="#737373" cornerRadius="0"
                                  dropShadowVisible="false" focusColor="#999999"
                                  layout="absolute" styleName="panelCamera"
                                  symbolColor="#878787" title="Select camera">
                            <mx:Button id="btnTotal" x="10" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonTotalStyle" click="camTotalClick(event)"/>
                            <mx:Button id="btnClose" x="50" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonCloseStyle" click="camCloseClick(event)"/>
                            <mx:Button id="btnExploded" x="90" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonExplodedStyle" click="camExplodedClick(event)"/>

                        </mx:Panel>

                        <!-- Full/Color image loading bar -->
                        <mx:ProgressBar id="myProgressFull" y="10" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
                                        label="Downloading Image" fontSize="7" chromeColor="#6D5D52"
                                        fontWeight="normal" horizontalCenter="-8"
                                        labelPlacement="center"/>

                        <mx:ProgressBar id="myProgressColor" y="27" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
                                        label="Downloading Hilights" fontSize="7" chromeColor="#6D5D52"
                                        fontWeight="normal" horizontalCenter="-8"
                                        labelPlacement="center"/>

                        <!-- Main loading bar -->
                        <mx:Panel id="myLoadingPanel" top="100" width="520" height="107"
                                  backgroundAlpha="0.5" 
                                  backgroundColor="#3A3A3A"
                                  borderVisible="true" 
                                  contentBackgroundColor="#7E7E7E"
                                  dropShadowVisible="false" 
                                  fontWeight="normal" fontThickness="0" fontSize="10" color="#959595" 
                                  headerHeight="15"
                                  horizontalAlign="center" 
                                  horizontalCenter="0"
                                  layout="absolute"
                                  title="Downloading and buffering content..." 
                                  visible="false"
                                  verticalAlign="middle"
                                  titleIcon="@Embed('assets/img/loading_01.png')"
                                  >
                            <mx:ProgressBar id="myProgressBarTotal" y="10" width="500"
                                            label="Total progress" chromeColor="#474747"
                                            color="#FFFFFF" fontWeight="normal"
                                            horizontalCenter="0" indeterminate="false" mode="manual"
                                            labelPlacement="center"/>
                            <mx:ProgressBar id="myProgressBar" y="41" width="500"
                                            label="Downloading data" chromeColor="#6D5D52"
                                            fontWeight="normal" horizontalCenter="0"
                                            labelPlacement="center" source="_SWFLoader"/>
                            <mx:ProgressBar id="myProgressBar2" y="61" width="500"
                                            label="Buffering data" chromeColor="#75584A"
                                            color="#EB7738" fontWeight="normal"
                                            horizontalCenter="0" indeterminate="false" mode="manual"
                                            labelPlacement="center"/>

                            <mx:ProgressBar id="myProgressBarVisual" y="32" width="500" height="5" label=" "
                                            horizontalCenter="0" indeterminate="true"
                                            labelPlacement="center"/>
                        </mx:Panel>

                    </mx:Canvas> <!-- CONTAINER END -->
                </mx1:DividedBox>
                <mx1:DividedBox width="100%" height="100%" label="Main Map" borderVisible="true">
                    <mx:Canvas width="100%" height="100%" click="overviewClickHandler(event)" >
                        <s:Image id="overColor" width="100%" height="100%" source="assets/img/overview_color_001.png" scaleMode="letterbox" visible="false" />
                        <s:Image id="overFull" width="100%" height="100%" source="assets/img/overview_001.png" scaleMode="letterbox" smooth="true" />
                    </mx:Canvas>
                </mx1:DividedBox>
            </mx1:TabNavigator>
        </mx:HBox>          
    </mx:HDividedBox>
</mx:Panel>

功能：

        public function videoBufferWheel(event:MouseEvent):void{
            var delta:Number=(event.delta*myZoom)/300;
            if(myZoom+delta<1){
                delta=1-myZoom;
            }else if(myZoom+delta>3){
                delta=3-myZoom;
            }
            myZoom += delta;

            resizeHandler(null);

            event.stopImmediatePropagation();
        }

        public function resizeHandler(event:Event):void{
            var _w:Number=container.width-scrollerSize;
            var _h:Number=container.height-scrollerSize;
            if(_w/_h<aspect){
                content.height=_h*myZoom;
                content.width=(_h*myZoom)*aspect;
            }else{
                content.height=(_w*myZoom)/aspect;
                content.width=(_w*myZoom);          
            }
            content.x = (-content.width/2)+container.width/2+(hOffset*(container.width-content.width)/200);
            content.y = (-content.height/2)+container.height/2+(vOffset*(container.height-content.height)/200);

        }

Answer 1

如果我理解正确，您希望在用户缩放图像时移动滚动按钮。但是，您在哪里为此操作添加代码？我的意思是你应该添加一个代码来移动滚动按钮。

FLEX - Scrollbars＆amp;缩放

1 个答案: