Flex 4中如何给Panel设置bitmap填充背景色的例子

By Minidxer | October 10, 2009

接下来的例子演示了Flex 4中如何通过BitmapFill和LinearGradient，给Panel设置bitmap填充背景色。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_Panel_fill_BitmapFill_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <mx:ApplicationControlBar width="100%" cornerRadius="0">
  8.         <mx:Form styleName="plain">
  9.             <mx:FormItem label="rotation:">
  10.                 <s:HSlider id="rotationSlider"
  11.                         minimum="-360"
  12.                         maximum="360"
  13.                         value="90"
  14.                         liveDragging="true"
  15.                         width="{pnl.width}" />
  16.             </mx:FormItem>
  17.             <mx:FormItem label="ratio:">
  18.                 <s:HSlider id="ratioSlider"
  19.                         minimum="0.0"
  20.                         maximum="1.0"
  21.                         value="0.2"
  22.                         valueInterval="0.05"
  23.                         liveDragging="true"
  24.                         width="{pnl.width}" />
  25.             </mx:FormItem>
  26.         </mx:Form>
  27.     </mx:ApplicationControlBar>
  28.  
  29.     <s:Panel id="pnl"
  30.             title="Spark Panel title"
  31.             width="320" height="240"
  32.             horizontalCenter="0" verticalCenter="0">
  33.         <s:Rect width="100%" height="100%">
  34.             <s:fill>
  35.                 <s:BitmapFill source="@Embed('assets/pattern_140.gif')" />
  36.             </s:fill>
  37.         </s:Rect>
  38.         <s:Rect width="100%" height="100%">
  39.             <s:fill>
  40.                 <s:LinearGradient rotation="{rotationSlider.value}">
  41.                     <s:GradientEntry color="white"
  42.                             alpha="0.0"
  43.                             ratio="0.0" />
  44.                     <s:GradientEntry color="#F0EBD2"
  45.                             alpha="1.0"
  46.                             ratio="{ratioSlider.value}" />
  47.                 </s:LinearGradient>
  48.             </s:fill>
  49.         </s:Rect>
  50.         <s:TextArea id="textArea"
  51.                 verticalScrollPolicy="on"
  52.                 left="20" right="20"
  53.                 top="20" bottom="20">
  54.             <s:text>The quick brown fox jumps over the lazy dog.</s:text>
  55.         </s:TextArea>
  56.     </s:Panel>
  57.  
  58. </s:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, Panel | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll