Flex 自定义组件外观

核心提示： 图 7. 网格背景效果图像圆角图像圆角是 Web2.0 重要的标志，如果你用过 CSS 进行圆角的开发，Flex 自定义组件外观(9)，那么不管在开发过程中或者处理浏览器兼容问题时一定会大喊痛苦，然而在 Flex 中，由于笔者知识水平有限，如果有错误的地方，图像圆角变的非常简单，使用 Mask

图 7. 网格背景效果

图像圆角

图像圆角是 Web2.0 重要的标志，如果你用过 CSS 进行圆角的开发，那么不管在开发过程中或者处理浏览器兼容问题时一定会大喊痛苦。然而在 Flex 中，图像圆角变的非常简单，使用 Mask 技术就可以轻松得实现。这种技术的直观感觉是将某一控件 A 覆盖在另一控件 B 之上，而 B 显示的部分则是被 A 遮盖的部分。如果 A 具有透明度，那么 B 也会有透明度。例子代码如清单 7. 所示。

清单 7. 图像圆角组件

　　<?xml　version="1.0"　encoding="utf-8"?>　
　<mx:Canvas　
　　xmlns:mx="http://www.adobe.com/2006/mxml"　
　　xmlns:filters="flash.filters.*"　
　　width="100%"　height="100%"　>　
　
　　<mx:Image　source="assets/ygy.jpg"　x="10"　y="10"　mask="{maskCanvas}">　
　　　　<mx:filters>　
　　　　　　<filters:DropShadowFilter　/>　
　　　　</mx:filters>　
　　</mx:Image>　
　　　
　　<mx:Canvas　x="81"　y="62"　width="344"　height="274"　backgroundColor="#ff0000"　
　　id="maskCanvas"　cornerRadius="15"　borderStyle="solid"/>　
　　　
　</mx:Canvas>　

清单 7 中图像圆角组件实际上是一个 Canvas，该组件内显示的是一个 Image（A），该 Image 指定 mask 为 maskCanvas，也就是一个 id 为 maskCanvas 的 Canvas（B），代码的意思是使用 B 遮盖 A，那么 B 的样式决定了 A 显示的样式，B 的样式中重要的是 backgroundColor 和 cornerRadius，backgroundColor 设置成红色，并不透明，cornerRadius 设置 B 的圆角（注意，Image 没有这个属性），那么使用深色的 B 遮盖 A，A 将显示被 B 遮盖的部分，也就是显示了图像的圆角，效果如图 8。

图 8. 图像圆角效果

该效果使用的原图像如图 9 所示。这是一张方形的图像。

图 9. 原图像

从清单 7 的 Design 视图可以看出 A 和 B 的遮盖结果，效果如图 10。

图 10. Design 视图

原图像主要内容被红色背景的 Canvas 遮盖，四个角没被遮盖因此运行时则不被显示。运行后效果就会如图 8 所示了。

总结

本文的目的主要在于让读者了解 Flex 自定义组件外观的方法和技巧，如果读者有兴趣的话，可以做进一步的研究，掌握更多设置外观的方法，让 Flex 在你手中更加丰富多彩。由于笔者知识水平有限，如果有错误的地方，欢迎联系我指正。