<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    TWaver - 專注UI技術

    http://twaver.servasoft.com/
    posts - 171, comments - 191, trackbacks - 0, articles - 2
      BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

    Flex中定制帶圖標的Tooltip

    Posted on 2012-02-09 17:44 TWaver 閱讀(1858) 評論(0)  編輯  收藏
    “定制”無疑是TWaver中最大的一特色,無論是node,link,attachment,就連tooltip也同樣可以定制,“定制”可以顯示出更強更復雜的一些功能,今天給大家帶來了一個定制Tooltip的例子。

    啥也不多說,先看看效果:


    下面我們來細細分析一下這個功能的實現。tooltip的特點是當鼠標滑過時顯示,滑出時不顯示。因此我們可以定義一個tooltip組件,監聽network的mouse move事件,如果鼠標下有網元,就顯示tooltip組件并動態計算tooltip的位置,沒有就隱藏tooltip組件。
     1this.network.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void
     2updateToolTip(e);
     3});
     4
     5private function updateToolTip(e:MouseEvent):void {
     6    var element:IElement = network.getElementByMouseEvent(e, true5);
     7    if(lastElement == element){
     8        return;
     9    }

    10    lastElement = element;
    11    if(element is Link){
    12        var point:Point = network.getLogicalPoint(e);
    13        customTooltip.x = point.x - customTooltip.measuredWidth / 2;
    14        customTooltip.y = point.y - customTooltip.measuredHeight - 10;
    15        customTooltip.setText(element.getClient('message'));
    16        customTooltip.visible = true;
    17    }
    else{
    18        customTooltip.visible = false;
    19    }

    20}

    21

    我們來詳細了解一下如何來實現tooltip組件,首先定義一個tooltip類,繼承于canvas。這樣就可以將tooltip直接加到network.topCanvas上。
    1public class CustomToolTip extends Canvas {}

    tooltip組件上不需要交互動作和滾動條,因此可以將這些屏蔽:
    1public function CustomToolTip() {
    2 this.mouseEnabled = false;
    3 this.mouseChildren = false;
    4 this.horizontalScrollPolicy = ScrollPolicy.OFF;
    5 this.verticalScrollPolicy = ScrollPolicy.OFF;
    6 this.init();
    7}

    8

    重點是tooltip的繪制問題,我們需要將圖標和文字加到tooltip組件上,并且在添加圖標和文字時,需要計算一下位置
    1
    2var messageImage:Image = new Image();
    3messageImage.source =new messageIcon();
    4messageImage.x = _hmargin;
    5messageImage.y = _vmargin;
    6this.addChild(messageImage);
    7
    8_message = new Label();
    9_message.x = _hmargin + _iconWidth + _hgap;
    10_message.y = _vmargin;
    11this.addChild(_message);
    12

    然后我們需要繪制一個如tooltip形狀的圖形。先來分析一個,tooltip就是一個矩形框,為了好看一點可以搞個圓角矩形,矩形下方有一個小三角的圖形。接下來就可以通過畫筆將這些圖形繪制出來:
    1
    2//獲取畫筆
    3var g:Graphics = this.graphics;
    4//設置畫筆的線寬為1
    5var lineWidth:Number = 1;
    6//設置畫筆的樣式
    7g.lineStyle(lineWidth, 0, 0.5, true, "normal", CapsStyle.ROUND, JointStyle.ROUND);
    8//設置填充色
    9Utils.beginFill(g, 0xFFFFFF, 1, 0, 0, _width, _height, Consts.GRADIENT_LINEAR_EAST, 0xCCCCCC, 1);
    10//繪制圓角矩形
    11g.drawRoundRect(lineWidth, lineWidth, _width - lineWidth * 2, _height - lineWidth * 2 - _arrowHeight, 10, 10);
    12//繪制矩形下的小三角
    13g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
    14g.lineTo(_arrowStart, _height);
    15g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
    16g.endFill();
    17//繪制小三角和矩形的連接線的顏色
    18g.lineStyle(1, 0xFFFFFF);
    19g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
    20g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
    21

    這樣tooltip就定制好了,最后還需要將網元和tooltip上顯示的內容綁定
    1link.setClient('message', '3333M');
    2customTooltip.setText(element.getClient('message'));

    完整代碼見附件:CustomTooltipDemo

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: jizz免费观看| 亚洲国产主播精品极品网红 | 色欲国产麻豆一精品一AV一免费 | 羞羞视频免费网站日本| 日本一道一区二区免费看| 亚洲成av人无码亚洲成av人| 青青草国产免费久久久下载| 欧美日韩亚洲精品| 免费人成在线观看网站视频 | 国产AV无码专区亚洲AV手机麻豆 | 无码高潮少妇毛多水多水免费| 亚洲av无码一区二区三区天堂古代 | 国产日韩亚洲大尺度高清| 成全在线观看免费观看大全 | 日韩电影免费在线观看视频| 亚洲乱码无人区卡1卡2卡3| 韩国日本好看电影免费看| 日韩国产精品亚洲а∨天堂免| 亚洲国产小视频精品久久久三级| 一级午夜a毛片免费视频| 亚洲精品国产精品乱码不99| 97在线视频免费公开观看| 亚洲综合色区中文字幕| 宅男666在线永久免费观看| 一本大道一卡二大卡三卡免费| 亚洲人成人无码网www电影首页| 99热这里有免费国产精品| 亚洲91精品麻豆国产系列在线| 免费爱爱的视频太爽了| 国产99精品一区二区三区免费| 久久亚洲精品中文字幕无码| 性xxxxx免费视频播放| 国产精品亚洲综合| 国产亚洲精品a在线无码| 嫖丰满老熟妇AAAA片免费看| 老司机午夜性生免费福利 | 国产精品无码一二区免费| 又长又大又粗又硬3p免费视频| 亚洲国产精品久久久久婷婷老年| 欧美在线看片A免费观看| 一级毛片视频免费|