2012-01-24 9 views
0

私は今、かなり長い間、この問題を持っていた、と私はちょうどFLEX - スクロールバー&ズーム

まず、私のプログラムの簡単な説明..それのまわりで私の頭を取得カント: それを使用することになるだろう複雑なシーンを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); 

     } 
+0

さらに詳しい情報が必要な場合は、尋ねてください。 =) –

答えて

0

私は右理解していれば、あなたはときに、ユーザーのズーム、スクロールボタンを移動したいです画像。しかし、このアクションのためのコードをどこに追加しますか?スクロールボタンを移動するコードを追加する必要があります。

+0

ちょっと、昨日スクロールバーコンポーネントを使っていくつかのテストを行った。私はデフォルトのスクロールバーでもう一度やり直すように切り替えましたが、何らかの理由で今すぐ動作します。奇妙な。私がそれをテストしている間、フレックスビルダーが私のアプリケーションを適切に構築していないと問題が起きたかもしれません。 あなたの時間に感謝します! =) –

関連する問題