zoukankan      html  css  js  c++  java
  • 如何监听Canvas上滚动条的出现或隐藏

    当Canvas中的内容比较满时,超出Canvas显示边界的内容会引起Vertical Scrollbar或者Horizontal Scrollbar的显示。

    Scrollbar会占据一些面积,从而可能会影响软件UI的布局。我们也许会根据Scrollbar的显示而对界面进行相应的调整。

    当我们浏览完Canvas的自带Event后,不难发现,关于滚动的只有一个Scroll事件。当用户拖动滚动条时,这个事件才会被激发。非我们所需。

    解决思路如下,

    1. Scrollbar的出现是因为页面面积的变化。会激发Canvas的updateComplete事件的激发;

    2. 并不是所有的updateComplete的事件的激发都会伴有Scrollbar的出现。那么我们可以在updateComplete的监听方程中来判断下Canvas的scrollbar的property是否为空;

    3. 在updateComplete的监听方程中,需要为2中的判断加一个flag,以标明是否scrollbar是由从无到有的出现。

    实现的大概代码如下,

     

    1. private function onInit():void{   
    2.   //config the UPDATE_COMPLETE event listener function   
    3.   this.addEventListener(FlexEvent.UPDATE_COMPLETE, traceScrollBar);   
    4. }   
    5.   
    6. /**  
    7.  * "isShowUp" is the flag for checking whether the scrollbar is added from null status  
    8.  * "can" is the scrollbar's container  
    9.  * @param event canvas' UPDATE_COMPLETE event  
    10.  */  
    11. private function traceScrollBar(event:FlexEvent):void{   
    12.   if(can.verticalScrollBar != null && !isShowUp){   
    13.     trace("The vertical scrollbar is added");   
    14.     isShowUp = true;   
    15.     return;   
    16.   }   
    17.   if(can.verticalScrollBar == null && isShowUp){   
    18.     isShowUp = false;   
    19.     return;   
    20.   }   
    21. }  
  • 相关阅读:
    php字符串相加
    elementUI的input输入一个字符就失去焦点问题
    js鸡尾酒排序算法
    js快速排序算法
    js冒泡排序算法改进
    js实现队列
    EXIF.js 读取图片的方向
    new Image().src资源重复请求问题
    canvas绘制圆图输出图片格式
    去掉"You are running Vue in development mode"提示
  • 原文地址:https://www.cnblogs.com/chocolate/p/1432425.html
Copyright © 2011-2022 走看看