Flex中利用drawRoundRect函数以及设置mask属性创建一个边角圆滑的Image控件的例子
By Minidxer | September 10, 2008
接下来的例子演示了Flex中如何利用drawRoundRect函数以及设置mask属性，创建一个边角圆滑的Image控件。这对于像册之类的应用来说相当有用。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码(或点击这里察看)：
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application name="Image_mask_test"
- xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white"
- initialize="init();">
- <mx:Script>
- <![CDATA[
- import mx.events.ResizeEvent;
- private var roundedMask:Sprite;
- private function init():void {
- roundedMask = new Sprite();
- canvas.rawChildren.addChild(roundedMask);
- }
- private function image_resize(evt:ResizeEvent):void {
- var w:Number = evt.currentTarget.width;
- var h:Number = evt.currentTarget.height;
- var cornerRadius:uint = 60;
- roundedMask.graphics.clear();
- roundedMask.graphics.beginFill(0xFF0000);
- roundedMask.graphics.drawRoundRect(0, 0,
- w, h,
- cornerRadius, cornerRadius);
- roundedMask.graphics.endFill();
- image.mask = roundedMask;
- }
- ]]>
- </mx:Script>
- <mx:Canvas id="canvas">
- <mx:Image id="image"
- source="http://blog.minidx.com/ext/image1.jpg"
- resize="image_resize(event);">
- </mx:Image>
- </mx:Canvas>
- </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子
Topics:
Flex |
No Comments » |
614 views
Tags: drawRoundRect(), graphics, Image, Mask