在TWaver中，拓撲上的告警呈現(xiàn)的方式是多種多樣的，最常見、最通用的是在原來的圖片上疊加上告警級別所對應(yīng)的顏色，這種方式在TWaver的各個分支版本中都是支持的，呈現(xiàn)效果如下圖所示：

另外還有兩種是將告警顏色添加在網(wǎng)元的前景或背景上，效果如下：

我們主要來看默認的渲染方式，這種方式是采取圖片顏色疊加處理，也就是在原來網(wǎng)元的圖片上疊加上告警的顏色，對于大部分的圖片來說是沒有什么問題的，比如任意從網(wǎng)上找兩種圖片進行告警渲染：

看得出來效果還是可以的，兩張圖片的染色都沒有保持著告警的顏色。但有些圖片的渲染就不是那么讓人滿意了，從客戶那邊取過來一個icon圖片做了一下測試，結(jié)果發(fā)現(xiàn)：

圖中對于Major，Minor和custom這三種級別的告警渲染的顏色和冒泡的顏色顯然有些不同。對于這種情況該如何處理呢，經(jīng)查閱API獲得TWaver可以自定義告警染色的規(guī)則，默認采用了Defaults中的PIXEL_FILTER_FUNCTION，我們來看看默認的實現(xiàn)：

function(sourceColor:uint, filterColor:uint):uint { var r:uint = (sourceColor >> 16 ) & 0xFF; var g:uint = (sourceColor >> 8 ) & 0xFF; var b:uint = sourceColor & 0xFF; sourceColor = (r * 77 + g * 151 + b * 28) >> 8; sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor; return sourceColor & filterColor; }

有了這個方法之后，我們就可以對其進行定制，可以將這三種顏色進行特殊處理，直接返回告警的顏色：

function(sourceColor:uint, filterColor:uint):uint { if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color || filterColor == AlarmSeverity.MINOR.color)) { return filterColor; } var r:uint = (sourceColor >> 16 ) & 0xFF; var g:uint = (sourceColor >> 8 ) & 0xFF; var b:uint = sourceColor & 0xFF; sourceColor = (r * 77 + g * 151 + b * 28) >> 8; sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor; return sourceColor & filterColor; };

運行后再來看看效果：

最新附上完整的代碼供大家參考：

<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex" width="100%" height="100%" creationComplete="init()" backgroundColor="#FFFFFF" > <mx:Script> <![CDATA[ import twaver.AlarmSeverity; import twaver.Defaults; import twaver.Node; import twaver.Utils; import twaver.Consts; import twaver.Styles; [Embed(source="/image/BTSGroup.png")] private static var bts:Class; [Embed(source="/image/network_server.png")] private static var wireless:Class; private static var customAlarmSeverity:AlarmSeverity = AlarmSeverity.register(3, 'custom', 'custom', 0xE4DC8A); private function init():void { var s:uint = (162 << 16 ) | (193 << 8 ) | 210; Utils.registerImageByClass('bts', bts); Utils.registerImageByClass('wireless', wireless); 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; var g:uint = (sourceColor >> 8 ) & 0xFF; var b:uint = sourceColor & 0xFF; sourceColor = (r * 77 + g * 151 + b * 28 ) >> 8; sourceColor = (sourceColor << 16 ) | (sourceColor << 8 ) | sourceColor; return sourceColor & filterColor; }; addNode(AlarmSeverity.CRITICAL, 220, 100,'bts'); addNode(AlarmSeverity.MAJOR, 340, 100,'bts'); addNode(AlarmSeverity.MINOR, 460, 100,'bts'); addNode(AlarmSeverity.WARNING, 580, 100,'bts'); addNode(AlarmSeverity.INDETERMINATE, 700, 100,'bts'); addNode(AlarmSeverity.CRITICAL, 220, 250,'wireless'); addNode(AlarmSeverity.MAJOR, 340, 250,'wireless'); addNode(AlarmSeverity.MINOR, 460, 250,'wireless'); addNode(AlarmSeverity.WARNING, 580, 250,'wireless'); addNode(AlarmSeverity.INDETERMINATE, 700, 250,'wireless'); } private function addNode(alarmSeverity:AlarmSeverity, x:Number, y:Number,image):void { var node:Node = new Node(); node.image = image; if(image == "bts"){ node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE); node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_CIRCLE); node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_CENTER); node.setStyle(Styles.INNER_GRADIENT_ALPHA, 0.5); node.setStyle(Styles.INNER_ALPHA, 0.8); node.setStyle(Styles.INNER_PADDING, -6); node.setStyle(Styles.INNER_BACK, false); }else if(image == "wireless"){ node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE); node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_DIAMOND); node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_SOUTHWEST); node.setStyle(Styles.INNER_PADDING_TOP, 10); node.setStyle(Styles.INNER_PADDING_BOTTOM, -5); node.setStyle(Styles.INNER_PADDING_LEFT, -20); node.setStyle(Styles.INNER_PADDING_RIGHT, -20); } node.name = alarmSeverity.name ; node.location = new Point(x, y); node.alarmState.setNewAlarmCount(alarmSeverity, 22); network.elementBox.add(node); } ]]> </mx:Script> <twaver:Network id="network" width="100%" height="100%" /> </mx:HBox>

自定義告警染色