Ticore’s Blog

2008/04/11 更新，修正鼠标滚轮卷动 Bug

在 Flex 技巧 – 对齐中心缩放 Part 2
强迫容器内所有对象都要位于零或是正数坐标上
避免 Canvas 内的对象对齐中心缩放时不会被截掉
但是不适合用在多个对象情况

另外，Flex Canvas 本身也无法呈现位于负数坐标轴的对象
所以花了很多时间观察 Flex Canvas、Container 程序代码
想办法调整 Canvas 行为，让它可以呈现负数坐标轴的对象
加上之前覆写的 validateDisplayList 就可以更完美的缩放视野

Flex 在线范例：

AdvancedCanvas Class：

/* Ticore's Blog */ package com.ticore.uicomponents { import flash.geom.*; import mx.containers.Canvas; import mx.core.*; use namespace mx_internal; public class AdvancedCanvas extends Canvas { public function AdvancedCanvas() { super(); } override mx_internal function getScrollableRect():Rectangle{ var rect:Rectangle = super.getScrollableRect(); // Negative coordinates force clip content rect.x = -1E-323; rect.y = -1E-323; return rect; } override protected function scrollChildren():void{ super.scrollChildren(); // Offset scrollPosition if (contentPane && contentPane.scrollRect) { var bounds:Rectangle = super.getScrollableRect(); var sRect:Rectangle = contentPane.scrollRect; sRect.offset(bounds.x, bounds.y); contentPane.scrollRect = sRect; } } override public function validateDisplayList():void{ var centerPercentX:Number = 0; var centerPercentY:Number = 0; // Record scrollPosition percent if (maxHorizontalScrollPosition > 0) { centerPercentX = horizontalScrollPosition / maxHorizontalScrollPosition; } else { centerPercentX = 0.5; } if (maxVerticalScrollPosition > 0) { centerPercentY = verticalScrollPosition / maxVerticalScrollPosition; } else { centerPercentY = 0.5; } super.validateDisplayList(); // Restore scrollPosition percent if (maxHorizontalScrollPosition > 0) { var newHScrollPosition:Number = maxHorizontalScrollPosition * centerPercentX; newHScrollPosition = newHScrollPosition > 0 ? newHScrollPosition : 0; newHScrollPosition = newHScrollPosition < maxHorizontalScrollPosition ? newHScrollPosition : maxHorizontalScrollPosition; horizontalScrollPosition = newHScrollPosition; } if (maxVerticalScrollPosition > 0) { var newVScrollPosition:Number = maxVerticalScrollPosition * centerPercentY; newVScrollPosition = newVScrollPosition > 0 ? newVScrollPosition : 0; newVScrollPosition = newVScrollPosition < maxVerticalScrollPosition ? newVScrollPosition : maxVerticalScrollPosition; verticalScrollPosition = newVScrollPosition; } } } }

Flex MXML：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" xmlns:comp="com.ticore.uicomponents.*" width="100%" height="100%" layout="vertical" backgroundColor="#E0E0E0" themeColor="#000000" fontSize="11"> <mx:Script> <![CDATA[ [Bindable] [Embed(source='../assets/assets.swf', symbol='Murex')] public var img:Class; ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:LinkBar width="100%" dataProvider="{viewStack}" /> </mx:ApplicationControlBar> <mx:ViewStack id="viewStack" width="100%" height="100%"> <mx:VBox width="100%" height="100%" label="Sample 1"> <mx:Label text="Align Center & Zooming by Center" /> <comp:AdvancedCanvas borderColor="#808080" borderStyle="inset" width="100%" height="100%"> <mx:Image horizontalCenter="0" verticalCenter="0" source="{img}" scaleX="{zoomSlider.value}" scaleY="{zoomSlider.value}" /> </comp:AdvancedCanvas> </mx:VBox> <mx:VBox width="100%" height="100%" label="Sample 2"> <mx:Label text="Two Images Offset Center" /> <comp:AdvancedCanvas borderColor="#808080" borderStyle="inset" width="100%" height="100%"> <mx:Image horizontalCenter="-50" verticalCenter="-25" alpha="0.7" source="{img}" scaleX="{zoomSlider.value}" scaleY="{zoomSlider.value}" /> <mx:Image horizontalCenter="50" verticalCenter="25" alpha="0.7" source="{img}" scaleX="{zoomSlider.value}" scaleY="{zoomSlider.value}" /> </comp:AdvancedCanvas> </mx:VBox> <mx:VBox width="100%" height="100%" label="Sample 3"> <mx:Label text="Two Images with Negative Coordinates" /> <comp:AdvancedCanvas borderColor="#808080" borderStyle="inset" width="100%" height="100%"> <mx:Image x="-100" y="-50" alpha="0.7" source="{img}" scaleX="{zoomSlider.value}" scaleY="{zoomSlider.value}" /> <mx:Image x="100" y="50" alpha="0.7" source="{img}" scaleX="{zoomSlider.value}" scaleY="{zoomSlider.value}" /> </comp:AdvancedCanvas> </mx:VBox> </mx:ViewStack> <mx:HSlider id="zoomSlider" width="100%" liveDragging="true" labels="['0.1x', '3x','6x']" tickValues="[0.1, 1, 2, 3, 4, 5, 6]" value="0.3" minimum="0.1" maximum="6" tickInterval="1" /> </mx:Application> <!-- Ticore's Blog - -->

相关连结：
Flex 技巧 – 对齐中心缩放
Flex 技巧 – 对齐中心缩放 Part 2