如何在flex中的畫布上添加垂直滾動？

Question

我有一個畫布，並在該畫布內有一個Vgroup.i動態圖形對象添加到該vgroup。添加超過4個圖形對象後，我啓用向上和向下箭頭。

這是我的畫布代碼。

  <mx:Canvas id="canvas" width="120"> 
      <s:VGroup id="levels" width="120"/> 
     </mx:Canvas> 

這是整個代碼

<s:VGroup> 
       <s:VGroup> 
        <s:HGroup> 
         <s:Spacer width="50"/> 
         <s:Image id="prev" source="../assets/navPrev.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false" 
           buttonMode="true" click="clickUpArrow()"/> 
        </s:HGroup> 

        <mx:Canvas id="canvas" width="120"> 
         <s:VGroup id="levels" width="120"/> 
        </mx:Canvas> 

        <s:HGroup> 
         <s:Spacer width="50"/> 
         <s:Image id="next" source="../assets/navNext.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false" 
           buttonMode="true" click="clickDownArrow()" /> 
        </s:HGroup> 
       </s:VGroup> 
     </s:VGroup> 

當向上和向下箭頭點擊..我想滾動canvas.How我能做到這一點？

我想這一個，但沒有奏效

private function clickUpArrow():void 
     { 
      canvas.verticalScrollPosition-=(levellength+10); 
     } 


     private function clickDownArrow():void 
     { 
      canvas.verticalScrollPosition +=(levellength+10); 

     } 

Answer 1

希望這會幫助你，

需要設置高度像height="120"畫布組成部分，因爲項目被安排在垂直順序，以便高度是強制性用於啓用垂直滾動條。

<mx:Canvas id="canvas" height="120"> 
    <s:VGroup id="levels" width="120"/>    
</mx:Canvas> 

更好，你需要使用Scroller Spark組件，而不是畫布（MX組件）像下面的標記。

<s:VGroup> 
    <s:VGroup> 
     <s:HGroup> 
      <s:Spacer width="50"/> 
      <s:Image id="prev" source="../assets/navPrev.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false" 
        buttonMode="true" click="clickUpArrow()"/> 
     </s:HGroup> 

     <s:Scroller id="scroller" height="120" width="150">    
      <s:VGroup id="levels" width="120"/> 
     </s:Scroller>   

     <s:HGroup> 
      <s:Spacer width="50"/> 
      <s:Image id="next" source="../assets/navNext.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false" 
        buttonMode="true" click="clickDownArrow()" /> 
     </s:HGroup> 
    </s:VGroup> 
</s:VGroup> 

向上和向下箭頭點擊處理這個樣子，

private function clickUpArrow():void 
{ 
    if(scroller.verticalScrollBar){ 
     scroller.verticalScrollBar.viewport.verticalScrollPosition -=(levellength+10); 
    } 

    //scroller.verticalScrollBar.changeValueByPage(false); 
} 

private function clickDownArrow():void 
{ 
    if(scroller.verticalScrollBar){ 
     scroller.verticalScrollBar.viewport.verticalScrollPosition -=(levellength+10); 
    } 

    //scroller.verticalScrollBar.changeValueByPage(true); 
}