Mar 27

Flex的tool tips中使用嵌入字体的例子

FlexAdd comments

Flex具有很强的表现力，除了可以将枯燥的数字用形象的图表来描画，而个性化字体的使用增加了其表现力。下面的例子演示了如何如何在一个tool tip中使用嵌入的字体。

让我们先来看一下Demo，输入框得到焦点或者鼠标移到输入框上（可以右键View Source或点击这里察看源代码）



下面是完整代码：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Style>
  9.         @font-face {
  10.             src: local("Comic Sans MS");
  11.             fontWeight: normal;
  12.             fontFamily: ComicSansMSEmbedded;
  13.         }
  14.  
  15.         .errorTip {
  16.             border-style: "errorTipAbove";
  17.             fontFamily: "ComicSansMSEmbedded";
  18.             fontSize: 12;
  19.             fontWeight: normal;
  20.         }
  21.     </mx:Style>
  22.  
  23.     <mx:Script>
  24.         <![CDATA[
  25.             import mx.events.ToolTipEvent;
  26.             import mx.controls.ToolTip;
  27.  
  28.             private function init():void {
  29.                 ToolTip.maxWidth = textInput.width;
  30.             }
  31.  
  32.             private function textInput_toolTipShown(evt:ToolTipEvent):void {
  33.                 var tt:ToolTip = evt.toolTip as ToolTip;
  34.                 tt.x = textInput.x;
  35.                 tt.y = (textInput.y - tt.height);
  36.                 tt.rotation = 5;
  37.             }
  38.         ]]>
  39.     </mx:Script>
  40.  
  41.     <mx:TextInput id="textInput" text="{new Date().toDateString()}"
  42.             errorString="The quick brown fox jumped over the lazy dog"
  43.             toolTipShown="textInput_toolTipShown(event);" />
  44.  
  45. </mx:Application>
原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , , , ,

Related Post

Leave a Reply