Flex 2 技巧 - 圓角容器遮罩

Flex 2 技巧 - 圓角容器遮罩

Flex 2 很多容器都有支援圓角邊框的設定 cornerRadius
不過容器的物件卻會超出圓角邊界
使用上不太方便~~

以下利用另一個圓角物件當作 Mask，遮住超出圓角的物件

view plain |  copy to clipboard |  print |  ? | 

∙∙∙∙∙∙∙∙∙10∙∙∙∙∙∙∙∙20∙∙∙∙∙∙∙∙30∙∙∙∙∙∙∙∙40∙∙∙∙∙∙∙∙50∙∙∙∙∙∙∙∙60∙∙∙∙∙∙∙∙70∙∙∙∙∙∙∙∙80∙∙∙∙∙∙∙∙90∙∙∙∙∙∙∙∙100∙∙∙∙∙∙∙110∙∙∙∙∙∙∙120∙∙∙∙∙∙∙130∙∙∙∙∙∙∙140∙∙∙∙∙∙∙150

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
3.  <mx:HBox>
4.   <mx:Label text="Border Thickness"/>
5.   <mx:NumericStepper id="step1" maximum="100" value="6"/>
6.   <mx:Label text="Corner Radius"/>
7.   <mx:NumericStepper id="step2" maximum="100" value="16"/>
8.  </mx:HBox>
9.  <mx:Canvas width="80%" height="80%" id="c1"
10.   borderStyle="solid" borderThickness="{step1.value}" cornerRadius="{step2.value}">
11.   <mx:Canvas width="100%" height="100%" id="c2"
12.    borderStyle="solid" borderThickness="0" cornerRadius="{step2.value - step1.value}"
13.    backgroundColor="#0" cacheAsBitmap="true"/>
14.   <mx:Canvas width="100%" height="100%" mask="{c2}" cacheAsBitmap="true">
15.    <mx:Button x="-32" y="-45" width="100" height="100" label="Button"/>
16.    <mx:Button x="228" y="-45" width="100" height="100" label="Button"/>
17.    <mx:Button x="390" y="119" width="100" height="100" label="Button"/>
18.    <mx:Button x="10" y="119" width="100" height="100" label="Button"/>
19.    <mx:Button x="218" y="263" width="100" height="100" label="Button"/>
20.    <mx:Button x="598" y="323" width="100" height="100" label="Button"/>
21.    <mx:Button x="598" y="-37" width="100" height="100" label="Button"/>
22.    <mx:Button x="-45" y="280" width="100" height="100" label="Button"/>
23.   </mx:Canvas>
24.  </mx:Canvas>
25. </mx:Application>

執行效果：

轉載請註明出處  http://ticore.blogspot.com/2007/09/flex-2.html