TWaver - 專注UI技術(shù)

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

          Flex中定制帶圖標的Tooltip

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

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


          下面我們來細細分析一下這個功能的實現(xiàn)。tooltip的特點是當鼠標滑過時顯示,滑出時不顯示。因此我們可以定義一個tooltip組件,監(jiān)聽network的mouse move事件,如果鼠標下有網(wǎng)元,就顯示tooltip組件并動態(tài)計算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

          我們來詳細了解一下如何來實現(xiàn)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//設(shè)置畫筆的線寬為1
          5var lineWidth:Number = 1;
          6//設(shè)置畫筆的樣式
          7g.lineStyle(lineWidth, 0, 0.5, true, "normal", CapsStyle.ROUND, JointStyle.ROUND);
          8//設(shè)置填充色
          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就定制好了,最后還需要將網(wǎng)元和tooltip上顯示的內(nèi)容綁定
          1link.setClient('message', '3333M');
          2customTooltip.setText(element.getClient('message'));

          完整代碼見附件:CustomTooltipDemo

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


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 前郭尔| 平远县| 九江县| 东乌珠穆沁旗| 会昌县| 黄大仙区| 台北县| 渝中区| 凭祥市| 边坝县| 西昌市| 广河县| 西畴县| 嵩明县| 绵竹市| 平果县| 监利县| 周口市| 海安县| 永嘉县| 潜山县| 衡南县| 喀喇沁旗| 永年县| 昌都县| 宝山区| 藁城市| 临清市| 保亭| 诸城市| 商南县| 义乌市| 余庆县| 云林县| 山西省| 太仓市| 云霄县| 盐城市| 盱眙县| 阜阳市| 石楼县|