<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

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


    網站導航:
     
    主站蜘蛛池模板: 亚洲视频精品在线观看| 亚洲一久久久久久久久| 999国内精品永久免费视频| 亚洲色在线无码国产精品不卡| 国产男女猛烈无遮挡免费视频网站| 国产免费播放一区二区| 亚洲fuli在线观看| 亚洲午夜精品久久久久久浪潮| 2019中文字幕在线电影免费| 亚洲AV日韩AV无码污污网站| 一本色道久久综合亚洲精品| 无码国产精品一区二区免费| 一级女性全黄久久生活片免费| 亚洲欧洲精品久久| 亚洲AV蜜桃永久无码精品| 69视频免费在线观看| 香蕉国产在线观看免费| 亚洲专区中文字幕| 亚洲精品国产精品乱码在线观看| 国产成人A在线观看视频免费| 久久久久久久国产免费看| 国产亚洲精品bv在线观看| 亚洲AV无码乱码国产麻豆 | 国产免费av片在线无码免费看| a级毛片无码免费真人久久| 亚洲中文字幕久久久一区| 亚洲成av人影院| 国产性生交xxxxx免费| 91人成网站色www免费下载| xvideos永久免费入口| 亚洲一本到无码av中文字幕| 亚洲卡一卡2卡三卡4卡无卡三| www.亚洲色图| 香蕉高清免费永久在线视频| 日本zzzzwww大片免费| 182tv免费视频在线观看| 五级黄18以上免费看| 精品久久久久久久久亚洲偷窥女厕| 亚洲色图校园春色| 亚洲AV无码一区二区三区系列| 亚洲AV无码专区日韩|