代码改变世界

Flex 中实现滤镜效果

2012-05-08 16:12  随风浪迹天涯  阅读(459)  评论(1编辑  收藏  举报

不知道,园子里的朋友对Flex的滤镜了解的多少,因为现在的效果需要用到flex开发,所以最近在学习 actionscript (类似于javascript,都是基于同一个标准开发出来的)语言,新学习一门东西,有一些很基本的都容易搞错。

今天学习了一个滤镜效果,代码很简单,希望对你们有作用。呵呵!~。

我的实现是在 Flex Builder上面实现的!。

一。代码实现

<s:layout>
        <s:BasicLayout />
    </s:layout>
    <mx:Form>//这里指的是 实现三个拉选框,,如结果图中 可以看到。
        <mx:FormItem label="blurX:">
            <mx:HSlider id="blurXSlider"
                        minimum="0"//最小值
                        maximum="10"//最大值
                        value="4" //第一次打开的默认值
                        snapInterval="1"//每次拉动的跳跃值
                        tickInterval="1"
                        liveDragging="true" />//是否允许拖动
        </mx:FormItem>
        <mx:FormItem label="blurY:">
            <mx:HSlider id="blurYSlider"
                        minimum="0"
                        maximum="10"
                        value="4"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
        </mx:FormItem>
        <mx:FormItem label="quality:">
            <mx:HSlider id="qualitySlider"
                        minimum="0"
                        maximum="10"
                        value="1"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
        </mx:FormItem>
    </mx:Form>
    
    <s:BitmapImage id="img" source="@Embed('Img/DSCF0568.JPG')" horizontalCenter="0" verticalCenter="0" width="200" height="200">
        <s:filters>
            <s:BlurFilter id="blurFilter" blurX="{blurXSlider.value}" blurY="{blurYSlider.value}" quality="{qualitySlider.value}" />
        </s:filters>
    </s:BitmapImage>

二。结果展示

1.在刚刚开始,三个值 都还没有改变的时候

2.把值都拉到一半的时候

3.把值都拉到最右面的时候