像 flex 中的地图一样缩放绘图

Posted 2023-02-18

【中文标题】像 flex 中的地图一样缩放绘图

【英文标题】：Zoom drawing like a map in flex

【发布时间】：2013-03-06 18:10:10

【问题描述】：

我正在尝试像 flex 中的地图一样缩放我的绘图，但我所做的一切都是通过 HSlider 进行缩放。你能解释一下如何像谷歌地图一样缩放我的绘图吗？

这是我的缩放代码： 我的缩放功能：

private function doZoom(component:UIComponent,val:Number):void
        
            if(component is Container)
            
                var children:Array = Container(component).getChildren();
                for(var i:int = 0; i < children.length; i++)
                
                    zoomChildren(children[i], val);
                
            

        

        private function zoomChildren(component:UIComponent,val:Number):void
        

            component.scaleX = val;
            component.scaleY = val;
            if(component is Container) 
            
                var children:Array = Container(component).getChildren();
                for(var i:int = 0; i < children.length; i++)
                
                    doZoom(children[i], val);
                
            
        

        public function applyZoom():void
        

            if(pnl == null)
            
                return;
            

            doZoom(pnl,zoomSlider.value);
        

和我的组件：

<s:VGroup>
    <s:Button  label="Загрузить SVG" click="PathsService.getPaths()"/>  

    <mx:Panel  y="30"   id="pnl"  title="Отрисовка SVG" borderColor="#008040" fontFamily="Arial" fontWeight="bold" fontSize="13">

        <s:VGroup   clipAndEnableScrolling="true">

            <s:SpriteVisualElement   id="spr" />
        </s:VGroup>

    </mx:Panel>
    <s:HGroup  >
        <s:Label text="Zoom" x="250"/>

        <mx:HSlider id="zoomSlider" minimum=".1" value="1"
                    maximum="2" change="applyZoom()"  x="300"/>
    </s:HGroup>
</s:VGroup>

【参考方案1】：

如果你的意思是你想让组件根据鼠标滚轮输入做出响应，你应该为鼠标滚动事件注册一个事件监听器。

例如在您尝试缩放的组件上添加以下行 addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);

在你的 mouseWheelHandler 函数中，你应该得到 event.delta 值，它应该包含滚轮移动的量