Flex 自定义组件外观

核心提示： 冒泡信息提示框冒泡信息提示框是自定义的 ToolTip，传统的 Flex ToolTip 效果如图 4 所示，Flex 自定义组件外观(5)，图 4. 传统 ToolTip可以看到效果还是比较简陋的，为了增强用户体验，调用 Graphics 对象的 drawRoundRect 方法绘制冒泡的圆形

冒泡信息提示框

冒泡信息提示框是自定义的 ToolTip，传统的 Flex ToolTip 效果如图 4 所示。

图 4. 传统 ToolTip

可以看到效果还是比较简陋的，为了增强用户体验，文章实现了新的 ToolTip 让其拥有冒泡效果，效果展示如图 5.

图 5. 冒泡 ToolTip

冒泡 ToolTip 的思想是新建名为 BubbleToolTip 的类，继承于 Canvas，实现 IToolTip 接口，IToolTip 是自定义 ToolTip 必须实现的接口。重写 BubbleToolTip 的 updateDisplayList 方法，目的是重新绘画 BubbleToolTip 的皮肤，皮肤的绘制依赖 BubbleToolTip 内部的 Graphics 对象，通过 this.graphics 语句可以获得该 Graphics 对象的引用，调用 Graphics 对象的 drawRoundRect 方法绘制冒泡的圆形，提示的具体内容则使用子对象 Canvas 存放。清单 3 是 BubbleToolTip 的 updateDisplayList 方法代码。

清单 3. BubbleToolTip 的 updateDisplayList 方法

　override　protected　function　updateDisplayList(　
　　　　　　unscaledWidth:Number,　unscaledHeight:Number　)　:　void　
　{　　
　　super.updateDisplayList(　unscaledWidth,　unscaledHeight　);　
　
　
　this.graphics.clear();　
　
　　this.graphics.beginFill(　getStyle('backgroundColor'),　1　);　
　　this.graphics.lineStyle(2,　getStyle('borderColor'),　1);　
　　this.graphics.drawRoundRect(0,　35,　6,　6,　24,　24);　
　　this.graphics.endFill();　
　
　　this.graphics.beginFill(　getStyle('backgroundColor'),　1　);　
　　this.graphics.lineStyle(2,　getStyle('borderColor'),　1);　
　　this.graphics.drawRoundRect(10,　25,　15,　15,　24,　24);　
　　this.graphics.endFill();　
　}