3.16.创建并控制可调整大小的容器

2023-08-08 22:33:11

字体：大中小

来源：转载

供稿：网友

3.16.1 问题
我们需要创建一个可以通过拖拽角落图标而调整大小的容器。
3.16.2 解决办法
在拖拽图标上使用MouseEvent 类侦听mouseDown、mouseMove 和mouseUp 事件。当拖拽图标释放的时候重新设置容器的尺寸。
3.16.3 讨论
通过在MXML 和ActionScript 里为这些事件添加侦听，我们可以在Icon 对象上侦听到mouseDown 事件。当捕获mouseDown 事件时，为鼠标在舞台上的所有动作添加了一个侦听，这个侦听可以捕获所有鼠标动作并且让用户决定什么时候调整容器的大小。通过使用UIComponent 类的startDrag 和stopDrag 方法，我们可以设置什么时候是否拖拽代表拖拽图标的UIComponent。下面的例子，经由explicitWidth 和explicitHeight 的setter 方法，
将图标的位置用以设置Canvas 的新宽和高。

-XML

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300" backgroundColor="#ccccff"
verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Script>
private function startResize():void
{
stage.addEventListener(MouseEvent.MOUSE_MOVE,
resize);
resizeIcon.addEventListener(MouseEvent.MOUSE_UP,
stopResize);
resizeIcon.addEventListener(MouseEvent.ROLL_OUT,
stopResize);
resizeIcon.startDrag();
}

用户按住鼠标按钮不放时，舞台的所有mouseMove 事件即被捕获。用户释放鼠标按钮的时候，移除所有的事件侦听同时调用resizeIcon 的stopDrag 方法。这防止图标移动，同时防止这个组件的调整大小的方法被调用。

-ActionScript

private function stopResize(mouseEvent:MouseEvent):void
{
resizeIcon.removeEventListener(MouseEvent.MOUSE_UP,
stopResize);
resizeIcon.removeEventListener(MouseEvent.ROLL_OUT,
stopResize);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,
resize);
resizeIcon.stopDrag();
}

Flex 框架不考虑任何测量和调整大小的逻辑，直接使用组件的explicitHeight 和explicitWidth 属性指定组件的像素尺寸。

-XML

<mx:Script>
private function resize(mouseEvent:MouseEvent):void
{
this.explicitHeight = resizeIcon.y +
resizeIcon.height + 10;
this.explicitWidth = resizeIcon.x + resizeIcon.width
+ 10;
}
]]>
</mx:Script>
<mx:Panel width="60%" height="60%" top="20" left="20"/>
<mx:Image id="resizeIcon"
source="@Embed('../../assets/Resize.png')" mouseDown="startResize()" x="360" y="260"/>
</mx:Canvas>