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>

点击向上和向下箭头..我想在画布上滚动。我该怎么做？

我试过这个，但没有用

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组件而不是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);
}

如何在flex中在画布上添加垂直滚动？

1 个答案: