在TWaver中，拓撲上的告警呈現的方式是多種多樣的，最常見、最通用的是在原來的圖片上疊加上告警級別所對應的顏色，這種方式在TWaver的各個分支版本中都是支持的，呈現效果如下圖所示：
另外還有兩種是將告警顏色添加在網元的前景或背景上，效果如下：
我們主要來看默認的渲染方式，這種方式是采取圖片顏色疊加處理，也就是在原來網元的圖片上疊加上告警的顏色，對于大部分的圖片來說是沒有什么問題的，比如任意從網上找兩種圖片進行告警渲染：
看得出來效果還是可以的，兩張圖片的染色都沒有保持著告警的顏色。但有些圖片的渲染就不是那么讓人滿意了，從客戶那邊取過來一個icon圖片做了一下測試，結果發現：
圖中對于Major，Minor和custom這三種級別的告警渲染的顏色和冒泡的顏色顯然有些不同。對于這種情況該如何處理呢，經查閱API獲得TWaver可以自定義告警染色的規則，默認采用了Defaults中的PIXEL_FILTER_FUNCTION，我們來看看默認的實現：
1 function(sourceColor:uint, filterColor:uint):uint {
2 var r:uint = (sourceColor >> 16) & 0xFF;
3 var g:uint = (sourceColor >> <img src="http://twaver.servasoft.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> & 0xFF;
4 var b:uint = sourceColor & 0xFF;
5 sourceColor = (r * 77 + g * 151 + b * 28) >> 8;
6 sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor;
7 return sourceColor & filterColor;
8 }
有了這個方法之后，我們就可以對其進行定制，可以將這三種顏色進行一下特殊處理，直接返回告警的顏色
1 var s:uint = (162 << 16) | (193 << <img src="http://twaver.servasoft.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> | 210; twaver.Defaults.PIXEL_FILTER_FUNCTION =
function(sourceColor:uint, filterColor:uint):uint {
if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color || filterColor == AlarmSeverity.MINOR.color || filterColor == customAlarmSeverity.color)) {
return filterColor; }
var r:uint = (sourceColor >> 16) & 0xFF;
2 var g:uint = (sourceColor >> <img src="http://twaver.servasoft.com/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley"> & 0xFF;
3 var b:uint = sourceColor & 0xFF;
4 sourceColor = (r * 77 + g * 151 + b * 28) >> 8;
5 sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor;
6 return sourceColor & filterColor;
7 };
運行后再來看看效果：
最新附上完整的代碼供大家參考：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
3 xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"
4 width="100%" height="100%"
5 creationComplete="init()" backgroundColor="#FFFFFF" >
6 <mx:Script>
7 <![CDATA[
8 import twaver.AlarmSeverity;
9 import twaver.Defaults;
10 import twaver.Node;
11 import twaver.Utils;
12 import twaver.Consts;
13 import twaver.Styles;
14
15 [Embed(source="/image/BTSGroup.png")]
16 private static var bts:Class;
17
18 [Embed(source="/image/network_server.png")]
19 private static var wireless:Class;
20
21 private static var customAlarmSeverity:AlarmSeverity = AlarmSeverity.register(3, 'custom', 'custom', 0xE4DC8A);
22
23 private function init():void {
24 var s:uint = (162 << 16 ) | (193 << 8 ) | 210;
25 Utils.registerImageByClass('bts', bts);
26 Utils.registerImageByClass('wireless', wireless);
27 twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor:uint, filterColor:uint):uint {
28 if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color ||
29 filterColor == AlarmSeverity.MINOR.color
30 || filterColor == customAlarmSeverity.color)) {
31 return filterColor;
32 }
33 var r:uint = (sourceColor >> 16 ) & 0xFF;
34 var g:uint = (sourceColor >> 8 ) & 0xFF;
35 var b:uint = sourceColor & 0xFF;
36 sourceColor = (r * 77 + g * 151 + b * 28 ) >> 8;
37 sourceColor = (sourceColor << 16 ) | (sourceColor << 8 ) | sourceColor;
38 return sourceColor & filterColor;
39 };
40
41 addNode(AlarmSeverity.CRITICAL, 220, 100,'bts');
42 addNode(AlarmSeverity.MAJOR, 340, 100,'bts');
43 addNode(AlarmSeverity.MINOR, 460, 100,'bts');
44 addNode(AlarmSeverity.WARNING, 580, 100,'bts');
45 addNode(AlarmSeverity.INDETERMINATE, 700, 100,'bts');
46
47 addNode(AlarmSeverity.CRITICAL, 220, 250,'wireless');
48 addNode(AlarmSeverity.MAJOR, 340, 250,'wireless');
49 addNode(AlarmSeverity.MINOR, 460, 250,'wireless');
50 addNode(AlarmSeverity.WARNING, 580, 250,'wireless');
51 addNode(AlarmSeverity.INDETERMINATE, 700, 250,'wireless');
52 }
53
54 private function addNode(alarmSeverity:AlarmSeverity, x:Number, y:Number,image):void {
55 var node:Node = new Node();
56 node.image = image;
57 if(image == "bts"){
58 node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE);
59 node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_CIRCLE);
60 node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_CENTER);
61 node.setStyle(Styles.INNER_GRADIENT_ALPHA, 0.5);
62 node.setStyle(Styles.INNER_ALPHA, 0.8);
63 node.setStyle(Styles.INNER_PADDING, -6);
64 node.setStyle(Styles.INNER_BACK, false);
65 }else if(image == "wireless"){
66 node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE);
67 node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_DIAMOND);
68 node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_SOUTHWEST);
69 node.setStyle(Styles.INNER_PADDING_TOP, 10);
70 node.setStyle(Styles.INNER_PADDING_BOTTOM, -5);
71 node.setStyle(Styles.INNER_PADDING_LEFT, -20);
72 node.setStyle(Styles.INNER_PADDING_RIGHT, -20);
73 }
74
75 node.name = alarmSeverity.name ;
76 node.location = new Point(x, y);
77 node.alarmState.setNewAlarmCount(alarmSeverity, 22);
78 network.elementBox.add(node);
79 }
80 ]]>
81 </mx:Script>
82 <twaver:Network id="network" width="100%" height="100%" />
83 </mx:HBox>