在 Flex/Actionscript 中连接线(拖动时) [英] Connecting lines (while dragging) in Flex/Actionscript

问题描述

我有一个 mx:Canvas 元素，其中包含多个 mx:Panel 元素.我希望能够绘制一条连接两个这样的 mx:Panel 的线，当一个或两个 mx:Panel 被拖动时，该线继续连接两个 mx:Panel.看起来应该是微不足道的事情，但我一直无法弄清楚.

I have a mx:Canvas element that contains several mx:Panel elements. I want to be able to draw a line connecting two such mx:Panel's in such a way that the line continues to connect the two mx:Panels when one or both get dragged around. It seems like something that should be trivial to do, but I haven't been able to figure it out.

实际上，这就是问题所在.

In effect, this is the problem.

替代文字 http://img150.imageshack.us/img150/5656/ishot1eu3.jpg

由于更新仅在面板到达其最终位置时发生，因此一旦您开始拖动B"面板，就会留下一条悬垂线:

Since the updates only occur when the Panel reaches it's final position, as soon as you start dragging the "B" panel, you are left with a dangling line:

替代文字 http://img212.imageshack.us/img212/4296/ishot2qi6.jpg

如下所述，一个可能的解决方案是覆盖 mx:Canvas 组件的 updateDisplayList() 方法.不幸的是，这只会在拖动后更新绘图，而不会在运动时更新.监听面板中的xChanged"和yChanged"事件产生与覆盖 updateDisplayList() 相同的结果.

A possible solution, as suggested below, would be to override the updateDisplayList() method of the mx:Canvas component. Unfortunately, that only updates the drawing after the dragging, and not while in motion. Listening to the "xChanged" and "yChanged" events in the Panel produces the same results as overriding the updateDisplayList().

如下所述，最终的解决方案需要将移动事件从移动面板分派到它正在移动的画布上.这会迫使线条在整个运动过程中重新绘制.

The final solution, as pointed out below, requires dispatching the move events from the moving Panel to the Canvas on which it is moving. This forces the lines to get redrawn throughout the whole motion.

感谢大家的帮助！

推荐答案

我已经尝试覆盖updateDisplayList() 方法mx:Canvas 组件，但似乎仅在之后更新绘图拖着.我希望这条线按照当前的 mx:Panel 进行操作拖动."

您可以收听 MoveEvent.面板中的 MOVE 事件并让处理程序调用重绘线条，然后让面板在拖动时通过监听 MouseEvent.MOUSE_MOVE 舞台中的事件并在处理程序中分派 MOVE 事件(将此处理程序附加到面板的 MouseEvent.MOUSE_DOWN 事件处理程序中的舞台，以及 MouseEvent.MOUSE_UP(也附加到舞台上)——然后在 MOUSE_UP 处理程序中从舞台中删除这两个事件侦听器.)

You can listen to MoveEvent.MOVE events in the Panels and have the handler call for the redrawing of the lines, and then have the Panels dispatch these events while they are being dragged by listening for MouseEvent.MOUSE_MOVE events in the stage and dispatching the MOVE event in the handler (attach this handler to the stage in the Panel's MouseEvent.MOUSE_DOWN event handler, along with a handler for MouseEvent.MOUSE_UP (attached to the stage as well) -- then remove both of these event listeners from the stage in the MOUSE_UP handler.)

这是一个示例(这将在 Panel 子类中:)

Here's an example (this would be in the Panel subclass:)

private function attachListeners():void
{
    this.addEventListener(MouseEvent.MOUSE_DOWN, selfMouseDownHandler, false,0,true);
    this.addEventListener(MoveEvent.MOVE, selfMoveHandler, false,0,true);
}

private function selfMoveHandler(event:MoveEvent):void
{
    redrawConnectedLinks();
}

private function selfMouseDownHandler(event:MouseEvent):void
{
    stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false,0,true);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false,0,true);
}

private function stageMouseUpHandler(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false);
}

private function stageMouseMoveHandler(event:MouseEvent):void
{
    dispatchEvent(new MoveEvent(MoveEvent.MOVE));
}

这篇关于在 Flex/Actionscript 中连接线(拖动时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！