Flexlib ImageMap 实现区域变色偏方-图文
话说最近使用flex做界面。因为刚用不久，对其不是特别了解。项目中用到了使用Flexlib 库中的ImageMap 可以实现html中的热点区域。现在想实现鼠标点击某个区域，或者鼠标移到某个区域，该区域就变色。效果图如下。
但是要实现这样 的功能，ImageMap 本身是不提供的。那该怎么办呢？
根据查看ImageMap的源代码。以及同事的提示。我们可以根据现有的点进行绘制。将绘制出来的新图层覆盖到上面就可以了。
其部分代码如下：
|
public function givBh(evt:ImageMapEvent):void{ var sprite:UIComponent =new UIComponent(); if(this.getChildren().length>1){ this.removeChildAt(1); } var g:Graphics=sprite.graphics; g.beginFill(0×110000,0.5); drawPoly(g,evt.item.coords.split(‘,’)); g.endFill(); this.addChild(sprite); } private function drawPoly(g:Graphics, coords:Array):void { g.moveTo(coords[0], coords[1]); for(var i:int=2; i<coords.length; i+=2) { g.lineTo(coords[i], coords[i+1]); } g.lineTo(coords[0], coords[1]); } |
通过代码我们可以知道。每次我们都new了一个UIcomponent，然后把它添加到画板上，但是这样做就会导致每个都添加了，不能去掉。所以，在每次添加之前，我们都进行了判断，更具他的孩子个数我们就可以知道他目前有没有区域添加了颜色。如果有，我们就先把他移除。当然这种判断要因自己的程序而定制。好像也可以按名次取。大家可以试试。
这样以后，再在<ImageMap>中添加上属性：shapeClick="givBh(event)" 或者shapeOver="givBh(event)"。就可以实现点击变色或者鼠标移上去就变色。
本文由weidays原创。
2011/08/08 于 15:00:14
我用的是flex 4.0
2011/08/08 于 14:56:21
我试了下你的方法，但是不行.这行 g.beginFill(0×110000,0.5); 报错 说 ：
此行的多个标记:
-1093: 语法错误。
-1084: 语法错误: rightparen 应在 110000 之前。
-g
2011/03/14 于 10:33:22
我试了下你的方法，但是不行。你是把代码写在MXML里的吗？我出来的效果就是原来 的图片没了，在右下脚出现了选择的区域。
2011/03/09 于 11:05:53
哥，这个我还是不懂，你有没有源码给我参照一下，为啥我测试了，它不出效果呢，帮帮忙，谢谢啦
2010/10/13 于 09:13:15
这样会覆盖图片区域原有的链接
2010/10/13 于 16:30:55
是的！
2010/06/01 于 17:29:14
沙发。。。
可以上图不？
2010/06/01 于 17:33:26
回复想上图？