Flex 放大镜效果

来源：互联网发布：问卷网怎么导出数据编辑：程序博客网时间：2024/05/16 14:52

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    layout="vertical"
    verticalScrollPolicy="off"
    horizontalScrollPolicy="off"
    backgroundColor="#FFFFFF"
    backgroundGradientColors="#FFFFFF,#FFFFFF"
    applicationComplete="onApplicationComplete();"
    xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            [Embed(source="assets/magnify.pbj", mimeType="application/octet-stream")]
            private var shaderObj:Class;

private var shader:Shader;

private var shaderFilter:ShaderFilter;

            /**
             * Initialize the shader
             */
            private function onApplicationComplete():void
            {
                // create the shader
                shader = new Shader( new shaderObj() );
                shader.data.center.value = [image.width/2, image.height/2];
                setShader();

                // setup event listeners
                stage.addEventListener( Event.ENTER_FRAME, onEnterFrame, false, 0, true );
            }

            /**
             * Each frame, only reapply the filter if necessary
             */
            private function onEnterFrame( event:Event ):void
            {
                setShader();
            }

            /**
             * Update all the shader's properties, create a new ShaderFilter,
             * and reapply it to the image
             */
            private function setShader():void
            {
                var centerX:Number = image.mouseX;
                var centerY:Number = image.mouseY;
                if( centerX < 0 || centerY < 0 || centerX > image.width || centerY > image.height )
                {
                    var currentX:Number = shader.data.center.value[0];
                    var currentY:Number = shader.data.center.value[1]
                    centerX = currentX + ((image.width / 2)-currentX) / 2;
                    centerY = currentY + ((image.height / 2)-currentY) / 2;
                }

                shader.data.center.value = [centerX, centerY];
                shader.data.innerRadius.value = [innerRadiusSlider.value];
                shader.data.outerRadius.value = [outerRadiusSlider.value];
                shader.data.magnification.value = [magnificationSlider.value];
                shaderFilter = new ShaderFilter( shader );
                image.filters = [shaderFilter];
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="Inner Radius">
            <mx:HSlider
                id="innerRadiusSlider"
                minimum="0"
                maximum="200"
                value="50"
                liveDragging="true" />
        </mx:FormItem>
        <mx:FormItem label="Outer Radius">
            <mx:HSlider
                id="outerRadiusSlider"
                minimum="0"
                maximum="200"
                value="100"
                liveDragging="true" />
        </mx:FormItem>
        <mx:FormItem label="Magnification">
            <mx:HSlider
                id="magnificationSlider"
                minimum="1"
                maximum="50"
                value="4"
                liveDragging="true" />
        </mx:FormItem>
    </mx:Form>

    <mx:Image
        id="image"
        source="assets/YellowFlowers.jpg" />

</mx:Application>