Соединение линий (при перетаскивании) в Flex / Actionscript

Question

У меня есть элемент mx: Canvas, который содержит несколько элементов mx: Panel. Я хочу иметь возможность нарисовать линию, соединяющую две такие панели mx: Panel таким образом, чтобы линия продолжала соединять две панели mx: Panel, когда одна или обе перемещаются. Кажется, что-то, что должно быть тривиально, но я не смог понять это.

По сути, это проблема.

альтернативный текст http://img150.imageshack.us/img150/5656/ishot1eu3.jpg

Поскольку обновления происходят только тогда, когда Panel достигает своей конечной позиции, как только вы начинаете перетаскивать панель «B», у вас остается висячая линия:

альтернативный текст http://img212.imageshack.us/img212/4296/ishot2qi6.jpg

Возможное решение, как предлагается ниже, заключается в переопределении метода updateDisplayList () компонента mx: Canvas. К сожалению, это только обновляет чертеж после перетаскивания, а не во время движения. Прослушивание событий «xChanged» и «yChanged» в Panel дает те же результаты, что и переопределение updateDisplayList ().

Окончательное решение, как указано ниже, требует отправки событий перемещения с движущейся панели на холст, на котором она движется. Это заставляет линии перерисовываться на протяжении всего движения.

Спасибо за помощь!

Answer 1

"Я пытался переопределить updateDisplayList () метода MX: компонент Canvas, но это кажется обновлять чертеж только после перетаскивание. Я хотел бы за линию следуйте инструкциям mx: Panel тащили ".

Вы можете прослушивать MoveEvent.MOVE события в панелях и вызывать обработчик для перерисовки линий, а затем Панели отправлять эти события во время их перетаскивания, прослушивая MouseEvent.MOUSE_MOVE события на этапе и отправка события MOVE в обработчике (присоедините этот обработчик к этапу в обработчике событий MouseEvent.MOUSE_DOWN Panel вместе с обработчиком для 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));
}

Answer 2

flexwires - это проект с открытым исходным кодом для реализации этого типа парадигмы пользовательского интерфейса «связанных линий» во Flex. Это может просто соответствовать вашим потребностям.

Answer 3

Впервые на 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);
    }

}

Answer 4

Разве вы не можете использовать здесь функцию привязки? конечная точка линии, привязанной к центру круга?

Answer 5

Вы хотите переопределить метод updateDisplayList () UIComponent на Canvas и выполнить там свой рисунок.

Предполагается, что вы знакомы с рисованием линий в AS3 в целом.