0

在此代码画布中，id layout_cnv 对齐水平居中对齐和垂直居中对齐。当图像放大时，它正在缩放但不是从顶部和左侧显示，它正在进入内部意味着它不是从左侧和顶部位置滚动

我想在中心位置而不是从左上角放大。

请帮我

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
    <![CDATA[
        import mx.events.SliderEvent;

        private function changeZoom(event:SliderEvent) : void
        {
            layout_cnv.scaleX = event.target.values[0]*2/100;
            layout_cnv.scaleY = event.target.values[0]*2/100;
        }           

        private function calculateCoordinates() : void
        {
            var x : Number = (canvas.width - layout_cnv.width) / 2;

            x = x < 0 ? 0 : x;
            var y : Number = (canvas.height - layout_cnv.height) / 2;
            y = y < 0 ? 0 : y;

            layout_cnv.move(x, y);  

            callLater(calculateCoordinates);
        }

        private function adjustDefaultZoom() : void
        {
            layout_cnv.scaleX = slider.values[0]/100*2;
            layout_cnv.scaleY = slider.values[0]/100*2;
            callLater(calculateCoordinates);
        }

        private function myDataTipFunc(val:String):String {
            return  String(val)+ "%";
        }
    ]]>
</fx:Script>

<mx:Panel title="Zoom Demo" width="100%" height="100%">     
    <mx:Canvas id="canvas" width="100%" height="100%"  horizontalScrollPosition="500">          
        <mx:Canvas visible="true" id="layout_cnv" creationComplete="adjustDefaultZoom()"  borderStyle="solid" height="300" width="500" verticalCenter="0" horizontalCenter="0"
                   verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#FFFFFF">           
            <mx:Image id="swfContainer" source="thumbImages/1.jpg"  x="0" y="0" width="100%" height="100%"/>        
        </mx:Canvas>
    </mx:Canvas>

    <mx:ControlBar horizontalAlign="center">
        <mx:HSlider id="slider" width="400" minimum="1" maximum="100" labels="['0%','100%']" values="[50]" tickInterval="10" snapInterval="1" liveDragging="true" change="changeZoom(event)"
                    dataTipFormatFunction="myDataTipFunc" />
    </mx:ControlBar>        
</mx:Panel>

谢谢，尼丁

4

1 回答 1

1

我对Flex了解不多。然而在 as3 中，有一种简单的方法可以在中心放大。它正在创建包装对象并放大它。

例子...

var wrapper:Sprite = new Sprite();
wrapper.x = layout_cnv.x + layout_cnv.width/2;
wrapper.y = layout_cnv.y + layout_cnv.height/2;
addChild(wrapper);

layout_cnv.x = -layout_cnv.width/2;
layout_cnv.y = -layout_cnv.height/2;
wrapper.addChild(layout_cnv);

并更改包装对象的比例。

    private function changeZoom(event:SliderEvent) : void
    {
        wrapper.scaleX = event.target.values[0]*2/100;
        wrapper.scaleY = event.target.values[0]*2/100;
    }
于 2013-10-25T10:44:54.123 回答