游戏菜单图标,定制Flex菜单图标

默认Menu上的Icon必须通过iconField和iconFunction去指定，但是这两种方式都必须用嵌入资源Class名字去指定Icon，如果想用动态的图片（比如URL）作为Menu的Icon，就必须定制一把MenuItemRenderer。

首先写个类CustomMenuItemRenderer继承MenuItemRenderer，里面增加一个如下变量作为自定义Icon的组件：
private var image:UIComponent = new UIComponent();
然后里面重写measure方法（计算MenuItem的宽高）：
override protected function measure():void { super.measure(); if (separatorIcon || listData == null) { return; } var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); if(imageAsset == null){ return; } measuredWidth += imageAsset.width; if(imageAsset.height > measuredHeight){ measuredHeight = imageAsset.height; } }
重写commitProperties方法（重画并增加Icon，指定Icon宽高）：
override protected function commitProperties():void { super.commitProperties(); if (separatorIcon || listData == null) { return; } var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); if(imageAsset == null){ return; } image.width = imageAsset.width; image.height = imageAsset.height; image.graphics.beginBitmapFill(imageAsset.getBitmapData()); image.graphics.drawRect(0, 0, image.width, image.height); image.graphics.endFill(); if(!this.contains(image)){ this.addChild(image); } }

重写updateDisplayList方法（指定Icon的位置，由于Icon在左边，所以super一把后，再移动Labe等的位置）：
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ super.updateDisplayList(unscaledWidth, unscaledHeight); if (separatorIcon || listData == null) { return; } var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); if(imageAsset == null){ return; } if(typeIcon){ typeIcon.x += imageAsset.width; } if(label){ label.x += imageAsset.width; } }

重写measuredIconWidth方法（计算Icon的宽度）：
override public function get measuredIconWidth():Number { var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); if(imageAsset == null){ return 0 ; }else{ var horizontalGap:Number = getStyle("horizontalGap"); return imageAsset.width + horizontalGap; } }

最后用自定义的CustomMenuItemRenderer指定Menu的ItemRenderer，注意使用iconName指定icon的名字（这里为TWaver注册图片的名字）。也可以用别的名字，注意把CustomMenuItemRenderer里面的@iconName换一下
var menu:Menu = Menu.createMenu(network, myMenuData, false); menu.labelField = "@label"; menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer); var point:Point = network.getLogicalPoint(event.mouseEvent); network.callLater(function():void{ menu.show(point.x, point.y); });
指定Menu数据的XML文件如下：


需要源代码请留言更多关于MenuItemRenderer的用法参见官方文档： http://livedocs.adobe.com/flex/3/html/help.html?content=menucontrols_3.html

延伸阅读