2

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

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

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

由于更新仅在面板到达其最终位置时发生，所以一旦您开始拖动“B”面板，就会留下一条悬空线：

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

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

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

感谢所有的帮助！

4

5 回答 5

4

“我尝试过覆盖 mx:Canvas 组件的 updateDisplayList() 方法，但这似乎只会在拖动后更新绘图。我希望​​线条在拖动时跟随 mx:Panel。”

您可以在面板中监听MoveEvent.MOVE事件并让处理程序调用重新绘制线条，然后让面板在它们被拖动时通过监听MouseEvent.MOUSE_MOVE舞台中的MOVE事件并在处理程序中调度事件来调度这些事件（附上这个处理程序到面板的MouseEvent.MOUSE_DOWN事件处理程序中的阶段，以及处理程序MouseEvent.MOUSE_UP（也附加到阶段）- 然后从处理程序中的阶段删除这两个事件侦听器MOUSE_UP。）

这是一个示例（这将在 Panel 子类中：）

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));
}
于 2008-12-03T00:25:26.740 回答
1

flexwires是一个开源项目，用于在 Flex 中实现这种类型的“连接线”UI 范例。它可能正好适合您的需求。

于 2008-12-11T23:06:51.197 回答
0

您想覆盖 Canvas 上的 UIComponent 方法 updateDisplayList() 并在其中进行绘图。

这是假设您通常熟悉 AS3 中的线图。

于 2008-12-02T18:06:46.927 回答
0

你不能在这里使用绑定功能吗？绑定到圆心的线的终点？

于 2009-08-14T15:38:20.953 回答
0

flash/flex 的新手，遇到了类似的问题。我通过将事件侦听器附加到 Enter_Frame 事件来解决它。我不确定这是否是最有效的解决方案，因为即使对象没有移动它也会重绘，但它对我有用：

    import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;

public class Association extends Sprite
{
    private var t1:DisplayObject;
    private var t2:DisplayObject;
    //Connects two objects
    public function Association(t1:DisplayObject, t2:DisplayObject)
    {
        this.t1=t1;
        this.t2=t2;
        this.addEventListener(Event.ENTER_FRAME, redraw)
        super();
    }

    public function redraw(event:Event):void
    {
        graphics.clear();
        graphics.lineStyle(2,0x000000);
        graphics.moveTo(t1.x,t1.y);
        graphics.lineTo(t2.x,t2.y);
    }

}
于 2010-01-19T13:44:39.970 回答