Flex 放大镜效果实现代码

    复制代码 代码如下:

    <?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&apos;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>

发表评论

发表评论