Geek asks and answers

How to add vertical scroll on canvas in flex?

I have a canvas and inside this canvas there is Vgroup.i add dynamically graphic objects to this vgroup. After adding more than 4 graphic objects, I turn on the up and down arrows.

this is my canvas code.

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

this is all code

<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>

when we press the up and down arrows .. I want to scroll on the canvas. How can i do this?

I tried this one but didn't work

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


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

        }
+3
source share
1 answer

Hope this helps you

You need to set the height for your canvas component, for example height="120", because the elements are arranged in a vertical order, so height is required to include a vertical scrollbar.

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

Scroller Canvas ( 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);
}
0

More articles:


All Articles